HTML+CSS宝典 HTML进阶 其它一些元素
abbr 元素
表示缩写词,“css”是一个缩写词,可以用 abbr 给包起来,abbr 通常会写一个 title 属性表示全称
<p> <abbr title="cascading style sheet">css</abbr>用于为页面添加样式的 </p>
默认样式是加列一个下边框,鼠标移入上去时候有一个提示效果
time 元素
表示的是一个时间,主要是给机器阅读的,就是给浏览器、搜索引擎看的时间
比如 浏览器读的是标准时间格式是 2019-5-1
<p> <time datetime="2019-5-1">今年5月</time> 袁老师录制了HTML 和 CSS的课程 </p>
b 元素
很古老以前,b 元素是一个无语义元素,主要用于加粗字体,b 的单词是 bold 的意思,
但是后来可以使用 css 来加粗字体,官方一度想把 b 元素弃,到了 HTML5 这个版本,给列 b 元素一个别的含义
比如有一段内容,用了区分一小段文本,这一小段文本在语音上要加重(zhong)声音读
1. 在阅读的时候会加重,有一些停顿,
2. b 元素默认样式是一个加粗的字体
<p> 我们学校里有两门课程特别受欢迎,一门是<b class="term">化学</b>一门是<b class="term">物理</b> </p>
q 元素
表示一小段引用文本
效果是自动加上一个双引号(双引号自动加了一个 before、一个 after)
<p> 最近热播的美剧《权利的游戏》中,有一句经典台词:<q>在权力的斗争中,非胜既死,没有中间状态</q> </p>
说 q 元素就要说到 blockquote 元素,它跟 q 元素差不多,他是大段的引用文本,整个段落都是引用
blockquote 元素
表示大段引用的文本
整个段落都是引用的,默认样式加了一个 margin
<blockquote cite=""> 一大段文本 </blockquote>
Ps:
q 和 blockquote 都有一个 cite 属性,表示引用连接的地址,从哪里引用过来的,
主要是给浏览器或搜索引擎看的
<br/>
该元素只有功能无语义,功能是做换行的,主要用于在文本中换行(可能还有那么一点点用)
<p> 收货地址:<br> 中国四川省<br> 成都市<br> 大熊猫街<br> 大熊猫家<br> </p>
但是不建议使用,因为没法设置样式
<hr/>
hr元素主要用于做横线分割,也是无语义的
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. <hr> Amet non rerum beatae blanditiis sunt delectus molestiae voluptas magnam alias a possimus dolores ea maiores? Vero eos cumque eaque et iusto! </p>
br、hr 这两个元素在开发的时候都不建议使用
meta 元素
该元素是用来给网页添加原数据的
<!DOCTYPE html> <html> <head> <!-- 网页的编码是 UTF-8 --> <meta charset="UTF-8"> <!-- IE浏览器渲染页面的时候使用edge内核 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 适配移动端的时候,视口是设备宽度 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 关键字列表,逗号要使用英文逗号 --> <meta name="keywords" content="在线商城,美容,微整容"> <!-- 表示网站的作者,逗号后面是邮箱,也是给搜索引擎看的 --> <meta name="author" content="远远的地方,770747402@QQ.COM"> <!-- 表示网站的描述简介 --> <meta name="description" content="表示网站的描述简介"> <title>Document</title> </head> <body> </body> </html>
link 元素
通常用于外部资源,通常用于连接CSS、还有可能连接图标、当然还有可能连接的是其它资源,就用的很少了
link 里面有两个属性
1. rel 属性,表示关系 relation,连接的资源和当前网页的关系,
什么样的关系呢?如果是css文件,作为网站的样式表 stylesheet
2. type 属性,表示连接资源的 MIME 类型,css 标准类型是 text/css
现在不写也没关系,不写浏览器根据 rel 的关系,自动确定 type 属性的值
<link rel="stylesheet" type="text/css" href="./reset.css">
有的时候,
我们会用 link 连接一个图片,通常是一图标(百度搜索"图标在线制作"),图标的后缀名是 .ico
rel 的关系是 icon
关系也可以写成 rel="shortcut icon"
MIME 类型可以写成 type="image/x-icon"
<link rel="shortcut icon" type="image/x-icon" href="./img.ico">
图标还可以不写 link 连接,把图标的文件放到网站根目录下边,然后取一个特殊的名字 favuci.ico