[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. 通过将设置好的控件放在默认的控件下面,并将默认的控件设置为透明,即可简单粗暴的实现