文章目录
- 一、URl
- 二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
- 2.1 声明英文网站
- 2.2 声明中文网站
- 三、meta
- 3.1 keyword 表示搜索关键字
- 3.2 description 网站摘要
- 3.3 Viewport 响应式声明
- 四、语义化标签
- 4.1 header 头部区域
- 4.2 footer 尾部区域
- 4.3 nav 导航区域
- 4.4 article(文章) 主内容区域
- 4.5 section(部分) 定义文档中相似的区域
- 4.6 aside 定义文章的侧边栏
- 4.7 main 主标签
- 4.8 文本控制语义化
- 4.8.1 samll
- 4.8.2 time
- 4.8.3 abbr 带有提示
- 4.8.4 sub 下标
- 4.8.5 sup上标
- 4.8.6 del 与 ins 删除线与下划线
- 4.8.7 progress 进度条
- 4.8.8 mark 马克笔 有底纹
- 4.8.9 其他语义
一、URl
可认为由4部分组成：协议、主机、端口、路径
二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
2.1 声明英文网站
<html lang="en">en即表示english 也就是你的网站是英文网站
2.2 声明中文网站
<html lang="zh-CN"> 代表：CSDN、腾讯视频、淘宝
<html lang="zh-Hans"> 中文<html lang="zh-cmn-Hans">简体中文 代表：TopBook<html lang="zh-cmn-Hant">繁体中文<html lang="en">English
描述“中文 (简体, 中国大陆)”用“zh-CN”准没错，万无一失。
规范是天，规范是地，必须用“zh-Hans-CN”
参考：知乎 参考：阮一峰 语种名称代码
相关知识点：
html charset=“utf-8” 和 lang="zh-cmn-hans"有什么区别
charset 告诉浏览器 网页的编码是 UTF-8，lang 告诉浏览器 这是一张中文网页。
三、meta
3.1 keyword 表示搜索关键字
<meta name="keyword" content="彭,彭姓,彭氏家族">3.2 description 网站摘要
<meta name="description" content="pengSir的个人网站">3.3 Viewport 响应式声明
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">解读：width=device-width表示的是设备的宽度
属性名 | 取值 | 描述 |
width | 正整数或device-width | 定义视口的宽度，单位为像素 |
height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 |
initial-scale(初始比例) | [0.0-10.0] | 定义初始缩放值 |
minimum-scale(最小尺寸) | [0.0-10.0] | 定义放大最大比例，它必须小于或等于maximum-scale设置 |
maximum-scale(最大尺寸) | [0.0-10.0] | 定义缩小最小比例，它必须大于或等于minimum-scale设置 |
user-scalable(手动缩放) | yes / no | 定义是否允许用户手动缩放页面，默认值 yes |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
此外，在安卓中还支持 target-densitydpi 这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
target-densitydpi | 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个 |
特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持，并且安卓已经决定要废弃 target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。
顺带一提：在Bootstrap4中出现了 shrink-to-fit=no 主要作用是为了兼容iOS9。
参考链接：viewport 深入理解
四、语义化标签
4.1 header 头部区域
理解为 定义一个区域的头部
4.2 footer 尾部区域
理解为 定义一个区域的尾部
4.3 nav 导航区域
导航区域
4.4 article(文章) 主内容区域
理解为一段内容区域 相当于最外层DIV
4.5 section(部分) 定义文档中相似的区域
定义文档中的区段
描述一组相似的区域的组合
4.6 aside 定义文章的侧边栏
与当前文章有关的相关资料、标签、解释等。
理解为：挂件、小部件
应用为：侧边栏、广告位等
4.7 main 主标签
一般只会出现一次
定义主要内容区域
4.8 文本控制语义化
4.8.1 samll
缩小文字，
4.8.2 time
语义化标签
4.8.3 abbr 带有提示
<abbr title="提示">这里这里</abbr>
4.8.4 sub 下标
H<sub>2</sub>o
4.8.5 sup上标
x<sup>2</sup>
4.8.6 del 与 ins 删除线与下划线
原件: <del>200元</del> 现价: <ins>100元</ins>
4.8.7 progress 进度条
<progress value="30" max='100'></progress>
4.8.8 mark 马克笔 有底纹
<mark>Pengsir</mark>
4.8.9 其他语义
strong 着重(加粗)
em 突出显示(倾斜)
cite 小段引用
blockquote 大段引用
address 地址
