结构化标记:可用来描述标题和段落的元素。
语义化标记:表达特定含义的标记。
标题
通常用于强调一篇文章。
html中有的标题有6个级别。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >标题</ title > </ head > < body > < h1 >这是1级标题</ h1 > < h2 >这是1级标题</ h2 > < h3 >这是1级标题</ h3 > < h4 >这是1级标题</ h4 > < h5 >这是1级标题</ h5 > < h6 >这是1级标题</ h6 > </ body > </ html > |
段落
在html中用<p></p>元素表示段落。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >段落</ title > </ head > < body > < p >这是段落</ p > < p >这也是段落</ p > </ body > </ html > |
粗体和斜体
在html中用<b></b>元素表示粗体,用<i></i>表示斜体。
示例
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >粗体和斜体</ title > </ head > < body > < p >这是一段话,其中有部分是< b >粗体</ b >,有部分是< i >斜体</ i >。</ p > </ body > </ html > |
粗体和斜体是结构化标记。
上标和下标
在html中用<sup></sup>元素表示上标,用<sub></sub>下标。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >上标和下标</ title > </ head > < body > < p >今天气温是23< sup >o</ sup ></ p > < p >二氧化碳这样表示CO< sub >2</ sub ></ p > </ body > </ html > |
上标和下标是结构化标记。
空白
空白可以增强代码的可读性。
当浏览器遇到两个或两个以上的连续空格时,只将其显示为一个空格。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >空白</ title > </ head > < body > < p >这是一段 佳 话:学 好编程,就能改 变世界!</ p > </ body > </ html > |
显示效果如下
换行符
在html中用<br>元素表示换行符。换行符只有开始标签,没有结束标签。
示例
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >换行符</ title > </ head > < body > < p >人所缺乏的不是才干而是志向,< br >不是成功的能力而是勤劳的意志。</ p > </ body > </ html > |
水平线
水平线通常用来在不同的主题间进行切换。或用于增强视觉效果。
示例
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >水平线</ title > </ head > < body > < p >人所缺乏的不是才干而是志向,< br >不是成功的能力而是勤劳的意志。</ p > < hr > < p >你知道吗?上面有条水平线呢</ p > </ body > </ html > |
强调和加粗
在html中用<strong></strong>元素表示强调,表示其中的内容十分重要,以粗体显示。
在html中用<em></em>元素表示强调,强度比<strong>低点,以斜体显示。
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >强调和加粗</ title > </ head > < body > < p >两部门:推进住房租赁资产证券化< strong >盘活存量资产</ strong ></ p > < p >善林金融非法吸资< em >600</ em >亿8人被捕</ p > </ body > </ html > |
块引用和短引用
在html中用<blockquote></blockquote>元素表示块引用,块引用可以包括多个段落,以缩进的形式显示。
在html中用<q></q>元素表示短引用。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >块引用和短引用</ title > </ head > < body > < blockquote > < p >这部分将是块引用,它可以包括段落。</ p > < p >这是块引用的第二个段落。</ p > </ blockquote > < p >这部分是短引用。鲁迅说,< q >世上本没有程序员,写代码的人多了,于是就有了程序员。</ q ></ p > </ body > </ html > |
缩写词
在HTML5中缩写词和首字母缩写词都使用<abbr></abbr>元素表示。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >缩写词</ title > </ head > < body > <!-- 缩写词和首字母缩写词都使用abbr --> < p >< abbr >ERP</ abbr > Enterprise Resource Planning</ p > </ body > </ html > |
引文
引文用于引用一部书籍或电影,在html中用<cite></cite>元素表示引文,在浏览器中以斜体显示。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >引文</ title > </ head > < body > <!-- 引文用于引用一部书籍或电影 --> < p >最近你看了古天乐主演的 < cite >杀破狼.贪狼</ cite > 么</ p > </ body > </ html > |
定义
定义用于解释一些术语。
在html中用<dfn></dfn>元素表示定义。
示例
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >定义</ title > </ head > < body > <!-- 定义,解释一些术语 --> < p >面向对象< dfn ></ dfn >(Object Oriented,OO)是软件开发方法</ p > </ body > </ html > |
地址
在html中用<address></dfnaddress元素表示地址,在浏览器中以斜体显示。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >地址</ title > </ head > < body > <!-- 定义,解释一些术语 --> < p >上海宋庆龄故居位于</ p > < address > < p >上海市淮海中路1843号</ p > </ address > </ body > </ html > |
内容修改元素
在html中用<ins></ins元素表示插入的内容,在浏览器中有下划线。
在html中用<del></del元素表示删除的内容,在浏览器中有删除线显示。
在html中用<s></s元素表示不确定的内容,在浏览器中以中间穿一条线显示。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "UTF-8" > < title >内容修改元素</ title > </ head > < body > <!-- 内容修改元素有ins del s --> < p >ins 表示插入的内容。< ins >插图</ ins ></ p > < p >del 表示删除的内容。< del >注意,这是删除的内容</ del >></ p > < p >s 表示不确定的内容。< s >这是不确定的内容</ s >></ p > </ body > </ html > |