HTML常用基础标签，前端从入门到精通

先，我们来理解一下一个网页的基本组成

代码如下

一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<br />）

对上述的标签先来解释一下

html------------超文本标记语言，浏览器识别的语言，主要负责页面的内容和结构

head------------标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

body------------元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML常用基础标签用法及实例

1. 

2. 

3. <a href="http://www.baidu.com/">百度一下</a></br>

4. <address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息.-->

</address>

5.

<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。</p>

</article>

6.

<aside>

<h1>文本之外的内容</h1>

<p>我也是文本之外的内容</p>

</aside>

7.<!-- audio video-- <audio> 标签定义声音，比如音乐或其他音频流。

</audio>

8.

9.

10.

11.

12.

13.

14.

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

15.

16.

17.<!--em span i strong <em>把文本定义为强调的内容。<span> 标签被用来组合文档中的行内元素。

<i> 标签显示斜体文本效果。<strong>把文本定义为语气更强的强调的内容。

-->

<em>强调文本内容</em>

<p><span>组合文档中的行内元素</span>你好啊</p>

18.

</footer>

<nav>

<a href="http://www.baidu.com">百度</a>|

</nav>

19.<!-iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）-->

20.

21.<!--img input label-- img 元素向网页中嵌入一幅图像。

<input>--表单标签（一共八种类型）如下所示：

<input type="radio" name=""value="单选"/>

<input type="checkbox" name=""value="选择"/>

<input type="submit" name=""value="提交"/>

<input type="button" name=""value="按钮"/>

<input type="password" name=""value="密码"/>

<input type="text" name=""value="文本"/>

<input type="reset" name=""value="清空"/>

<input type="hidden" name=""value="隐藏"/>

<label> 标签为 input 元素定义标注（标记）。

-->

22.

23.

24.

<select name="">
<option value="">请选择</option>
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</select>

25.

resize禁止拉伸文本框

outline取消文本框选中的颜色

Text-indent:2em首行缩进两个字符

希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

纲

1、什么是<a>标签

2、<a>标签的几个重要属性

3、a标签的运行机制

4、a标签常用的协议

5、超链接标签的样式问题——a标签的伪类选择器的书写顺序

1、什么是<a>标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

2、<a>标签的几个重要属性

2.1、href

规定链接指向的页面的 URL。

2.2、target

规定在何处打开链接文档。

a:自定义打开锚点

target的特殊值：有 4 个保留的目标名称用作特殊的文档重定向操作：

2.3、name

规定锚的名称。（Html5不支持）

2.4、downloadHTML5新增

HTML5新增，只有 Firefox 和 Chrome 支持 download 属性。

download 属性规定被下载的超链接目标。

在 <a> 标签中必须设置 href 属性。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

2.5、media

media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。

该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。

该属性可接受多个值。

只能在 href 属性存在时使用。

3、a标签的运行机制

4、a标签常用的协议

5、超链接标签的样式问题——a标签的伪类选择器的书写顺序

5.1、a标签的多重状态

对于<a>元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visited, :hover, :focus, :active.

“:link”可以用于声明未访问状态链接的样式；

“:visited”可以用于声明已经访问链接的样式；

“:hover”可以用于声明鼠标悬停在链接上的样式；

“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；

“:active”可以用于声明浏览器点击链接的样式。

注意：冒号前后不要出现空格

一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。

link、visited、active分别对应body元素的link、vlink、alink这三个属性。

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。

5.2、链接（a标签状态）定义的顺序

没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。

老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序：a:link、a:visited、a:hover、a:active。若没有按照这样的顺序的话，有的状态的样式会被放置在后面的样式覆盖而导致像没有触发一样没有效果，如：如果hover放在visited之后，则就算我放上去变色了，但是同时这个标签也具有visited状态以及其的效果，会覆盖了hover的效果。

为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。

在W3C规范中，也规定了链接的声明顺序：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

TML5从入门到精通，兄弟连京修随堂笔记（二）HTML的框架结构，每日都有新内容，订阅走一波

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN“

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

DTD：（Document Type Definition, DTD）

<!DOCTYPE HTML PUBLIC "version name" "url">

HTML指定文档类型的名称，为了说明这个页面使用了何种HTML规则，或者结构。

PUBLIC表明所依据的ＤＴＤ文件可对任何人公开访问，而不是某个公司内部的规范文件。

version name指定该HTML版本的标识名称。例如，HTML4.0的标识名称为”-//w3c//DTD HTML 4.01 Transitional//EN”.对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号“＋”开头；没被改进的非ISO标准的DTD以“－”开头。

url指定该HTML语言的定义规范文件在internet上的位置，例如，http://www.w3.org/TR/html4/loose.dtd.

规范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的区别。

头元素

头元素是指位于<head></head>标签元素，主要包括：

<title></title>标签对

<base>标签

<link>标签

<meta>标签

<base>标签用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址的URL的基准地址。

<base>标签通常的使用形式如下：

作用

Href属性设定该网页中所有使用HTTP协议的相对URL地址的基准地址，若网页中有如<a href=“index.html”></a>这样的超链接，它不会再象没有使用<base>标签时那样表示当前网页相同目录下的index.html,而是指向了http://yun.itxdl.cn/techworld/index.html页面

超链接的target属性用于设定该网页中所有的超链接显示的目标窗口，在<base>标签中设定target属性，可省得在所有的超　链接的<a>标签中都加上target属性。

<base>标签

<link>标签

几个主要的属性：

HREF

REL与REV

TITLE

TYPE

例如，　TYPE=“text/css”、TYPE=“text/javascript”

MEDIA

设置值：screen、print、projection、aural、braille、tty、tv、all

<meta>标签

有两种类型的<meta>,用不同的属性名来划分，这两种属性名为：name和http-equiv.

name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。

http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等。

meta标签的name属性设置

Keywords

例如，<meta name=“keywords” content=“php, java, 培训”>

Description

Robots

设置值：index、noindex、follow、nofollow、all、none.

Generator

Author

Meta标签的http-equiv属性设置（１）

Content-Type

例如，<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>

Refresh

例如，<meta http-equiv=“Refresh” content=“1; url=http://yun.itxdl.cn”>

Expires

例如，<meta http-equiv=“Expires” content=“Mon, 12 may 2006 00:20:00 GMT”>,将content设置为0,可以禁止浏览器使用缓存页面。

Meta标签的http-equiv属性设置（２）

Windows-Target

例如，要防止自己的网页被别人当作一个fame页面调用，可以使用<meta http-equiv=“Windows-Target” content=“_top”>.

Pragma

例如，<meta http-equiv=“Pragma” content=“no-cache”>.

Page-Enter和Page-Exit

例如，<meta http-equiv=“Page-Enter” content=“revealTrans(Transition=23, Duration=1.000)”>

在线咨询

上一篇：CSS3动画卡顿性能优化解决方案
下一篇：5分钟读懂Unicode

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML常用基础标签，前端从入门到精通

您的项目需求