网页的主要功能是文本展示。所以,HTML 提供了大量的文本处理标签。
它的最常见用途就是提供 CSS 的钩子,用来指定各种样式。所以在早期,下面层层包裹的 上面代码读起来很费力,因为不带有语义。后来,HTML 5 就提出了语义标签,改进了上面的代码。 小心 只要样式上需要多个块级元素组合在一起,就可以使用 hello world 上面代码就是一个简单的段落。 这是一句重要的句子。 上面代码中,句子里面需要强调的部分,就可以放在 浏览器渲染上面代码时,会分成两行, 床前明月光, 上面的代码如果不用 注意,块级元素的间隔,不要使用 第一段 第二段 上面的代码希望段落之间有两个换行,这时不应该使用 Fernstraßen 上面代码是一个很长的德语单词,为了防止不正确断行,事先用 第一个主题 第二个主题 上面代码的渲染结果是,两段之间会出现一根水平线。 该标签是历史遗留下来的,建议尽量避免使用。主题之间的分隔可以使用 上面代码中,换行和连续空格都会由于 注意,HTML 标签在 上面代码中, 开会时间是下午两点。 开会时间是下午两点。 它与 我们已经讨论过这件事情了。 虽然浏览器通常会以斜体显示 我心想,这件事是真的吗? 水分子是 H2O。 勾股定理是 a2 + b2 = c2。 一个容易写错的成语是把安分守己写成安份守己。 上面代码中, 注意, 今天特价商品: 上面代码中,“三文鱼”会有一根删除线。 天才就是 1% 的天赋和99%的汗水。 天才就是 1% 的天赋和99%的汗水。 更多资料请看维基百科。 莎士比亚的《哈姆雷特》有一句着名的台词: 跟 注意,浏览器默认会斜体显示 如果要表示多行代码, Windows 可以按下 Ctrl + Shift + Del 重启。 Windows 可以按下 Ctrl + Shift + Del 重启。 如果使用没有定义的变量,浏览器会报错:Uncaught ReferenceError: foo is not defined。 我们讨论以后决定,运行会在下周三举办。 除了标记感兴趣的文本, 注意,不要只为了高亮的效果,而使用这个标签,因为不能保证浏览器的处理方式。如果要保证高亮,还是要使用 CSS 样式。 文章正文 以上内容使用创意共享许可证。 运动会预定举行。 上面代码中, 有效年份: 有效月份: 有效日期: 无年份的日期: 年度的第几周: 有效时间: 日期和时间: 音乐会在开始。 本次马拉松比赛第一名是张三 上面代码中,选手的机读数据就放在 作者的联系方式: 该标签有几个注意点。 (1)如果是文章里提到的地址(比如提到搬家前的地址),而不是联系信息,不要使用 (2) (3) (4)通常, 注意,某些浏览器可能对该标签提供圆点下划线。 会议定于5月8日举行。 会议定于5月9日举行。 浏览器默认为 这两个标签都有以下属性。 项目比原定时间提前两周结束。 通过 TCP/IP 协议连接的全球性计算机网络,叫做 Internet。 为了脚本操作的方便,可以把术语的定义写入 通过 TCP/IP 协议连接的全球性计算机网络,叫做Internet。 上面代码中, 某些时候,术语本身是一个缩写,这时 AIDS的全称是获得性免疫缺陷综合征。 上面代码的渲染结果是, 如果想让拼音不是显示在文字上方,而是显示在文字右侧,写法如下。 大部分文字的阅读方向是从左到右,但是有些文字的方向是从右到左,比如阿拉伯语、希伯来语等。 床前明月光,霜上地是疑。 上面代码中, 床前明月光,疑是地上霜。 文章标题
文章标题
、
、
、
等)始终应该优先使用,当且仅当没有其他语义元素合适时,才可以使用
02、
标签是一个块级元素,代表文章的一个段落(paragraph)。不仅是文本,任何想以段落显示的内容,比如图片和表单项,都可以放进
元素。
03、
是一个通用目的的行内标签(即不会产生换行),不带有任何语义。它通常用作 CSS 样式的钩子,如果需要对某些行内内容指定样式,就可以把它们放置在
。
。
04、
,
让网页产生一个换行效果。该标签是单独使用的,没有闭合标签。hello
worldhello
和world
各占一行。
对于诗歌和地址的换行非常有用。
疑是地上霜。
举头望明月,
低头思故乡。
,会显示成一行。
来产生,而要使用 CSS 指定。
,而应该使用 CSS。
标签跟
很相似,表示一个可选的断行。如果一行的宽度足够,则不断行;如果宽度不够,需要断行,就在
的位置的断行。它是为了防止浏览器在一个很长的单词中间,不正确地断行或者不断行,所以事先标明可以断行的位置,主要用于欧洲一些单词很长的语言或者 URL 的断行。
告诉浏览器,可以选择在哪里断行。05、
用来在一篇文章中分隔两个不同的主题,浏览器会将其渲染为一根水平线。该标签是单独使用的,没有闭合标签。,如果想要水平线的效果,可以使用 CSS。
06、
是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
hello world
标签,而被保留下来,浏览器按照原样输出。
里面还是起作用的。
只保留空格和换行,不会保留 HTML 标签。
hello world
标签的内容会加粗显示。
07、,
是一个行内元素,表示它包含的内容具有很强的重要性,需要引起注意。浏览器会以粗体显示内容。
与
很相似,也表示它包含的内容需要引起注意,浏览器会加粗显示。它是 Boldface 的缩写。
的区别在于,由于历史原因,它没有语义,是一个纯样式的标签,违反了语义与样式分离的原则,因此不建议使用,应该优先使用
标签。
08、,
是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容。
,但无法保证一定如此,所以最好还是用 CSS 指定一下这个标签的样式。
标签与
相似,也表示与其他地方有所区别,浏览器会以斜体显示。它是 Italic 的缩写。
标签的语义不强,更接近是一个纯样式的标签,建议优先使用
标签代替它。
09、,,
标签将内容变为下标,
标签将内容变为上标。它们都是行内元素,主要用于数学公式、分子式等。
标签表示代码或数学公式的变量。
10、,
标签是一个行内元素,表示对内容提供某种注释,提醒用户这里可能有问题,基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。
提示用户这是一个拼写错误,“安份守己”的下方会有一个下划线。
会产生下划线,由于链接也默认带有下划线,所以必须非常小心使用
标签,避免用户误以为可以点击。万一确有必要使用,最好使用 CSS 改变
的默认样式。
标签是一个行内元素,为内容加上删除线。三文鱼(售完)11、
,,
是一个块级标签,表示引用他人的话。浏览器会在样式上,与正常文本区别显示。
标签有一个
cite
属性,它的值是一个网址,表示引言来源,不会显示在网页上。标签表示引言出处或者作者,浏览器默认使用斜体显示这部分内容。
-- 爱迪生不一定跟
一起使用。如果文章中提到资料来源,也可以单独使用。
是一个行内标签,也表示引用。它与
的区别,就是它不会产生换行。
活着还是死亡,这是一个问题。
一样,
也有
cite
属性,表示引言的来源网址。的内容,并且会自动添加半角的双引号。所以,引用中文内容时要小心。
12、
标签是一个行内元素,表示标签内容是计算机代码,浏览器默认会以等宽字体显示。
alert()
的作用是让网页弹出一个提示框。标签必须放在
内部。
本身仅表示一行代码。
let a = 1; console.log(a);
13、,
标签是一个行内元素,原意是用户从键盘输入的内容,现在扩展到各种输入,包括语音输入。浏览器默认以等宽字体显示标签内容。
可以嵌套,方便指定样式。
标签是一个行内元素,表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。
14、
是一个行内标签,表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景,显示该标签的内容。
很适合在引用的内容(
或
)中,标记出需要关注的句子。
床前明月光,疑是地上霜。举头望明月,低头思故乡。
还可以用于在搜索结果中,标记出匹配的关键词。
15、
是一个行内标签,浏览器会将它包含的内容,以小一号的字号显示,不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。
16、
是一个行内标签,为跟时间相关的内容提供机器可读的格式。
表示下周三的具体日期。这方便搜索引擎抓取,或者下一步的其他处理。
的
datetime
属性,用来指定机器可读的日期,可以有多种格式。
2011
2011-11
2011-11-18
11-18
2011-W47
14:54
、14:54:39
、14:54:39.929
2011-11-18T14:54:39.929
标签与
类似,也是提供机器可读的内容,但是用于非时间的场合。
标签的
value
属性。17、
标签是一个块级元素,表示某人或某个组织的联系方式。
标签。
的内容不得有非联系信息,比如发布日期。
不能嵌套,并且内部不能有标题标签(
~
),也不能有
、
、
、
、
、等标签。
会放在
里面,下面是一个例子。
18、
标签是一个行内元素,表示标签内容是一个缩写。它的
title
属性给出缩写的完整形式,或者缩写的描述。鼠标悬停在该元素上方时,title
属性值作为提示,会完整显示出来。HTML
19、,
标签是一个行内元素,表示原始文档添加(insert)的内容。
与之类似,表示删除(delete)的内容。它们通常用于展示文档的删改。
标签的内容加上删除线,为标签的内容加上下划线。
cite
:该属性的值是一个 URL,表示该网址可以解释本次删改。datetime
:表示删改发生的时间。
20、
是一个行内元素,表示标签内容是一个术语(definition),本段或本句包含它的定义。
标签的
title
属性。title
属性的一个作用是,鼠标悬浮的时候,术语的解释会以提示的形式显示出来。和
可以结合使用。
21、,
用于表示东亚文字的语音,比如汉语拼音。它默认会以小字体,显示在文字的上方。
汉字
汉字
上方有小字体的拼音。是一个行内元素,也是一个容器标签,内部还有许多配套的标签。
:标注语音符号的起始符号(默认为半角括号)和结束符号(默认为半角右括号),默认不显示。
:标注语音符号。
:划分文字单位,与语音一一对应。
:
的容器,主要作用是将语音显示在文字的右侧。
22、,
标签是一个行内元素,表示文字方向与网页主体内容的方向不一致。
标签里面的文字,会以相反的方向渲染,结果就是“床前明月光,疑是地上霜”。
的
dir
属性,指定具体的文字方向。它有两个值,ltr
表示从左到右,rtl
表示从右到左。标签用于不确定文字方向的情况。比如,网页有一个部分是用户输入的内容,但是不知道输入内容的文字方向。这种情况就可以使用
标签,告诉浏览器,不确定文字的方向,由浏览器自己决定。