HTML5学习笔记-01-html语义化标签

7/1/2020 HTML5

# 文章目录

# 一、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="彭,彭姓,彭氏家族" />
1

# 3.2 description 网站摘要

<meta name="description" content="pengSir的个人网站" />
1

# 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"
/>
1
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.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>
1

在这里插入图片描述

# 4.8.4 sub 下标

H<sub>2</sub>o
1

在这里插入图片描述

# 4.8.5 sup 上标

x<sup>2</sup>
1

在这里插入图片描述

# 4.8.6 del 与 ins 删除线与下划线

原件: <del>200元</del> 现价: <ins>100元</ins>
1

在这里插入图片描述

# 4.8.7 progress 进度条

<progress value="30" max="100"></progress>
1

在这里插入图片描述

# 4.8.8 mark 马克笔 有底纹

<mark>Pengsir</mark>
1

在这里插入图片描述

# 4.8.9 其他语义

strong 着重(加粗)
em 突出显示(倾斜)
cite 小段引用
blockquote 大段引用
address 地址

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar