search

FrankKai / FrankKai.github.io

FE blog
https://frankkai.github.io/
363 stars 39 forks source link

一些低调的HTML标签 #83

Open FrankKai opened 6 years ago

FrankKai commented 6 years ago

这些标签，默默无闻，但是却非常好用。

FrankKai commented 6 years ago

<label>

<label>Click me <input type="text"></label>
<label for="username">Click me</label>
<input type="text" id="username">
FrankKai commented 6 years ago

<span>

HTML <span> 标签是一个可用于phrasing content的超赞的行内容器。

举例判断span使用是否正确

<p><span>Some text</span></p>

Some text属于plain text，plain text又是phrasing content的一种，span包裹它，因此span标签符合语义化。

<li>
    <span>
        <a href="portfolio.html" target="_blank">See my portfolio</a>
    </span>
</li>

a标签仅仅包含See my portfolio，它又属于plain text，plain text又是phrasing content的一种，因此a标签属于phrasing content，span标签包裹它，因此span符合标签语义化。

用于样式分组

<ul>
    <li><span class="num">1</span>:jack</li>
    <li><span class="num">2</span>:rose</li>
</ul>
.num {
    font-weight: bold;
}

注意：关于phrasing content，可以参考[译]HTML进阶之Content categories ，文章末尾也有MDN文档phrasing content的资料，主要关注哪些DOM节点属于phrasing content即可，下面的特殊情况也需要注意。 image

FrankKai commented 5 years ago

<link>

在使用vue-cli 3.0版本过程中，使用vue build App.vue后，生成的index.html中，既存在<script>标签引入js文件，又存在<link>标签引入js文件，前者司空见惯，后者却是闻所未闻，因此带着疑惑，我们开始对<link>标签进行深入学习。

<head>
    <link href=/js/app.ae39609c.js rel=preload as=script>
    <link href=/js/chunk-vendors.d56c9515.js rel=preload as=script>
</head>

<body>
    <script src=/js/chunk-vendors.d56c9515.js> </script> 
    <script src=/js/app.ae39609c.js> </script> 
</body>

<link>: The External Resource Link element

link to stylesheet

<link href="main.css" rel="stylesheet">

site's favicon

<link rel="icon" href="favicon.ico">

media属性可用做responsive website

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"

一些用于提升性能和安全性的值

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

现在我们再来看这段代码：

<link href=/js/app.ae39609c.js rel=preload as=script>
<link href=/js/chunk-vendors.d56c9515.js rel=preload as=script>

这么做时为了让浏览器预先并且安全的，加载内容类型为script的资源文件。

思考：

下面将列举目前已知的转换：

content type chrome type
text/javascript script
text/css stylesheet
image/gif gif
font/woff2 font
image/svg+xml svg+xml
application/javascript xhr

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

FrankKai commented 5 years ago

<blockquote>

全称是HTML Block Quotation Element，表示闭合的文字是一个额外的引用。

FrankKai commented 5 years ago

<cite>

全称是HTML Citation element，用于描述引用创造性的工作，必须包含标题，作者或者标题或者URL。

FrankKai commented 5 years ago

<header>

<header>常用于引导性的内容。

FrankKai commented 5 years ago

<main>

代表了body里的主要内容，与<div role="main">作用相近。 推荐写法：<main role="main">。 引申知识点：ARIA Landmarks之Main Landmark

FrankKai commented 5 years ago

细节揭露标签

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
FrankKai commented 5 years ago

<section>

FrankKai commented 5 years ago

<aside>

FrankKai commented 5 years ago

<article>