标签:没有 一起 res pen 智能 main name rip img
[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" >
<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. 通过将设置好的控件放在默认的控件下面,并将默认的控件设置为透明,即可简单粗暴的实现
标签:没有 一起 res pen 智能 main name rip img
原文地址:https://www.cnblogs.com/carreyBlog/p/13042846.html