html，a标签，rel属性，html5新增标签属性大全

HTML是HTML5的前身，并向世界展示了Web技术的崭新纪元。 HTML5是第五个HTML标准版本，作为新时代的开端，HTML5创新性地引入了众多新属性和元素，其中就包括rel属性。rel属性用于定义链接与当前文档之间的关系，可以让我们更好地获取文档中的信息。

在此，我们将对HTML A标签的rel属性以及HTML5新增的标签属性进行全面详细地介绍。

一、HTML A标签的rel属性（链接关系）

rel属性可以告诉浏览器被链接文档和当前文档之间的关系，从而使浏览器可以适当地处理它们。例如，如果你使用rel="stylesheet"，则链接的文档将被用作样式表来为当前文档修饰。如下图所示，展示了rel属性的一些值。

1. nofollow

rel="nofollow"用于告诉搜索引擎将链接不追踪，这通常用于避免不可信的网站通过链接操纵搜索引擎排名。例如，如果你发布了一篇文章，并通过链接提供了其他似乎是垃圾邮件的网站，那么你可以使用rel="nofollow"来告诉搜索引擎这些链接不可信。

2. noreferrer

rel="noreferrer"用于告诉浏览器不要向被链接的网站告知当前网站的访问来源地址。这样可以防止网站被钓鱼攻击者获取。

3. noopener

rel="noopener"与rel="noreferrer"类似，也用于防止被链接的页面获取引用页面的地址。但是，rel="noopener"还可以防止被链接页面通过JavaScript窗口对象获得对引用页面的控制权。在新窗口中打开链接时，为了安全起见，通常建议使用rel="noopener"属性。

4. bookmark

rel="bookmark"可以标记当前页面中一个元素或锚点可以被用作书签。例如，如果你有一个带有详细信息的页面，你可以使用rel="bookmark"来标记当前页面的元素或锚点。

5. external

rel="external"可以标记当前页面的链接为外部链接，这个属性的好处就是可以帮助用户判断链接是指向外部还是内部。例如，当链接是指向本站点内页面时，浏览器会自动跳转到那个页面；而当链接指向外部网站时，则不会跳转。

6. noreferrer external

rel="noreferrer external"用于在避免被链接网站获取原网站源代码的同时，标记当前页面中的链接为外部链接。

7. author

rel="author"可以标记当前页面的作者。如果你是文章的作者，则可以使用rel="author" 来表示你是文章的作者。这样做的好处是可以帮助搜索引擎更好地了解文章中的作者信息。

二、HTML5新增标签属性大全

1. contenteditable

contenteditable属性可以将元素（例如div）设置为可编辑。这意味着用户可以在页面上直接编辑文本，而无需使用表单等元素。

2. placeholder

placeholder属性可以为表单元素（例如input）添加占位符，这些占位符可以在用户没有输入时显示。这有助于用户更好地理解输入字段的含义，并且可以提高表单的易用性。

3. autofocus

autofocus属性可以自动使某个表单元素处于焦点状态，从而在用户打开页面后就可以直接开始输入。

4. required

required属性可以为表单元素设置必填项，如果用户未在该元素中输入任何内容，表单将无法提交。

5. pattern

pattern属性可以为表单元素添加一个验证模式。例如，如果你想让用户在输入电子邮件地址时使用标准格式，就可以使用这个属性来添加验证模式。

6. min/max

min/max属性可以为表单元素（例如日期或数字）设置最小或最大值。这有助于用户更好地理解输入字段的定义，并可以有效地避免输入格式错误。

7. download

download属性可以让浏览器下载一个文件，而不是直接打开它。这个属性通常被用于下载PDF，MP3或其他类型的文件。

8. hreflang

hreflang属性可以为链接指定语言和区域设置。例如，你可以使用这个属性来告诉搜索引擎你的网站有一个法语版本。

9. media

media属性可以根据不同的设备，为元素设置不同的样式表。例如，你可以使用它来为大屏幕设备提供不同的页面排版和布局。

总结

HTML A标签的rel属性可以为链接与当前文档之间的关系提供更多的信息，增强了页面的可访问性和输入性，是Web开发中必不可少的一个属性。HTML5新增的标签属性则提供了更多的选择和思路，使得Web编程比以往更加出色。在开发Web页面时，熟练掌握这些属性，可以让页面更加易用和人性化，从而提高用户的使用体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/