1、div结构标签
web1.0时代，表格布局、html和样式、JavaScript混杂在一起的日子让网页制作非常痛苦，为了解决这些痛点，提出了CSS样式以及新的布局方式。
俗称DIV+CSS布局。
1.1、web1.0时代的弊端
1)、标签和样式混在一起，甚至有专门的无语义的样式标签，比如font / u / s / i 等等，造成代码臃肿，难以阅读。
2)、表格标签结构多，当页面比较大的时候，需要嵌套很多表格，嵌套层级深了之后影响浏览器对页面的渲染，因为浏览器需要把一个标签的开始标签和结束标签都渲染完毕之后，才能显示该标签内的内容，导致网速慢的时候，网页会有一段时间的空白。
3)、布局不够灵活，一旦设计制作好后，很难再修改页面的布局。因为单元格之间互相有牵扯。
4)、web1.0时代，在努力的发展规范html标签，1997年差不多成型，2000年稳定下来，才开始重视样式和布局等用户美观的东西。
表格的优点：
简单容易上手。
直观可见。
单元格具有适应性。
在单元格内，内容可以设置水平和垂直对齐
适合二维数据的罗列。
表格布局的弊端：
table比其它html标记占更多的字节。（造成下载时间延迟，占用服务器更多流量资源）
table会阻挡浏览器渲染引擎的渲染顺序。（会延迟页面的生成速度，让用户等待更久的时间）
table里显示图片时需要你把单个、有逻辑性的图片切成多个图。（增加设计的复杂度，增加页面加载时间，增加http会话数）
在某些浏览器中，table里的文字的拷贝会出现问题。（会让用户不悦）
table会影响其内部的某些布局属性的生效（比如里的元素的height:100%) （限制页面设计的自由性）
一旦学了CSS的知识，你会发现使用table做页面布局会变得更麻烦。（先花时间学一些CSS知识，会省去你以后大量的时间）
‘table对’对于页面布局来说，从语义上看是不正确的。（它描述的是表现，而不是内容）
table代码会让阅读者抓狂。（不但无法利用CSS，而且会不知所云，尤其在进行页面改版或内容抽取的时候）
table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
1.2、div的特征
div 是 division 的简写。division 英[dɪˈvɪʒn] 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
div是block块元素，默认在文档中从上往下依次堆叠。
默认左边贴在外部容器（父容器）的左边。
默认和外部容器（父容器）宽度保持100%，高度由内容撑高。
div之间没有间隔。
div标签没有语义，没有任何样式外观。
div就是一个用来存放内容的容器。
div的嵌套
Markup
<div id="wrap"> <div id="header"> 头部 </div> <div id="main"> <div class="content"> 内容模块1 </div> <div class="content"> 内容模块2 </div> …… </div> <div id="footer"> 版权信息 </div> </div>
div布局的特点：
div标签简单，属性少，即使嵌套比较多，代码也比较精简，加速浏览器的渲染。
div只有两个常规属性，id和class，没有别的样式属性。
让html结构干净，和样式彻底分离。（最重要）
有利于搜索引擎的爬取，利用SEO优化。
1.3、web2.0时代的网站重构
网站重构的核心观点：
HTML结构、CSS样式、JavaScript行为的彻底分离
HTML关注网页结构的语义化（在web1.0时代就完成了，稳定了十来年时间没有变过，直到2014年HTML5的出现）
CSS关注网页的外观样式
JavaScript关注网页和用户的交互行为
2、图像
图片作为html的一部分，想要被搜索引擎抓取，应该用img标签。如果仅仅是装饰作用，不需要被抓取，应该使用背景图片。
Markup
<img src="url" alt="代替文本" title="鼠标经过的标题">
src 路径
alt 代替文本
title 标题，没有优化权重
width 图片一定不能变形
height
背景图片必须用css才能添加。
注意事项：
img是一个行内标签，并且是一个单标签（自关闭）
多种图片格式都认识（jpg，bmp，png，gif，jpeg，webp）
当我们修改图片的宽度时，高度会等比例进行缩放(反之亦然)
3、超链接
Markup
<a href="url" target="_blank" title="超链接标题">被点击的文字或者图片</a>
3.1 常用属性
href
target
title
3.2 绝对路径
统一资源定位器URL
绝对路径以协议（http://、https://）或者以“/”作为前缀：
http协议(一般网络路径)：<a href='https://www.jenreal.cn'>菁瑞优智</a>
基于网站根路径（/）：<a href='/index.html'>首页</a>
3.3 相对路径
定义：以文件本身所在的目录为参照路径进行定位。
`./` 当前目录，可以省略不写。
Markup
<a href="03.html">02.html</a>
`目录名/` 当前目录的下级目录
Markup
<a href='images/01.jpg'>图片1</a>
`../` 当前目录的上级目录
Markup
<a href='../index.html'>返回首页</a>
3.4 物理路径
本地磁盘地址
Markup
<a href='E:'>E盘</a>
3.5 锚点链接
Markup
<a href="#锚点名称">被点击的文字</a> <p id="锚点名称"> 段落内容 </p>
4、列表
ul和li是配套的，不能乱入别的标签，极其重要的一个组织结构和内容的标签
4.1 无序列表
- ul（unordered list ）、li（list item）
- type属性
disc
circle
square
4.2 有序列表
- ol、li
- type属性
a
A
1
i
I
4.3 定义列表
dl、dt、dd
用于专业术语的定义和解释
演变成一些服务条例的解释
天猫底部导航
小米官网底部导航
4.4 嵌套列表
- 下拉菜单
Markup
<ul> <li><a href="#">列表1</a> <ul> <li><a href="#">嵌套列表</a></li> <li><a href="#">嵌套列表</a></li> </ul> </li> </ul>
5、多媒体
Web中多媒体是必不可少的一部分，而在HTML5以前，浏览器本身是对音频和视频不提供支持的，而播放音频和视频就必须使用各种工具和插件，如最早时期的Windows Media Player，和Web中最为流行的Flash Player。HTML5中多媒体播放功能的出现，让用户**无需安装任何工具和插件**就能在网页播放音频和视频。
标签：描述
[audio]：定义音频内容
[video]：定义视频（video 或者 movie）
[source]：定义多媒体资源 video 和 audio
[embed]：定义嵌入的内容，比如插件。
[track]：为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
5.1audio音频
- audio是用来播放音频文件
Markup
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
IE9及现代浏览器都支持，IE8及以下不支持
audio元素支持的3种文件格式：MP3、Wav、Ogg。
浏览器 ： MP3 ： Wav ： Ogg
Internet Explorer： YES ： NO ： NO
Chrome： YES ： YES ： YES
Firefox： YES ： YES ： YES
Safari： YES ： YES ： NO
Opera： YES ： YES ： YES
**提示：**这 3 种音频的 MIME-type 分别是：
音频格式：MINE-type
MP3： audio/mpeg
Ogg： audio/ogg
Wav： audio/wav
HTML5： 中的新属性。
属性 ： 值 ： 描述
[autoplay]： autoplay ： 如果出现该属性，则音频在就绪后马上播放。
[controls]： controls ： 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
[loop]： loop ： 如果出现该属性，则每当音频结束时重新开始播放。
[muted]： muted ： 如果出现该属性，则音频输出为静音。
[preload]： auto metadata none ： 规定当网页加载时，音频是否默认被加载以及如何被加载。
[src]： *URL* ： 规定音频文件的 URL。
5.2 video视频
- video标签可以将视频内容嵌入到HTML文档中
Markup
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
IE9及现代浏览器都支持，IE8及以下不支持
video签定义视频，比如电影片段或其他视频流。
目前，video 元素支持三种视频格式：MP4、WebM、Ogg。
浏览器 ： MP4 ： WebM ： Ogg
Internet Explorer： YES ： NO ： NO
Chrome： YES ： YES ： YES
Firefox： YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 ： YES ： YES
Safari： YES ： NO ： NO
Opera： YES 从 Opera 25 版本开始 ： YES ： YES
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
音频格式的 MIME 类型
格式： MIME-type
MP4： video/mp4
WebM： video/webm
Ogg： video/ogg
HTML5 中的新属性:
属性：值 ： 描述
[autoplay]： autoplay ： 如果出现该属性，则视频在就绪后马上播放。
[controls]： controls ： 如果出现该属性，则向用户显示控件，比如播放按钮。
[height]： *pixels* ： 设置视频播放器的高度。
[loop]： loop ： 如果出现该属性，则当媒介文件完成播放后再次开始播放。
[muted]： muted ： 如果出现该属性，视频的音频输出为静音。
[poster]： *URL* ： 规定视频正在下载时显示的图像，直到用户点击播放按钮。
[preload]： auto metadata none ： 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
[src]： *URL* ： 要播放的视频的 URL。
[width]： *pixels* ： 设置视频播放器的宽度。
3279916262