Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

一些低调的HTML标签 #83

Open
FrankKai opened this issue Jul 5, 2018 · 11 comments
Open

一些低调的HTML标签 #83

FrankKai opened this issue Jul 5, 2018 · 11 comments
Labels
HTML

Comments

@FrankKai
Copy link
Owner

FrankKai commented Jul 5, 2018 •
edited
Loading

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

  • <label>
  • <span>
  • <link>
  • <blockquote>
  • <cite>
  • <header>
  • <main>
  • 细节揭露标签 <details>
  • <section>
  • <aside>
  • <article>
@FrankKai
Copy link
Owner Author

FrankKai commented Jul 5, 2018 •
edited
Loading

<label>

<label>Click me <input type="text"></label>
<label for="username">Click me</label>
<input type="text" id="username">

@FrankKai
Copy link
Owner Author

FrankKai commented Jul 5, 2018 •
edited
Loading

<span>

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

  • 它本身没有任何意义，不代表任何东西。
  • 可通过样式对元素进行分类，通常是class属性和id属性，或者是share属性 lang。
  • 它仅可用于没有其他适用的语义标签时。
  • <span>酷似<div>标签，但是<div>是一个块级元素，而<span>是一个行内元素。

举例判断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
Copy link
Owner Author

FrankKai commented Sep 16, 2018 •
edited
Loading

<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

  • specify relationship between document and external resources
  • link to stylesheets
  • 构建网站的icon("favicon" style icons/ mobile home screen/app icons)
  • rel的意思是relationship，有很多种relationship，例如stylesheet,icon,preload,tag等等，可参考Link types。
  • sizes属性表明icon的大小
  • type属性表明资源的MIME类型，属性值为text/html，text/css等等。这个属性通常用来定义stylesheet的类型，由于css是唯一的样式表，因此可以省略。也可以与rel="preload"配合使用。
  • media属性非常有用，它会在media条件满足时加载资源
  • rel属性值为preload时，代表浏览器需要预先加载这个资源
  • as属性指明通过HTTP获取的内容类型，这对于内容优先级，请求匹配，应用正确的内容安全策略，以及正确的Accept请求头的设置，仅仅作用于rel属性为preload的时候。
  • crossorigin属性指明资源是否允许跨域请求

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的资源文件。

思考：

  • as属性与type属性的区别是什么？
    • as属性是一个更加安全的属性值。
    • type属性仅仅具有定义stylesheet类型的作用。
    • as是content type，而type是MIME type。
  • content type与MIME type的区别是什么？
    没有区别。
    MIME全称是MIME content type，只是在chrome devtool的network中，type字段不一定会显示完整的content type，它会进行一次判断，例如text/html转换为document。
    这是因为在浏览器端，我们的关注点在于document，script，svg，xhr等等这种浏览器端或者叫前端的对象，而不仅仅是HTTP层的MIME type，这些可能后端工程师更为关心。

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

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
Copy link
Owner Author

<blockquote>

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

@FrankKai
Copy link
Owner Author

<cite>

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

@FrankKai
Copy link
Owner Author

<header>

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

@FrankKai
Copy link
Owner Author

FrankKai commented Dec 16, 2018 •
edited
Loading

<main>

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

@FrankKai
Copy link
Owner Author

细节揭露标签

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
  • <summary>标签是显示的标题。
  • <details>内的text node是展开后显示的内容。

@FrankKai
Copy link
Owner Author

FrankKai commented Dec 17, 2018 •
edited
Loading

<section>

  • 每个<section>最好一个h1-h6的子标签
  • 不要把section当做像<div>一样的通用标签
  • 当<section>需要添加样式或者执行js的话，推荐用div替代
  • <section>适用于网站的一个章节一个章节的划分这样的document的大纲式布局。

@FrankKai
Copy link
Owner Author

<aside>

  • 这个标签适用于与文档的主要内容无关的内容，通常是sidebar或者弹出来的盒子。
  • aside适合用于辅助说明主内容，当做一种补充。

@FrankKai
Copy link
Owner Author

<article>

  • 适用于内容推送(post)，杂志，新闻，博客
  • 每个<article>最好有一个h1-h6的子标签
  • 当<article>有嵌套的<article>时，内部的<article>代表外部的文章，所以可以用来写评论
  • <article>内部可以有<header> <section> <footer>
  • <article>不能当做<address>的子标签。
  • <article>的出版时间可以用<time datetime="foo">指定。

@FrankKai FrankKai added the HTML label Mar 6, 2020
@FrankKai FrankKai changed the title 一些低调的HTML5标签 一些低调的HTML标签 Mar 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@FrankKai