茉莉兰亭


偏安一隅

工作两年的摸鱼佬的H5C3查缺补漏

  • ~8.89K 字
  • 次阅读

框架用多了，css写顺手了，写html只会div了（悲），css也由于公司只搞死板的WMS系统，对一些新兴的样式属性一窍不通。
原生是根啊，不能只会框架，那样人是飘在天上的。
虽说近期也有意识到这个问题，时常抱着mdn了解h5语义化与css3属性相关，但还是有些许亿点遗漏。在此记录一下各种原因了解到的一些不太熟悉的属性/标签。

前言

本文由HTML 教程整理所得，仅整理本人不熟悉的相关知识点。

HTML

css 让 html 变成了 divHtml，框架让 html 标签属性变得越来越陌生，有多少人和我一样呢（悲）

基础

HTML 标签名和属性名是大小写不敏感的，比如<title>和<TITLE>是同一个标签，onclick和onClick是同一个属性。但一般习惯使用小写。

<head>

当网页不包含<head>时，，浏览器将会自动创建一个。

它通常包含以下七个子元素：

  • meta: 设置网页元数据
  • link：连接外部样式表
  • title：设置网页标题
  • style：编辑内嵌样式表
  • script：引入网页脚本
  • noscript：当浏览器不支持脚本时显示的内容
  • base：设置网页内部相对 URL 的计算基准

<meta>

可以有多个<meta>标签，每一个代表一条元数据，约定放在<head>内容的最前面。

<base>

指定网页内部的所有相对 URL的计算基准，只能存放于<head>内，对整个网页有效，整张网页只能有一个<base>标签。
当不设置<base>标签时，默认以当前 URL 为计算基准。

<base> 有两个属性，必须要包含两者其一：

  • href: 网页的基准 url
  • target: 如何打开链接

示例：

1
2
3
<head>
    <base href="https://www.marrydream.top/test" target="_blank">
</head>

对于上面例子，若存在相对路径 ./a，将会变为绝对路径 https://www.marrydream.top/test/a，且默认使用新页签的方式打开链接。

注意：锚点也会相对于<base>计算，而不是相对当前网页的 URL。

url

URL 的各个组成部分只有使用以下字符可以直接使用，这些称为合法字符。

  • 数字、字母
  • 连词号（-）
  • 句点（.）
  • 下划线（_）

除合法字符以外，还有18个保留字符，仅能在指定位置使用，若一定要使用则需要手动将其转义。
转义的方法为，字符的十六进制 ASCII 码前面加上百分号（%）。

18个字符及其转义形式详见 HTML教程-URL字符

对于合法字符也可以手动进行转义，但不推荐，如www.apple.com也可以写成www.%61pple.com。

对于除合法字符与保留字符以外的字符，可以直接使用，理论上讲浏览器将会自动进行转义。

对于汉字，自动的转义方式为使用对应的十六进制 UTF-8编码，每两个字符一组在前方添加%。
例如：汉字梦对应的 UTF-8 编码为E6A2A6，两两转义后变为%E6%A2%A6。

锚点 anchor

使用#跟随锚点名称，放在 url 的尾部，即可直接跳转到具体的位置。
锚点名称一般为元素id的属性，如#app。

字符编码

网页中最常用的编码 UTF-8，这是 Unicode 字符集的一种表达方式。
Unicode 字符集致力于包含世界上所有的字符，而每一个字符都在字符集中有一个自己的编号，称为码点。

由于可打印形式、特殊意义字符、输入难度问题，html 无法展示所有的 Unicode 字符。
因此 html 允许使用 Unicode 码点来表示字符，浏览器将会自动转义。

码点表示方法为&#N;（十进制）或&#xN;（十六进制），其中N为码点。
例如a在 Unicode 中的码点为 97，则可以写为 &#97;。

1
2
3
<p>&#97;</p>
<!--等同于-->
<p>a</p>

由于码点并不方便记忆，HTML 将一些常用的特殊符号规定了容易记忆的名字，参考 字符的实体表示法

全局属性

全局属性可以作用于几乎所有的 HTML 标签，这里仅列举本人不熟悉的部分属性。

title

大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

tabindex

tabindex 控制用户按下tab键时，网页焦点的转移顺序，亦可以使不可获得焦点的元素拥有获得焦点的能力。

1
<div tabindex="-1">我可以获取焦点啦</div>

该属性不同的值的意义如下：

  • 负整数：该元素可以获取焦点（允许使用 js 的 focus()方法），但不参与 tab 对网页元素的遍历，通常为 -1。
  • 0：参与 tab 的遍历，顺序由浏览器指定，通常为在网页中出现的顺序。
  • 正整数：参与 tab 的遍历，且按照从小到大的顺序遍历。值相同时顺序由浏览器指定。

一般来说不需要指定该属性，或指定为 0，默认交给浏览器就好。除非要让某些无法获取焦点的元素参与遍历或允许获取焦点才需设置。

hidden

隐藏该元素，其实就是给一个 display: none 的样式。css 的可见性设置优先级高于该属性。

1
<div hidden>你看不到我</div>

contenteditable

使标签变为允许编辑的状态，有两种属性。

  • true 或空字符串：允许编辑
  • false：不允许编辑

虽然该属性不写属性值依旧有效，但它是枚举属性而非布尔属性，建议为了规范带上属性值。

data-属性

用于放置自定义数据，供 css 和 js 使用。

1
<div id="el" data-device-type="website"></div>

CSS 中使用css选择器对该属性设置样式

1
2
3
[data-device-type="website"] {
    display: none;
}

JS 中操作自定义属性，可读写

1
2
3
// 这里利用了设置id后的元素无需手动获取的新特性
const deviceType = el.dataset.deviceType; // 读
el.dataset.newAttr = "new field"; // 写

语义化结构

答应我，不要通篇 div一把梭好吗（x

为了优化代码的可读性和可维护性，在编写 HTML 时，应尽量使用对应语义的标签，使得开发者只看标签就能大致了解 HTML 的大致结构。

下面这就是一个比较直观的语义化结构。

1
2
3
4
5
6
7
8
9
10
<body>
    <header>页眉</header>
    <main>
        <article>
            <h1>标题</h1>
            <p>段落</p>
        </article>
    </main>
    <footer>页尾</footer>
</body>

<header>

表示网页或文章、区块的头部。

一个页面可以有多个<header>，可以用在多个场景，但每个具体的场景只能存在一个<header>，且<header>内不能包含其他<header>或<footer>。

表示网页或文章、区块的底部。

使用要点同<header>，内部不能包含其他<header>或<footer>。

<main>

表示页面的主体内容，一个页面只能有一个<main>。

<main>是顶层标签，不能放在其他语义化标签内。

<article>

表示页面里的一段完整内容，即使其他页面不存在也有独立意义。允许有自己的标题（<h1>到<h6>）。

适用于自包含的窗口小部件：股票行情，计算器，钟表，天气窗口小部件等。

1
2
3
4
<article>
    <h3>标题</h3>
    <p>段落</p>
</article>

一个页面允许有多个 <article>，且允许嵌套使用，但是他们必须是部分与整体的关系。

<aside>

用来放置与网页或文章主要内容间接相关的部分，或者页面的附属信息，本身表达的内容应该是与附近的内容有一定相关联的，
比如相关文章的链接、广告、友情链接等功能。

网页级别的<aside>可以放置侧边栏，但不一定就要在页面侧边。

1
2
3
4
<body>
    <main></main>
    <aside></aside>
</body>

文章级别的<aside>可以用来放置补充信息、评论或注释。

1
2
3
4
5
<p>段落</p>

<aside>
    <p>这一段是重点</p>
</aside>

<section>

表示一个含有主题的独立部分，一组相似主题的内容，一般都有一个标题。一个页面不能只有一个<section>。

下面表示了一个包含两章的文章页面。

1
2
3
4
5
6
7
8
9
10
11
<article>
    <h1>标题</h1>
    <section>
        <h2>第一章</h2>
        <p>内容</p>
    </section>
    <section>
        <h2>第二章</h2>
        <p>内容</p>
    </section>
</article>

<section>也可以包含<article>，取决于你所认为的这两个标签对当前页面的含义。

<nav>

用于放置页面或文档的导航信息。内部一般包含<ol>或<ul>这样的列表标签。

1
2
3
4
5
6
7
<nav>
    <ol>
        <li>首页</li>
        <li>分类</li>
        <li>文章</li>
    </ol>
</nav>

一般只能放入<header>内部，不建议放入<footer>内。

<h1>-<h6>

浏览器提供了6个标签用来表示文章标题，从1-6从大到小分为六级。

1
2
3
4
5
6
7
8
<article>
    <h1>HTML 语义化标签</h1>
        <h2>前言</h2>
        <h2>标签</h2>
            <h3>header</h3>
            <h3>footer</h3>
        <h2>后记</h2>
</article>

标题不应该越级，比如 <h1> 后直接接 <h3>，会失去文章的清晰结构。

<hgroup>

如果主标题含有多级标题，例如存在副标题。则使用<hgroup>来包裹多级标签。

1
2
3
4
<hgroup>
    <h1>文章列表</h1>
    <h2>拾光</h2>
</hgroup>

<hgroup>只能用于包裹<h1>-<h6>，不能包含其他标签。

<strong>

行内元素，表示很强的重要性，会被浏览器以粗体展示。

1
<p>早上记得<strong>吃药</strong>啊大郎</p>

注：<b>标签与<strong>意义相同，但它没有语义，不建议使用。

<em>

行内元素，表示强调，会被浏览器以斜体展示。

1
<p><em>请</em>你滚过来</p>

注：<i>标签与<em>意义相同，但它语义不强，不建议使用。

<cite>

表示引言出处或者作者，会被浏览器默认以斜体展示。

1
<cite>-- 茉莉</cite>

<blockquote>和<q>

表示引用他人的话，存在 cite 属性，值为网址，不会显示在网页上。

1
2
3
4
5
<blockquote cite="https://marrydream.top/">茉莉曾言道……</blockquote>
<p>
    500年前，
    <q cite="https://marrydream.top/">茉莉曾言道……</q>
</p>

其中<blockquote>为块级元素，<q>为行内元素。但<q>会默认被浏览器以斜体显示并自动添加半角双引号。

<code>

行内元素，表示计算机代码，默认被浏览器以等宽字体显示。

1
<p><code>encodeURI()</code>可以将字符串转义为合法url字符串</p>

<code>本身只表示一行代码，如果要表示多行代码，则需包裹在<pre>标签内。

1
2
3
4
5
6
<pre>
    <code>
        const str = "茉莉";
        console.log(encodeURI(str));
    </code>
</pre>

<address>

块级元素，表示某人或某个组织的联系方式。通常会被放在<footer>标签内。

1
2
3
4
5
<footer>
    <address>
        <p>邮箱：<a href="mailto:setomarry815@gamil.com">setomarry815@gamil.com</a></p>
    </address>
</footer>

内部不能存在非联系方式，也不能包含标题标签（<h1>~`

）、
、
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,