# 文章目录
# 一、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”
参考:知乎 (opens new window)
参考:阮一峰 语种名称代码 (opens new window)
相关知识点:
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"
/>
2
3
4
解读: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 深入理解 (opens new window)
# 四、语义化标签
# 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 地址