Web前端笔记（5）
发展历史：
1991年八月六日，欧洲核子研究中心的科学家启动了世界上第一个可以访问的网站，从此人类宣布了互联网时代的到来，到2014年确定了HTML5标准.
1994年提出了CSS层叠样式表，知道1996年，CSS才演变成我们熟悉的样子。
HTML标签：
1. strong和b标签，em和i标签
<strong>和<em>都是表示强调的标签，表现形态为文本加粗和斜体。<i>和<b>标签也表示文本加粗和斜体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<strong>文本1</strong>
<b>文本2</b>
<em>文本3</em>
<i>文本4</i>
</body>
</html>
区别：<strong>和<em>是具备语义化的(推荐使用)，而<b><i>是不具备语义化的，但是可以简化选择器的操作。
2.引用标签
blockquote： 用于引用大段的段落解释
q: 引用小段的短语解释
abbr: 缩写或首字母缩略词
address：引用文档地址信息
cite: 引用著作的标题
应用这些形式的引用标签，能够方便搜索引擎更好的搜索到网页的内容，同时规范编码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<p>
<abbr title="world health organisation">WHO</abbr>成立于1948年，总部位于
<address>北京市海淀区</address>,路遥的代表作是<cite>《平凡的世界》</cite>
</p>
</body>
</html>效果：
3. iframe嵌套页面
iframe会创建包含另一个文档的内联框架（即行内框架），也就是说，可以在已有的页面当中嵌入另一个页面，即实现引入其他页面的功能。
常见属性：
frameborder: 是否显示框架周围的边框
width: 定义iframe的宽度
height：定义iframe的高度
scrolling：规定是否在iframe中显示滚动条
src: 规定在iframe中引入的url ，链接地址或本地页面的路径
srcdoc:规定在iframe中显示的页面内容 （内容可以是HTML代码），当src和srcdoc同时存在时，只能识别srcdoc, src会失效
引入其他的HTML到当前的html中显示，主要利用iframe属性进行样式的调节
应用场景：数据传输，共享代码，局部刷新，第三方介入（嵌入广告）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#iframe-block{
width: 100%;
max-height: 600px;
margin: 0 auto;
margin-bottom: 20px;
}
#bowen-block{
width: 800px;
max-height: 600px;
margin: 0 auto;
margin-bottom: 20px;
}
.text-title{
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="text-title">iframe嵌套页面演示</div>
<div id="iframe-block" class="iframe-content"> <!--宽度100%-->
<iframe src="https://taobao.com" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="bowen-block" class="bowen-content"> <!--特定大小-->
<iframe src="bowen.html" frameborder="1" width="100%" height="100%"></iframe>
</div>
</body>
</html>嵌入效果：（嵌入两个页面，淘宝页面和本地的页面）
4. br标签与wbr标签
<br>单标签，表示换行操作
<wbr>标签表示，软换行操作（如果单词太长，或者担心浏览器在错误的位置换行，可以使用wbr 即word break opportunity ）
5. pre标签与code标签
<pre>标签可定义欲格式化的文本，被包含在<pre>标签中的文本通常会保留空格和换行符。
<code>标签应该包含的是计算机源程序代码，表示这段文本是计算机源程序代码（<code>通常是把文本编程等宽字体）
通常这两个标签是组合使用的，用<pre>标签包含着<code>标签
6.map标签与area标签
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像，area元素永远嵌套在map元素之内，area元素可定义图像映射中的区域。
area元素的href属性定义区域的url,shape属性来定义区域的形状，coords定义热区的坐标。
给一张图片中的特定区域加上链接：
能添加的热区的形状：矩形，圆形，多边形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<img src="../picture/others/map.jpg" alt="" usemap="#star"> <!--需要设置usemap属性 -->
<map name="star"> <!--name属性-->
<area shape="circle" coords="40 40 30" href="https://www.taobao.com" alt="">
<area shape="rect" coords="50 50 150 150" href="https://www.baidu.com" alt="">
</map>
</body>
</html>在图片coords定义的区域内添加热区即可
7. embed与object
embed与object都表示能够嵌入一些多媒体，如flash动画，插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器。
现在基本浏览器都能兼容两种标签
object标签需要配合param标签进行使用
video标签与audio标签：
audio表示嵌入音频文件，video表示嵌入视频文件，默认控件是不显示，可以通过controls属性来显示控件，为了能够支持多个备选文件的兼容支持，可以配合source标签。
常用属性：
controls： 显示控件
loop： 循环播放
autoplay: 自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<audio src="#" controls></audio>
<video src="../picture/video/123.mp4" controls loop autoplay></video>
</body>
</html>如果需要定制视频以及音频的播放样式，需要借助JS
解决浏览器对音频以及视频的兼容性问题：
有的浏览器可能会对mp4以及mp3格式的多媒体文件不支持，所以需要在编写前端代码的时候，考虑到兼容性的问题，利用source标签可以解决这一问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<video controls loop autoplay>
<source src="../picture/video/123.ogv"> <!--浏览器支持某一个格式，就会播放此格式-->
<source src="../picture/video/123.mp4"> <!--备选格式-->
<source src="../picture/video/123.avi">
</video>
</body>
</html>8.文字注释与文字方向
<ruby>标签定义ruby注释（中文注音或字符），rt标签定义字符（中文主因或字符）的解释或者发音。
<bdo>标签可覆盖文本默认的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
span{
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<ruby> <!--注音-->
寒<rt>han</rt>冬
</ruby>
<!--文字方向-->
<p>
这是一个<bdo dir="rtl">段落</bdo>而已
</p>
<!--通过CSS控制文字方向-->
<p>这是一个<span>段落</span>而已</p>
</body>
</html>
效果：
9. link标签扩展学习：
link标签可以引入：引入外部的资源文件
1. stylesheet 样式文件
2. icon 在标签页上引入小图标
3. dns-prefetch DNS解析
4. script 引入JS脚本
10.meta标签扩展学习：
<meta>标签，功能性的标签，添加辅助信息，包括：编码，添加描述信息，有利于搜索引擎优化
<meta charset="UTF-8"> <!--编码信息-->
<meta name="description" content="为您提供正品低价的购物选择"> <!--网站的描述性信息-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--功能性的 针对IE浏览器，让不同版本的IE按照最高的模式进行渲染-->
<meta http-equiv="refresh" content="3" url=""> <!--表示刷新网页 三秒后跳转到url对应的网址HTML5新语义化标签
1. header : 页眉
2. footer ： 页脚
3. main ： 主体
4. hgroup ： 标题组合 (有多个标题的时候)
5. nav ： 导航
6. article: 独立的内容
7. aside : 辅助信息内容
8. section: 描述图像或者视频
9. figcaption: 描述图像或视频的标题部分
10. datalist : 选项列表
11. details / summary : 文档细节 / 文档标题
12. progress / meter : 定义进度条 / 定义度量范围
13. time : 定义日期或时间
14. mark : 带有标记的文本
header, main, footer这些标签在html文件中只能出现一次，代表着把网页区域唯一的划分为不同的区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--编码信息-->
<meta name="description" content="为您提供正品低价的购物选择"> <!--网站的描述性信息-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--功能性的 针对IE浏览器，让不同版本的IE按照最高的模式进行渲染-->
<meta http-equiv="refresh" content="" url=""> <!--表示刷新网页 三秒后跳转到url对应的网址-->
<title>标题</title>
<link rel="stylesheet" href="####.CSS">
<link rel="icon" type="/image/x-icon" href="####.ico">
<link rel="dns-prefetch" href="#">
</head>
<body>
<header> <!--头部-->
<hgroup> <!--标题-->
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav> <!--导航-->
<ul>
<li>首页</li>
<li>论坛</li>
<li>讨论</li>
</ul>
</nav>
</header>
<main> <!--主体-->
<article> <!--独立的内容-->
<section>
<figure>
<figcaption></figcaption>
<img src="#" alt="">
</figure>
</section> <!--划分区域-->
<section>
<input type="text" list="elem">
<datalist id="elem">
<option value="China"></option>
<option value="Korean"></option>
<option value="America"></option>
<option value="Japan"></option>
</datalist>
</section>
<section>
<details>
<summary>CSS</summary>
<p>层叠样式表</p>
</details>
</section>
<section>
<h2>进度条</h2>
<progress max="10" value="8"></progress>
<h2>度量</h2>
<meter value="9" max="10" low="2" high="8"></meter> <!--在low和high的范围内，度量条是绿色，超出范围，度量条变色-->
</section>
<section>
中国的<time title="10-1">国庆节</time> <!--不表现出具体的样式，只是会更加语义化一些-->
</section>
<section>
中国的<mark>国庆节</mark>
</section>
</article>
<aside></aside>
</main>
<footer></footer>
</body>
</html>
1. 表格扩展学习：
添加单线： border-collapse: collapse
隐藏空单元 : empty-cells : hide
斜线分类 ：border / rotate
列分组 : colgroup / col
例如需要对下属的表格进行扩展：
当单元格为空时，需要隐藏单元格：
从上述的表格可以看出，表格实际是双线，给表格添加单线，效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="10" cellspacing="3">
<caption>天气预报图</caption>
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">日期</th>
<!--<th>日期</th>-->
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜间</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜间</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>斜线分类，给表格添加斜线，上下具有不同的词 border/rotate，例如将表格的日期一栏斜分为两栏，需要对代码进行如下的修改：
代码修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
table .line{ /*斜线分类*/
border-top: 50px solid red; /*通过border的宽度做出斜线的方法*/
border-left: 150px solid blue;
position: relative; /*因为要对内部的<em><span>使用绝对定位，所以这里对其父容器采用relative定位*/
color: white;
}
table .line em{
position: absolute;
left: -140px;
top: -30px;
}
table .line span{
position: absolute;
left: -70px;
top: -50px;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="2" cellspacing="3">
<caption>天气预报图</caption>
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">
<div class="line"> <!--斜线分类-->
<em>日期</em>
<span>详情</span>
</div>
</th>
<!--<th>日期</th>-->
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜间</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜间</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>实际表格效果：
列分组，针对列进行操作，例如将表格中的某几列可以分为一组，采取相同的样式。
修改代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
table .line{ /*斜线分类*/
border-top: 50px solid red; /*通过border的宽度做出斜线的方法*/
border-left: 150px solid blue;
position: relative; /*因为要对内部的<em><span>使用绝对定位，所以这里对其父容器采用relative定位*/
color: white;
}
table .line em{
position: absolute;
left: -140px;
top: -30px;
}
table .line span{
position: absolute;
left: -70px;
top: -50px;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="2" cellspacing="3">
<caption>天气预报图</caption>
<colgroup>
<col span="2" style="background: yellow"> <!--头两列分为一组，设置背景颜色-->
<col span="2" style="background: red"> <!--第三第四列一组-->
</colgroup> <!--采取列分组-->
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">
<div class="line"> <!--斜线分类-->
<em>日期</em>
<span>详情</span>
</div>
</th>
<!--<th>日期</th>-->
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜间</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜间</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
表单扩展美化控件：
1. 美化的复选框：
a. 使用伪类：checked
b. 使用定位 + 透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
label input{
display: none; /*将复选框原始的样式进行隐藏*/
}
/*设置复选框默认状态下的图片*/
label div{
width: 28px;
height: 28px;
background: url("#") 0 -28px;
}
/*设置复选框选中时候的图片样式*/
label input:checked + div{ /* 改变的是input的兄弟div,用+ */
width: 28px;
height: 28px;
background: url("#") 0 0; /*更换默认的图片*/
}
</style>
</head>
<body>
<label> <!--将input和div中的内容绑定到一起-->
<input type="checkbox" class="checobox">
<div></div>
</label>
</body>
</html>2. 美化上传按钮：
与美化checkbox的思路一样，对于上传按钮也可以进行美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
label input{
display: none; /*将复选框原始的样式进行隐藏*/
}
label div{
width: 45px;
height: 45px;
}
</style>
</head>
<body>
<label> <!--将input和div中的内容绑定到一起-->
<input type="file">
<div><img src="../picture/others/upload.jpg" style="width: 45px; height: 45px"></div>
</label>
</body>
</html>上传按钮变成如下所示的样式：（电价图标即可上传）
position + opacity方法实现相同效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.upload{
width: 54px;
height: 54px;
position: relative; /*因为要对里面的容器使用绝对定位*/
}
.upload div{ /*图片的区域*/
width: 100%;
height: 100%;
}
.upload input{ /*将默认图标进行大小设置以及定位*/
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0; /*默认图标设置透明度为0， 实现隐藏*/
}
</style>
</head>
<body>
<div class="upload"> <!--定义一个父容器-->
<input type="file">
<div><img src="../picture/others/upload.jpg" style="width: 45px; height: 45px"></div>
</div>
</body>
</html>新的input控件
1. email：电子邮件, 具有邮箱格式检查功能
2. url: 网址输入框
3. number：数值输入框
4. range：滑动条
5. date / month / week: 日期控件
6. search : 搜索框
7. color: 颜色控件
8. tel：电话号码输入框
9. time：时间控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<form action="https://www.baidu.com">
<input type="email">
<input type="url">
<input type="number" min="0" max="100" value="35">
<input type="range" min="0" max="100" value="20">
<input type="date">
<input type="submit">
</form>
</body>
</html>表单扩展新属性：
autocomplete：自动完成，表示再次输入信息的时候是否进行提示之前的输入值 默认值on，设置为off
autofocus：获取焦点, 控制光标的在输入框的位置
required：不能为空
pattern：正则验证
name：和数据提交相关的
表单扩展-数据传输（前后端数据交互）
method：数据传输方式
enctype：数据传输类型
name / value：数据的键值对
扩展标签：
fieldset: 表单内元素分组
legend：为fieldset元素定义标题
optgroup：定义选项组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<fieldset>
<legend>登录</legend>
<p>
用户名：<input type="text">
</p>
<p>
密码：<input type="password">
</p>
</fieldset>
<!--下拉菜单选项分组操作-->
<select>
<optgroup label="国产"></optgroup>
<option value="">HuaWei</option>
<option value="">Xiaomi</option>
<optgroup label="非国产"></optgroup>
<option value="">Apple</option>
<option value="">Samsun</option>
</select>
</body>
</html>效果：
