关于html属性的学习笔记

参考资料

本文参考了阮一峰大大的文章 链接在上面x

1 html基本属性的简单介绍

主要包括三个

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）

以下元素没有基本属性 一般都位于文档头部 用来标识网页元素
html,head:文档和头部基本结构
title:网页标题
meta:网页元信息
script,style:网页的脚本和样式
base:网页基准信息
param:元素参数信息

语言属性

语言属性 主要用来定义元素的语言类型 包括两个属性
lang:定义元素的语言代码或编码
dir:定义文本的方向，包括ltr和rtl取值，分别表示从左向右和从右向左
以下元素不拥有语言语义属性。
frameset,frame,iframe:网页框架结构
br:换行标识
hr:结构装饰线
base:网页基准信息
param:元素参数信息
script:网页的脚本

键盘属性

键盘属性定义元素的键盘访问方法
accesskey:定义访问某元素的键盘快捷键
tabindex:定义元素的Tab键索引编号

内容属性

内容属性定义了元素包含内容的附加信息
这些信息对于元素来说有重要补充作用
避免元素本身包含信息不全而被误解共包括5个属性。
alt:定义元素的替换文本
title:定义元素的提示文本
longdesc:定义元素包含内容的大段秒数信息
cite:定义元素包含内容的引用信息
datetime:定义元素包含内容的日期和时间
title属性不能够用在下面这些元素上。
heml,head:文档的头部基本结构
title:网页标题
base,basefont:网页基准信息
meta:网页元信息
param:元素参数信息
script:网页的脚本和样式

简单举例说完后 我们知道html属性可分为
01基本属性
02语言属性
03键盘属性
04内容属性

这些属性可以导致元素有不同的行为
元素属性的写法是html标签内部的键值对
比如

<input type="text" required>

有些属性是布尔属性 属性值只是布尔值 只有是或不是两种情况
此时添加属性名就代表打开了属性
required就是布尔属性

2 html的全局属性

全局属性（global attributes）是所有元素都可以使用的属性
也就是说 它可以被加在任何一个网页元素上
不过有些元素可能没啥意义
下面是一些常见的全局元素
2.1、id

id属性是元素在网页内的唯一标识符
比如 网页可能包含多个<h2>标签 
id属性可以指定每个<h2>标签的唯一标识符
方便做一个内部导航（网页内锚点跳转）

<h2 id="p1"></h2>
<h2 id="p2"></h2>
<h2 id="p3"></h2>

上面代码中
三个<h2>标签具有不同的id属性
因此可以区分

01 id属性的值必须是全局唯一的 同一个页面不能有两个相同的id属性
02 另外id属性的值不得包含空格
03 id属性的值还可以在最前面加上# 放到 URL 中作为锚点 定位到该元素在网页内部的位置
比如 用户访问网址https://foo.com/index.html#bar的时候
浏览器会自动将页面滚动到bar的位置 让用户第一眼就看到这部分内容
2.2、class
class属性用来对网页元素进行分类
如果不同元素的class属性值相同 就表示它们是一类的

<p class="para"></p>
<p></p>
<p class="para"></p>

上面代码中，第一个<p>和第三个<p>是一类，因为它们的class属性相同

元素可以同时具有多个 class，它们之间使用空格分隔。

<p class="p1 p2 p3"></p>

上面的p元素同时具有p1、p2、p3三个 class。
2.3、title
title属性用来为元素添加附加说明
大多数浏览器中 鼠标悬浮在元素上面时 会将title属性值作为浮动提示显示出来

<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以*使用。</p>
</div>

上面代码中 title属性解释了这一块内容的目的 鼠标悬停在上面时 浏览器会显示一个浮动提示 一旦鼠标移开 提示就会消失
2.4、tabindex
网页通常使用鼠标操作
但是某些情况下 用户可能希望使用键盘（也许他鼠标坏了）
因此 浏览器允许使用 Tab 键 遍历网页元素 也就是说 只要不停按下 Tab 键 网页的焦点就会从一个元素转移到另一个元素
选定焦点元素以后 就可以进行下一步操作比如按下回车键访问某个链接 或者直接在某个输入框输入文字
这里就有一个问题 按下 Tab 键的时候 浏览器怎么知道跳到哪一个元素
HTML 提供了tabindex属性解决这个问题 它的名字的含义
就是 Tab 的顺序（index）
tabindex属性的值是一个整数 表示用户按下 Tab 键的时候 网页焦点转移的顺序 不同的属性值有不同的含义
负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法） 但不参与 Tab 键对网页元素的遍历 这个值通常是-1。
0：该元素参与 Tab 键的遍历 顺序由浏览器指定 通常是按照其在网页里面出现的位置。
正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历 如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历

<p tabindex="0">这段文字可以获得焦点。</p>

上面代码中
<p>标签的tabindex为0 意味着该元素可以获得焦点 并且也可以被 Tab 键遍历 顺序由其在源码里面的位置决定
一般来说 tabindex属性最好都设成0 按照自然顺序进行遍历 这样比较符合预期 除非网页有特殊布局
如果网页所有元素都没有设置tabindex 那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历 顺序由其在源码的位置决定
因此实际上 只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历 才有必要设置tabindex属性
2.5、accesskey
accesskey属性指定网页元素获得焦点的快捷键 该属性的值必须是单个的可打印字符 只要按下快捷键 该元素就会得到焦点

<button accesskey="s">提交</button>

上面代码中，的快捷键是s，按下快捷键，该元素就得到了焦点。
accesskey属性的字符键必须配合功能键一起按下才会生效
也就是说 快捷键是“功能键 + 字符键”的组合
不同的浏览器与不同的操作系统 功能键都不一样
比如 Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键 在 Mac 系统的快捷键是Ctrl + Alt + 字符键
accesskey如果跟操作系统或浏览器级别的快捷键有冲突就不会生效

2.6、style
style属性用来指定当前元素的 CSS 样式 具体的设置
请看 CSS 教程

<p style="color: red;">hello</p>
上面代码指定文字颜色为红色。

2.7、hidden
hidden是一个布尔属性 表示当前的网页元素不再跟页面相关 因此浏览器不会渲染这个元素所以就不会在网页中看到它

<p hidden>本句不会显示在页面上。</p>

上面代码中，这个p元素不会出现在网页上。
注意 CSS 的可见性设置 高于hidden属性 如果 CSS 设为该元素可见hidden属性将无效
2.8、lang，dir
lang属性指定网页元素使用的语言

<p lang="en">hello</p>
<p lang="zh">你好</p>

上面代码中
第一个<p>的lang属性 表示使用英语
第二个<p>的lang属性 表示使用中文。
lang属性的值，必须符合 BCP47 的标准。下面是一些常见的语言代码。
zh：中文
zh-Hans：简体中文
zh-Hant：繁体中文
en：英语
en-US：美国英语
en-GB：英国英语
es：西班牙语
fr：法语

2.9、contenteditable
HTML 网页的内容默认是用户不能编辑
contenteditable属性允许用户修改内容 它有两个可能的值
true或空字符串：内容可以编辑
false：不可以编辑

<p contenteditable="true">

鼠标点击，本句内容可修改。
上面代码中 鼠标单击句子 就可以进入编辑状态 用户可以改变句子的内容 当然 除非提交到服务器 否则刷新页面还是显示原来的内容。
该属性是枚举属性 不是布尔属性 规范的写法是最好带上属性值。

2.10、spellcheck
浏览器一般会自带拼写检查功能 编辑内容时 拼错的单词下面会显示红色的波浪线 spellcheck属性就表示 是否打开拼写检查。
它有两个可能的值。
true：打开拼写检查
false：关闭拼写检查

<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>
上面代码中，seperate下面会有提示，表示拼错了。

注意 对于那些不可编辑的元素，该属性无效
这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。
2.11、dir
dir属性表示文字的阅读方向，有三个可能的值。
ltr：从左到右阅读，比如英语。
rtl：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。
auto：浏览器根据内容的解析结果，自行决定。

本文地址：https://blog.csdn.net/weixin_45208900/article/details/107289194