html是什么：超文本标记语言
html的唯一作用就是：给指定的文本添加语义。
html的标准格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>作用：由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的.
<html lang="zh-CN">lang属性作用：告诉各大搜索引擎，该页面的语言是简体中文
<head>作用：页面中的控制信息（不需要显示的信息）都写在head标签中
<meta charset="UTF-8">作用：告诉浏览器，body中的语言使用utf-8进行解码
<title>作用：告诉浏览器该页面的标题是什么
<body>作用：页面中的内容（需要浏览器显示的信息）都写在body标签中
所有标签都会用id属性（标识唯一），class属性（标识一类），他们的命名规则：
标签介绍：
标签特征：
容器级标签（可以嵌套其他标签）：div h ul ol dl li dt dd ...
文本级标签（只能嵌套文字、图片、超链接）：span p buis strong em ins del ...
块级元素：p div h ul ol dl li dt dd
行内元素：span buis strong em ins del
基础标签：
style标签：css代码的内联方法，使用方法在head中添加css代码，一般企业开发中大多使用外联的方法。
h1标签：用于给文本添加标题语义，h标签一共有6个，h系列标签是块级元素（display:block，独占一行）
格式：
<h1>xxxxxx</h1>
注意点：企业开发中，要慎用h系列标签，特别是h1标签，一个界面一般情况只能有1个h1标签。
p标签：告诉浏览器哪些文字是一个段落，p标签是块级元素（display:block，独占一行）
格式：
<p>xxxxxx</p>
hr标签：在浏览器上显示一条分割线（display:block，独占一行），不建议使用，修改样式通常使用css。
格式：
<hr />
br标签：让内容换行
格式：
<br />
img标签：在网页上插入一张图片（浏览器通过识别url自动请求获取图片，放到对应位置上）
格式：
<img src="images/banner.jpg" alt="err" title="手机图片">
属性介绍：
src作用：浏览器获取图片的路径（可以使用绝对路径和相对路径）
alt作用：规定替代图片的文本，浏览器获取图片出错的时候，浏览器则显示文本内容
title作用：悬停文本，一般用于介绍图片，只有鼠标移动到图片上才会显示
a标签：用于从一个页面链接到另一个页面，也可以做同一个页面不同位置的锚定跳转
格式：
<a href="[http://www.baidu.com](http://www.baidu.com/)" target="_blank" title="跳转百度">百度</a>
属性介绍：
href作用：指定跳转的目标地址target作用：告诉浏览器在源标签中跳转（_self）还是打开新标签（_blank），不写默认为_self在源标签跳转
title作用：悬停文本，一般用于介绍图片，只有鼠标移动到图片上才会显示
注意点：
a标签之间，一定要有内容（文本或者img图片），否则没办法在浏览器上显示这个标签a标签也叫做超链接
可以使用base标签配置，当前环境中a标签target属性的默认值，格式<base target="_blank" />，base标签需要写在head标签里面
a标签的锚定跳转用法:
假链接（本质是跳转到当前页面）：
<a href="#">博客</a>
<a href="javascript:">博客</a>
跳转到当前页面指定位置（锚点位置）：
给指定位置的任意标签添加一个id属性，例如：<p id="location">这个是目标</p>
跳转到该锚点位置：<a href="#location">跳转到指定位置</a>
跳转到指定页面指定位置：
<a href="锚点链接.html#location">跳转到指定位置</a>
div标签：一般用于配合css完成网页的基本布局（display:block，独占一行），在css布局时，通常使用class属性进行选择
格式：
<div class='xxx'>xxxxxx</div>
注意点：div是容器级标签，容器级标签的特点就是可以嵌套其他所有的标签
span标签：一般用于配合CSS修改网页中的一些局部信息
格式：
<p>努力到<span class='span'>无能为力</span>, 拼搏到<span>感动自己</span></p>
注意点：span标签是文本级标签，文本级标签只能嵌套文本、图片、超链接
article标签： 表示独立的自包含内容，如：一篇文章。文章中可包含头部标题（header标签）、内容、脚注（footer）
section标签：表示文档中的节（区块），一般是具有标题的，语义比article标签更弱一些，表示一块。
aside标签：标签定义其所处内容之外的内容， aside 的内容应该与附近的内容相关，可以做文章侧栏。
header标签：标签定义文档的页眉（介绍信息），如：标题
footer标签： 标签定义 section 或 document 的页脚，在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
nav标签： 标签定义导航链接的部分。
strong作用: 着重内容，文本样式默认加粗
格式:
<strong>着重内容</strong>
ins作用: 新插入的文本，文本样式默认下划线
格式:
<ins>新插入的文本</ins>
em作用:强调内容，文本样式默认斜体
格式:
<em>强调内容</em>
del作用: 已删除的文本，文本样式默认删除线
格式:
<del>已删除的文本</del>
[图片上传失败...(image-31e7f6-1532748685918)]
details标签：详情和概要标签
格式：
<details>
<summary>概要信息</summary>
详情信息
</details>
[图片上传失败...(image-f30584-1532748685911)]
注意点：
利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
列表标签：
无序列表(unordered list)
ul标签: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
li作用: li 英文是 list item, 翻译为列表项，li是在ul里面的子元素，一个ul中子元素的li不分先后
格式:
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ul>
注意点：
1、浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
2、浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
3、由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
4、虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
定义列表(definition list)
dl标签: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
格式:
dt英文definition title, 翻译为定义标题
dd英文definition description, 翻译为定义描述信息
<dl>
<dt>北京</dt>
<dd>国家的首都, 看升国旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黄金的地方</dd>
</dl>
dl应用场景:
1、网站底部相关信息
2、但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
注意事项:
dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
dd和dt和li标签一样是容器标签, 里面可以添加任意标签
定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的上一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl
表格标签：
table标签:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
格式：
table定义表格
tr定义行
td定义单元格
[图片上传失败...(image-be011c-1532748685918)]
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
align: 规定表格相对周围元素的对齐方式, 它的取值有center（居中）、left（居左）、right（居右）
给table设置align属性, 是让表格在浏览器中居左/居右/居中
给tr设置align属性, 是让当前行中所有内容居左/居右/居中
给td设置align属性,是让当前单元格中所有内容居左/居右/居中
该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
valign: 规定表格相对周围元素的对齐方式, 它的取值有middle（居中）、top（居上）、bottom（居下）
给table设置valign属性, 无效
给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
bgcolor:规定表格的背景颜色
给table设置bgcolor属性, 是给整个表格设置背景颜色
给tr设置bgcolor属性, 是给当前行设置背景颜色
给td设置bgcolor属性, 是给当前单元格设置背景颜色
该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
使用实例：
使用表格属性让快级元素中的多行文字水平垂直居中：
html代码：
<div class="parent">
<p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、
发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
</p>
</div>
css代码：
.parent {
display：table； #设置成块级表格元素
width：300px；
height：300px；
text-align：center； #表格元素中的文本、图片、超链接水平居中
}
.son {
display：table-cell； #设置为表格的单元格
height：200px；
background-color：yellow；
vertical-align：middle； #设置单元格的内容垂直居中
}
表单标签：
form标签: 用于收集用户信息, 让用户填写、选择相关信息
格式:
<form>
所有的表单内容，都要写在form标签里面
</form>
注意事项:
- 所有的表单内容，都要写在form标签里面
属性介绍：
action：表单提交到服务器的路由地址
method：提交表单的方式，常见为get（通过拼接url进行数据提交）和post（通过在request的body中提交key-value的方式进行数据提交）
在form标签中嵌套的常见标签：
input标签：form表单中的核心标签，通过input标签的type属性，可以选择不同的取值方式
格式:
<input disabled type="text" name="fullname" maxlength="8" placeholder='用户名' />
属性介绍：
type：设置input的类型，如下为常见类型
text=明文输入框
password=暗文输入框
radio=单选框（单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性）
checkbox=多选框（也是要有相同的name，虽然他不需要互斥，但是也要有相同的name）
button=按钮（多数情况下，用于通过 JavaScript 启动脚本）
image=自定义图像形式的按钮
reset=重置按钮（重置按钮会清除表单中的所有数据）
submit=提交按钮（提交按钮会把表单数据发送到action属性指定的页面）
hidden=隐藏域（隐藏域的内容不会被浏览器所显示）
color=取色器（HTML5新增类型，可以获取颜色）
date=日期选择器（HTML5新增类型，可以获取日期）
name：表单中需要提交的数据以 name：value 的形式所表示，name一般指名所提交的是什么信息，
value： 表单中需要提交的数据以 name：value 的形式所表示，value一般指名用户所提交的信息本体（value也可以用来配置默认值）
checked：默认勾选，checked属性需要type值为radio或者checkbox的时候才生效，作用是给单选框或者多选框默认勾上（前提是同一组内容必须使用相同的name，多组单选框如果选中多个checked只会生效最后一个）
placeholder：占位符，placeholder属性需要type为input时才生效，作用是给文本框添加隐隐的解释文本
disabled ：无法修改的文本框，disabled属性需要type为input时才生效，作用是让文本框不能通过用户界面修改
maxlength：文本框可以输入的最大长度为8个字符，同样需要type是input才生效
label标签: label标签不会向用户直接呈现任何特殊效果。不过，它为鼠标用户改进了可用性，通过鼠标点击label元素区域能让光标聚焦在绑定的输入框中或者单多选框直接勾选
注意点:
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定
datalist标签：需要有input输入框存在的情况下以及支持HTML5特性的浏览器才有效，给输入框绑定待选项，起到提醒用户的作用。（和select完全不一样）
格式：
<input type="text" list="输入框id">
<datalist id='输入框id'>
<option>待选项内容</option>
</datalist>
[图片上传失败...(image-e9263a-1532748685915)]
textarea标签：表单中定义多行的文本输入控件
格式：
<textarea cols="30" rows="10">默认</textarea>
属性：
cols：表示columns“列”, 规定文本区内的可见宽度
rows：表示rows“行”, 规定文本区内的可见行数
注意点:
可以通过cols和rows来指定输入框的宽度和高度
默认情况下输入框是可以手动拉伸的
禁止手动拉伸可以在css中设置：textarea { resize : none}
select标签：select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项，不能输入其他值
格式：
<select>
<optgroup label="北京市">
<option>海淀区</option>
<option>昌平区</option>
<option>朝阳区</option>
</optgroup>
<optgroup label="广州市">
<option>天河区</option>
<option>白云区</option>
</optgroup>
<option selected="selected">贵州</option>
</select>
option作用：select标签中嵌套的子标签，用做生成一个选项
option属性：
selected：selected值为selected的时候，则为select选项框设置该option为默认选项
optgroup作用：给select标签中的选项进行分组
optgroup属性：
label：属性为选项组规定描述
[图片上传失败...(image-9e9a60-1532748685914)]
多媒体标签：
marquee标签：跑马灯效果
格式：
<marquee>内容</marquee>
marquee属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
[图片上传失败...(image-59900d-1532748685914)]
video标签： 播放视频
格式1：
<video src="">
</video>
格式2：
<video>
<source src="" type="video/mp4"></source>
<source src="" type="video/webm"></source>
</video>
属性：
src: 需要播放的视频地址
autoplay: 是否需要自动播放视频
controls: 是否需要显示控制条
poster: 视频没有播放之前显示的占位图片
loop: 循环播放视频. 一般用于做广告视频
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:视频静音
width/height: 和img标签中的一模一样，设置宽度高度
source的type属性：声明当前视频文件的格式，video/mp4指mp4格式、video/webm指webm格式
注意点：
1、当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
2、在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
3、ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
4、通过localhost的方式打开的视频或者音频文件可能会产生无法拖动进度条的bug
audio标签: 播放音频
格式1：
<audio src="">
</audio>
格式2：
<audio>
<source src="" type="video/mp4"></source>
<source src="" type="video/webm"></source>
</audio>
属性：
src: 需要播放的音频地址
autoplay: 是否需要自动播放音频
controls: 是否需要显示控制条
loop: 循环播放音频. 一般用于做背景音频
-
preload: 预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:音频静音
source的type属性：声明当前音频文件的格式，audio/mp3指mp3格式
HTML语义化：
[图片上传失败...(image-1040b2-1532748685913)]
下面就让我们把HTML5语义化标签过一遍：
<header>
定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；
<nav>
定义文章导航栏，链接等;
nav一般和u、li配合做导航栏；
<main>
定义文章的主要内容
main标签在一份文档中是唯一的，其后代元素常常包括
<article>；
<article>
- 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；
<section>
- 与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；
<aside>
- 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；
<footer>
- 页脚，通常包含作者、版权信息或者相关链接等；
极易混淆的语义化标签
下面这两组元素，虽然样式上极其相似，但是其在语义上各有侧重，弄明白他们的区别，可以帮你摸清HTML5语义化的思路...
<i>
表示一段普通文本中，因为某种原因和正常文本不同，例如专业术语、外语短语或排版用的文字，其通常表现为斜体，他的出现不会改变语义；
Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).
一段文本中如果有插入语言不同的专业术语，需要在<i>标签中加上<lang>属性作为注解，例子如下：
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
<i lang="fr">是对je ne sais quoi（习语，表达妙不可言的意思）的注解，表示包含的术语语种为法语；
<em>
表达对文本内容的强调；
其强调位置的不同往往带来语义的变化（可以理解为英语口语中针对一句话中不同位置的重度，影响听话人的理解）；
在视觉效果上也是斜体的效果；
注意：
The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.
- <em>不适用于需要传达重要性的内容，传达重要性的语义应该使用<strong>；
The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.
- <em>标签本质上并不是让包含文本变为斜体字。有时，作者只是想让部分文本在段落/句子中脱颖而出，或是在不同语气或者语态上，这时要用<i>；
<b>
b表示样式上的粗体；
其包含文本，不具备强调重要性的作用，也不影响语态和语气，仅仅是从样式上让包含文本特殊化;
常用语关键字，文本驱动软件中的可执行语句或者一篇文章的导语，说明书中的产品/功能名称等；
<strong>
- strong表示强调带有着重意味，意在传达内容的重要性（需要尽快被看到）、严重性或者紧急性，；
总结：
<em>适用于在一段文本中突出重点，强调位置的不同往往会影响语义，而如果仅仅在语态或者语气上为了突出某个文本，应该使用<i>；
在使用 <i>时，W3C鼓励开发者最好检查下是否有更合适的标签可替代，例如，上述的<em>，来突出重点，或是<dfn>，用来定义一个术语；
如果为了突出文本的重要性，紧急性，严重性应该使用<strong>；
W3C明确说明，<b> 元素应当是在其他标签都不合适的情况下最后一个考虑使用的标签，言外之意，官方并不推荐使用b标签，
<figure>
- 文档中的一些嵌入式内容，比如引用的图片，插图，表格，代码段等，可以作为独立的单元，当这部分转移到附录中或者其他页面时不会影响到主体，这样的元素都可以放在
<figure>元素内，而且可以搭配其子元素<figcaption>作很好的元素说明或者备注信息;
<img>
- img元素最好附带alt信息，即对图片进行文本说明，当图像无法查看时会显示这段文本描述;
<table>
table元素现在有一系列语义化结构标签
<caption>: 表格的标题，跳脱于表格之外;
<thead>：表格的表头行，定义表格的表头内容;
<tbody>：表格的主体部分，表格的主体部分;
<tfoot>：表格的脚注部分，tfoot要和thead，tbody结合起来使用;
<form>
- <label>标签的用法：label标签，为input元素定义标注，改进了表单控件的可用性，当你点击到label标签时，会自动聚焦到对应控件上，label标签一般有两种用法
1. label的for属性与控件的id相对应，比如：
<label for="username">请输入用户名: </label>
<input type="text" id="username" name="username">
2. label中内嵌控件，比如:
<label>请输入用户名<input type="text" id="username" name="username"></label>
此外，
placeholder属性，其值会在输入字段为空时显示，并会在字段获得焦点时消失；
表单中的单选radio控件和复选checkbox控件以及下拉框select控件，可以为radio, checkbox添加checked属性以及为option添加selected属性让其默认选中
