HTML5标签学习笔记

最新推荐文章于 2025-06-03 20:31:30 发布

原创最新推荐文章于 2025-06-03 20:31:30 发布 · 367 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

1 篇文章

订阅专栏

声明：本学习笔记依据w3school的文档记录

HTML``标签

注释标签执行注释功能

<!--
这是一段注释内容
-->

HTML `<!DOCTYPE>` 标签

文档类型声明用于浏览器区分文档类型
必须存在在文档第一行
下面是html5的声明（不区分html的大小写）

<!DOCTYPE html>

HTML `<a>` 标签

超链接标签
属性值href用来指向地址

<a href="www.baidu.com">百度一下</a>

属性值target设置为_blank控制在新标签页打开网站

<a href="www.baidu.com" target="_blank">百度一下</a>

属性值name为文本设置锚点便于其他超链接指向设置锚点的文本

<a href="#get">跳转</a>
<a name="get">锚点</a>
<!--
点击跳转即跳转到锚点类似于到顶部去
-->

HTML `<abbr>` 标签

标记一个缩写：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<!--
文本显示为PRC was founded in 1949.
PRC一般带有下划线
鼠标悬停后会提示People's Republic of China
-->

HTML `<address>` 标签

<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article>元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

在这里插入图片描述

HTML `<area>` 标签

带有可点击区域的图像映射
简单来说就是将一个图片的某个区域打上超链接
类似于高德地图等

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在<map> 标签中。

属性：
alt：
规定在图像无法显示时的替代文本。
coords （坐标值）：
定义可点击区域（对鼠标敏感的区域）的坐标。
href （URL）：
定义此区域的目标 URL。
nohref （nohref）：
从图像映射排除某个区域。
shape （default；rect；circ；poly）：
定义区域的形状。
target （_blank；_parent；_self；_top）：
规定在何处打开 href 属性指定的目标 URL。

HTML `<article>`标签

规定独立的自包含内容
不是很理解
可能是区分于正文？
效果上看使用了此标签字号会变小

<article> 元素的潜在来源：

论坛帖子
报纸文章
博客条目
用户评论

HTML `<aside>` 标签

定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
效果上看无差别

HTML `<b>`标签

粗体文字

：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

如无必要不要使用（鸡肋）

HTML `<base>` 标签

布局在head标签中（无结束标签）
指明页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

属性：
href （URL）规定页面中所有相对链接的基准 URL。
target（_blank；_parent；_self；_top；framename）在何处打开页面中所有的链接。

HTML`<bdi>` 标签

bdi 指的是 bidi 隔离。
<bdi>标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

dir(ltr;rtl;auto)规定 <bdi> 元素内的文本的文本方向。默认值：auto。
兼容性较差不提倡使用

HTML `<bdo>` 标签

bdo 元素可覆盖默认的文本方向。
dir(ltr;rtl)规定 <bdo> 元素内的文本的文本方向

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

在这里插入图片描述

HTML `<blockquote>` 标签

定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
cite(URL):表明引用来源（无明显效果）

HTML `<body>` 标签

body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
不推荐使用其属性（应该在后面的层叠样式表（CSS）来设置）

HTML `<br>` 标签

换行标签（无结束标签）

如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear 属性，该属性有三个可选的值：left、right 或者 all，每个值都代表一个边界或两边的边界。

HTML `<button>`标签

定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
属性值：
autofocus(autofocus):
规定当页面加载时按钮应当自动地获得焦点。

disabled(disabled):
规定应该禁用该按钮。

form(form_name):
规定按钮属于一个或多个表单。

formaction(url):
覆盖 form 元素的 action 属性。

该属性与 type=“submit” 配合使用。

formenctype:
覆盖 form 元素的 enctype 属性。

该属性与 type=“submit” 配合使用。

formmethod (get;post):
覆盖 form 元素的 method 属性。

该属性与 type=“submit” 配合使用。

formnovalidate(formnovalidate):
覆盖 form 元素的 novalidate 属性。

该属性与 type=“submit” 配合使用。

formtarget(_blank;_self;_parent;_top;framename):
覆盖 form 元素的 target 属性。

该属性与 type=“submit” 配合使用。

name(button_name):
规定按钮的名称。

type(button;reset;submit):
规定按钮的类型。

value(text):
规定按钮的初始值。可由脚本进行修改。

HTML `<canvas>` 标签

定义图形，比如图表和其他图像。
只是容器还是需要脚本来绘制图形的
有元素width height来控制宽度和高度

HTML `<caption>` 标签

定义表格标题。

caption 标签必须紧随 table 标签之后。
只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

HTML `<cite>` 标签

标记引用文本
用斜体来突出文本

标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

HTML `<code>` 标签

用于表示计算机源代码或者其他机器可以阅读的文本内容。
目前只是把字体变成等宽字体

<code>
cout<<"hello world";
</code>

在这里插入图片描述

HTML `<col>`标签

为表格中一个或多个列定义属性值。

align(right;left;center;justify;char):
规定与 col 元素相关的内容的水平对齐方式。

char (character):
规定根据哪个字符来对齐与 col 元素相关的内容。

charoff (number):
规定第一个对齐字符的偏移量。

span(number):
规定 col 元素应该横跨的列数。

valign(top;middle;bottom;baseline):
定义与 col 元素相关的内容的垂直对齐方式。

width(pixels;%;relative_length):
规定 col 元素的宽度。

HTML `<colgroup>` 标签

标签用于对表格中的列进行组合，以便对其进行格式化。

align(right;left;center;justify;char):
规定与 col 元素相关的内容的水平对齐方式。

char (character):
规定根据哪个字符来对齐与 col 元素相关的内容。

charoff (number):
规定第一个对齐字符的偏移量。

span(number):
规定 col 元素应该横跨的列数。

valign(top;middle;bottom;baseline):
定义与 col 元素相关的内容的垂直对齐方式。

width(pixels;%;relative_length):
规定 col 元素的宽度。

HTML `<command>` 标签

表示用户能够调用的命令。
但只有IE9支持

HTML `<datalist>` 标签

标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<!DOCTYPE HTML>
<html>
<body>

<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
</datalist>

</body>
</html>

在这里插入图片描述

HTML `<dd>` 标签

在定义列表中定义条目的定义部分。

HTML`<del>`标签

删除线文本效果

HTML `<details>` 标签

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>这是简略信息</summary>
<p>这是详细信息1</p>
<p>这是详细信息2</p>
</details>

</body>
</html>

在这里插入图片描述

HTML `<dfn>`标签

标签可标记那些对特殊术语或短语的定义。
现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来，<dfn>还可能有助于创建文档的索引或术语表。
与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。