011 HTML+CSS(Class121 - 132)
[A] link 标签拓展
1. 引入外部 CSS 样式文件(前面已学过)
<link rel = "stylesheet" type = "text/css" href = "theme.css"> 引入外部一个名叫 theme.css 的css文件
2. 给网页名添加一个小图标
<link rel = "icon" type = "/image/x-icon" href = "http://www.mobiletrain.org/favicon.ico"> 常见固定写法
href中添加图标地址
3. <link rel = "dns-prefetch" href = "//static.360.buying.com"> 通过dns预解析网站内容，加快访问速度
[B] meta 拓展学习
meta：添加辅助信息
【用处】：
辅助信息
1. 添加描述，这个描述信息不会显示在桌面上，但会告诉计算机或者网页，便于做优化
<meta name = "description" content = "大连美团网精选大连美食餐厅，下载美团 app，超级喝完玩乐一折起。">
2. 添加关键词，便于浏览器进行搜索
<meta name = "keywords" content = "大连美食， 大连酒店， 大连团购">
3. < meta name = "renderer" content = "webkit"> 用于支持不同内核的浏览器
功能性信息
4. <meta http-equiv = "X-UA-Compatible" content = "ie = edge"> 当浏览器为IE浏览器时，使用IE的最高级版本渲染
5. <meta http-equiv = "refresh" content = "3" url = " "> 三秒钟后刷新页面，当url中有链接内容时，跳转到指定的页面
6. <meta http-equiv = "empires" content = "Web, 20 Jun 2020 22:30:00 GMT"> 在指定时间进行页面缓存
[C] HTML5 语义化标签
<header> <hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main>
主体内容
</main>
<footer>
版权归作者所有
</footer>
语义化标签可以帮助更科学的划分页面的内容
1. header: 页眉
2. footer：页脚
3. main：主体
4. hgroup：标题组合
5. nav：导航
【注】header，footer，main在一个网页中智能出现一次
划分区域的新标签
6. article：独立的内容
7. aside：辅助信息的内容
8. section: 区域，可以嵌入在articel和aside中使用
9. figure: 描述视频或图像额
10. figcaption：描述图像或视频的标题部分，和figure一起使用，可以实现视频网站中各个视图片和文字的介绍内容
<figure>
<img src="./img/3.png" alt="">
<figcaption>
新水果篮子<br>
十二生肖美少女
</figcaption>
</figure>
11. datalist: 选项列表
<section>
<input type="text" list="elem">
<datalist id="elem">
<option value="as"></option>
<option value="dsas"></option>
<option value="afscs"></option>
<option value="adsvs"></option>
<option value="dfas"></option>
<option value="affxs"></option>
</datalist>
</section>
12. details / summary： 文档细节 / 文档标题
<section>
<details open>
<summary>HTML5</summary>
<p>这是超文本交际语言，请认真学习</p>
</details>
</section>
13. progress / meter: 定义进度条 / 定义度量范围
<section>
<progress min="0" max="10" value="8"></progress>
<meter min="0" max="100" value="80" low="20" high="60"></meter>
</section>
14. time：定义日和时间，对显示效果没有任何影响
15. mark: 带有记号的文本，将需要标记的文字进行突出显示
<section>
<p>今天是<time title="2-14">情人节</time>，街上人很多</p>
<p>今天是<mark>情人节</mark>，街上人很多</p>
</section>
[D] 表格拓展学习
1. 隐藏空单元 empty-cells：hidden
给 table 添加 empty-cells：hidden 属性即可隐藏空单元格
2. 添加单线 border-collapse：collapse
给 table 添加 border-collapse：collapse 属性即可给单元格添加单线
3. 斜线分类 border / rotate
// 待议
[E] 表单拓展之美化控件
1. 通过调用设计好的控件，替换默认的控件即可实现梅花控件的效果
2. 通过将设置好的控件放在默认的控件下面，并将默认的控件设置为透明，即可简单粗暴的实现
[F] 表单元素拓展
1. input控件补充：
email: 电子邮件地址输入框
url: 网址输入框
number：数值输入框
range: 滑动条
data/month/week: 日期控件
search：搜索框
color： 颜色控件
tel： 电话号码输入框(在移动端会默认调取数字键盘)
time: 时间
2. 表单属性：
autocomplete： 自动完成, 根据搜索历史，在搜索框中自动完成输入值。默认开启,即"autocomplete = on"
autofocus: 获取焦点，当页面打开时，光标自动获取该表单框中
required: 不能为空，即该输入框为空时，无法提交(会提示无法提交)。
pattern: 正则验证，验证输入内容是否符合要求。
3. 表单新属性(主要用于前后端数据交互)：
method： 数据传输方式
enctype： 数据传输类型
name/value: 数据的键值对
4. 表单拓展标签：
fieldset： 表单内元素分组
legend： 为fieldset元素定义标题
optgroup： 为选项组中的选项进行分组
[G] BFC规范
BFC规范
Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。他是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC即block Formatting context(块级格式化上下文)，它属于上述中的其中一种规范。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素在布局上不会影响到外面的元素，
并且BFC具有普通容器所没有的一些特性。
可以出发BFC的一些设置：
1. float： 除了none以外的值
2. position： 值为absolute和fixed时
3. display： 值为inline-block，table-cells和flex时
4. overflow： 除了visible以外的值(hidden，auto，scroll)
BFC可解决的问题：
1. margin叠加问题：两个同级的div容器，前一个的margin-bottom和后一个的margin-top会发生重叠并取较大值。
BFC解决：给这两个div各自套上一个div，并通过上述四种方式的其中一种触发BFC规范即可。
2. margin传递问题：两个嵌套的div，如果父元素和第一个子元素的上边界重合，则内部的div设置的margin-top会同时带动其父元素的div向下偏移， 结果是两个div的top保持平齐。
BFC解决：触发父元素的BFC规范即可。
3. 浮动问题：两个嵌套的div，内部div的浮动会使父元素的div无法被撑开
BFC解决：触发父元素的BFC规范即可。
4. 覆盖问题：两个同级的div，当前一个div浮动时，会浮在后一个div的上面，覆盖掉后一个div的一部分内容(不包括文字)
BFC解决：触发父元素的BFC规范即可。
