HTML基础

### HTML5 新表单元素

| 标签 | 描述 |
| ---------- | ---------------------------------------- |
| <datalist> | <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | <keygen> 标签规定用于表单的密钥对生成器字段。 |
| <output> | <output> 标签定义不同类型的输出，比如脚本的输出。 |

 

**一.行内元素和块级元素有哪些？**

块级元素

<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的
行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

大家可以发现，上面有些元素有重复，为什么呢，是因为HTML中存在**可变元素。**

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

◎ applet - java applet

◎ button - 按钮

◎ del - 删除文本

◎ iframe - inline frame

◎ ins - 插入的文本

◎ map - 图片区块(map)

◎ object - object对象（当浏览器不支持时，则显示为块级）

◎ script - 客户端脚本

 

##### 何为语义化

　　语义化的含义就是用正确的标签做正确的事情，HTML语义化是指根据内容的结构选择合适的标签，也就是根据网页内容将代码语义化。
　　HTML标签语义化是Web网页标准化的重要一环，也是标准制定时重要的设计原则。HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于这样的设计原则。

 

##### 2）检验标准

　　浏览器会对语义化的标签设计默认的样式，所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。

##### ３）优点

- 有利于搜索引擎以及爬虫工具等更容易读懂页面代码。因为机器不会关注页面实际渲染的外观，爬虫是依赖于标签来确定上下文和各个关键字的权重，只会关注页面内容本身，页面渲染的漂亮与否对机器识别毫无帮助。
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。HTML标签是页面内容的载体，语义化的标签相对于是对所包含内容的一个整体声明，也使得页面整体结构清晰。
- 便于团队开发和维护
- 便于开发者阅读和写出更优雅的代码。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

##### 4）如何做到html语义化

**A、**代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的。所以要做到标签语义化，首先要尽量少用<div>和<span>这两个标签，在使用这两个标签时尽量能找到更有语义的标签代替。
　　**网页的开发者应该熟悉所有规范的HTML标签的使用场景，在合适的地方使用合适的标签。**
　　例如，标签Hx系列则表示标题，在网页中展示各层级的标题时使用；ul和ol标签表示列表，在展现各种数据列表或者菜单时使用；其它使用率较高的语义标签有：p、em、strong、table、site、blockquote等，以及HTML5新加入的标签：<header><footer><article><section><nav><aside>等
**B、**熟悉各标签规范的属性，给HTML标签设置必要的属性。
　　**和标签语义化的重要性一样，某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性，这两个属性设置的也是为了提高HTML的语义。**

　　在img标签中，alt是必须要设置的属性，因为img是自闭合标签，并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替；title属性是可选属性，当标签包含的内容不足以说明语义时，可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。

　　还有一个重要的属性是`<label>`标签中的for属性。`<label>`标签是`<input>`元素定义的标注。`<label>`标签的for属性值指代一个表单元素，属性值为此表单元素的id值。for属性的作用不仅把<lable>标签上的触发事件指向了for属性指代的表单元素，也从语义上绑定了<lable>和此表单元素。

```
<form>
<label for="user_name">User Name：</label>
<input type="text" name="user_name" id="user_name" />
</form>
```

1):article标签:装载显示一个独立的文章内容。
例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。
例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。

2):section 标签:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

3):aside 标签: 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

4):hgroup 标签:用于对网页或区段的标题元素（h1-h6）进行组合。
例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
`<hgroup><h1>标题1</h1><h2>标题2</h2></hgroup>`

5):header 标签:定义文档的页面组合，通常是一些引导和导航信息。

6):footer 标签:定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
实例:
`<footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>`

7):nav 标签:导航链接放在nav标签里。
nav标签里应该放入一些当前页面的主要导航链接。
例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

8):time 标签:定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

10):figure标签:规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

11):figcaption 标签:定义 figure 元素的标题（caption）。