标签的全局属性和字符编码

阮一峰老师的 HTML 教程
本文属于笔记性质,内容大部分出于上述教程,但会对内容进行组织,精简。
范围:三、四章节。

全局属性

属性的一些特性:

  1. 属性名和标签名一样,不区分大小写。
  2. 属性名和属性值,通过 等号 (=) 连接。
  3. 属性值可以放在单双引号之中,甚至有些属性值可以不使用引号,单强烈建议统一使用双引号。
  4. 有些属性属于布尔属性,即属性值就是一个布尔值。

在 HTML 中的属性(attribute)可以定制元素的行为,有一些属性是所有的标签都支持的,于是也称为全局属性。下面记录一些最常用的全局属性。

id

id 属性表示网页中唯一标识符,通常每个元素的 id 唯一, 但是想多个元素写 id 也不是不行,但强烈不建议。id 元素具有定位锚点的作用,在 url 中 以 #p1 形式添加在最后,页面会自动定位到该元素在网页内部的位置。

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

<!-- 强烈不推荐下面的写法 -->
<p id="p4"></p>
<p id="p5"></p>
<p id="p4"></p>

class

class 属性表示对网页元素进行分类,class 的属性值相同,那么它们属于同一类。

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

<!-- 允许一个元素具有多个 class -->
<p class="xx yy zz"></p>

title

title 属性为元素添加附加说明,当鼠标悬浮到元素上面, title 属性值可作为浮动提示。

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

tabindex

浏览器允许使用 Tab 键遍历网页, tabindex属性的作用是给定元素遍历的顺序。
它的属性值分为三类:

  • 负整数: 该元素可以使用 JS 的 focus 方法获取焦点,但不参与 Tab 键对网页的遍历,通常值为 -1
  • 0:参与 Tab 键的遍历,顺序由浏览器指定,一般最后才参与遍历。
  • 正整数:网页元素按照从小到大的顺序参与遍历,如果多个元素的 tabindex 属性值相同,则按照网页源码中出现的顺序进行遍历。
    在这里插入图片描述

accesskey

accesskey 属性指定网页获得焦点的快捷键,属性值是单个可打印的字符,但需要配合功能键才能生效。比如 Chrome 浏览器,在 Windows 和 Linux 系统的快捷键是 Alt + 字符键,在 Ctrl + Alt + 字符键

如果和操作系统或者浏览器级别的快捷键有冲突,则不生效,该属性用的比较少。

<!-- Chrome  Windows 按 Alt 和 s 触发。 -->

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

style

class 属性表示对网页元素进行分类,class 的属性值相同,那么它们属于同一类。

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

<!-- 允许一个元素具有多个 class -->
<p class="xx yy zz"></p>

hidden

hidden 属性是一个布尔属性,表示当前元素不再跟页面相关,浏览器不会渲染这个元素。

设置 hidden 属性,其实是设置了display: none,因此可以使用 CSS 进行覆盖。

<p hidden>本局不会出现在页面上</p>

在这里插入图片描述

lang, dir

  • lang
    lang 属性指定网页元素所使用的语言

    <!-- 一般这样使用 -->
    <html lang="en"></html>
    
    <!-- 单元素使用 -->
    <p lang="en">hello</p>
    <p lang="zh">你好</p>
    

    lang 的属性值, 必须符合 BCP47 标准,常用的一些语言代码有:

    代码含义代码含义
    zh中文zh-Hans简体中文
    zh-Hant繁体中文en英语
    en-US美国英语en-GB英国英语
  • dir
    dir 属性表示文字的阅读方向,有三种属性值。 - ltr:从左往右阅读, 如 英语。 - rtl: 从右往左阅读,如 阿拉伯语。 - auto: 浏览器根据内容解析,自行决定。

contenteditable

网页的内容默认是用户不能编辑的,contenteditable 属性允许用户修改内容。

它有两种属性值:

  • true或空字符串:内容可以编辑。
  • false:内容不可编辑。

注意这个属性属于枚举属性,而不是布尔属性,最好带上属性值。

<p contenteditable="true">
  鼠标点击内容块,本句内容可修改。
</p>

在这里插入图片描述

spellcheck、其他

  • spellcheck

    spellcheck属性表示是否打开浏览器自带的拼写检查功能,如果开启并且编辑内容时单词出错,则会有红色波浪线。这个属性基本没用了。,和 contenteditable属性一样它具有两个属性值 truefalse

  • 事件处理属性

    除去上面的属性,还有事件处理属性(event handle),用于响应用户的动作。不过目前,大多数情况下,都是在 JavaScript 文件里面进行事件的监听处理,很少直接在 HTML 代码中混入 JS 代码。

    onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

字符编码

浏览器必须指定文字的编码方式,才能够正确的把文字还原处理,目前网页中广泛使用的是 UTF-8 编码。

一般情况,服务器向浏览器发送 HTML 文件时,通过 HTTP 头信息,申明网页的编码方法。

Content-Type: text/html; charset=UTF-8

网页的内部会使用 meta 标签,声明网页的编码。

<meta charset="UTF-8" />

UTF-8 是 Unicode 字符集的一种表达方式, Unicode 字符集的目标是包含世界上的所有字符。

Unicode 在 HTML 中的四个问题:

  1. 有些字符没有打印形式。
  2. 小于号(<)和 大于号(>)用于定义 HTML 标签,不能直接使用。
  3. Unicode 字符太多,没有一种键盘可以输入所有字符。
  4. 网页不允许混用多种编码。

HTML 为了解决这些问题,允许使用 Unicode 码点来表示字符,由浏览器自动将码点转化成对应的字符。码点的表示可以由十进制(不常用)或者十六进制(常用)来表示。

<p>hello</p>
<!-- 等价 -->
<p>&#104;&#101;&#108;&#108;&#111;</p>
<!-- 等价 -->
<p>&#x68;&#x65;&#x6c;&#x6c;&#x6f;</p>

同时,因为直接使用码点(也即数字表示法)过于麻烦,难以记忆,所以为了能够快速输入,HTML 专门为一些特殊字符,规定了一些容易记忆的名字,称为实体表示法(entity),全部的字符实体

比较常用的一些字符实体:

字符实体字符实体
<&lt;>&gt;
"&quot;'&apos;
&&amp;©&copy;
#&num;@&commat;
^&Hat;空格&nbsp;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值