Tag: Html | Sparkle的个人博客

#### script 标签有哪些属性

* async
* defer
* integrity
* src
* type
* text
* crossorigin

区别如下

![script标签属性区别](https://cdn.arc-light.fun/y04gmB/script-tag-difference.png)

如图可知，async不影响页面解析过程，但是加载完成执行过程会终止parsing；
而defer是在过程中加载，等到页面解析完成后才执行。

**要注意，async无法确定顺序，比较适合不依赖dom结构的，而defer则是顺序执行**

#### 其他的方式

1. 动态创建script标签

```javascript
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);
```

动态创建的script无论在何时执行创建，其源js均会在最后执行

script标签有几种写法

平时使用时最常见的用法：
```html
<meta charset="UTF-8" />
```

但是通过meta我们可以实现很多特别的功能。

#### meta是什么

>The <meta /> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

换句话来说，就是页面里对用户不可见，但是可供浏览器解析的页面信息。

#### meta的类型

##### http-equiv

这一类使用格式为`<meta http-equiv="参数" content="具体的描述">`

- content-Type
可以设置html的字符集和格式，但是被`<meta charset="utf-8">`取代

- X-UA-Compatible
设置浏览器渲染模式，一般采取最新的：
```html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
```

- cache-control
设置浏览器缓存，一般设置为`<meta http-equiv="cache-control" content="no-cache">`
可设置为以下属性：
	- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
	- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
	- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
	- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
	- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
    - no-siteapp: 禁止百度默认的移动端转码。
    
- expires
设置网页过期时间，超时需要重新从服务器获取。
```html
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
```

- refresh
网页将在设定的时间内，自动刷新并调向设定的网址。
```html
<meta http-equiv="refresh" content="2;URL=https://blog.sparkinglemon.me" />
```
设置为2s后自动转向到网址

- Set-Cookie
配置页面cookie

##### name
name属性的配置格式
```html
<meta name="参数" content="具体的描述" />
```

- keywords
设置页面关键词，SEO收录常用

- description
页面描述，SEO常用

- viewport
__移动端__ 设置视口。后续会在移动端适配详细补充。

- robots
告知爬虫具体需要爬取的页面，默认是all ，可以设置none，noindex（非本页），nofollow（通过本页索引其他页）

- author
页面作者，不常用

- generator
页面制作于

- copyright
页面版权信息

- revisit-after
设置爬虫重访时间


> 部分内容参考了 [Lxxyx-“HTML meta标签总结与属性使用介绍”](https://segmentfault.com/a/1190000004279791)

meta标签的使用

### 何为语义化？

> 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

做一个比较而言，Markdown导出的html结构就是符合大部分语义化的做法，即便在没有样式时，通过浏览器基础的样式和解析，整个页面仍保持构想的文档结构，能够维持较为清晰的页面结构，对我而言，就需要注意标签的使用。

### 语义化常使用的标签

##### meta信息
- title
  `title`标签指定了文档对外的标题，建议一般显示为 *窗口标题 / 历史记录 / 搜索结果标题 / ...*
- lang
  `lang`指定了内容的语言
- meta
  `meta`元素中，name决定了文档种类，content表示内容，标准情况下应包括`application-name, author, description, generator, keywords`
  
###### 链接
- link
  `link`元素必须包括rel和href属性，用来描述文档本身与其他资源的关系
- a
  `a`元素在存在href时为超链接，无href为链接占位符，可以添加rel属性使其兼容浏览器的阅读模式（如rel="prev"显示为分页器）

##### 区块
- article
  `article`标签可以用于独立的文档、页面等，可以单独发布、重用等内容
- section 
  `section`一般是按主题将内容分组，通常会有标题，但本身并非语义化的div，它通常用于将内容体现在文档等提纲中
- nav
  `nav`是一个包含导航链接等自然节，它可以帮助UA快速获得导航内容，其内部不一定使用ul，也可使用自然文本
- aside
  `aside`也是块级元素，它通常表示与周围内容关系不大密切等内容，可以用来做侧边栏等容器等
- h1-h6
  标题元素日常常用，需要注意覆盖浏览器默认样式
- header/footer
  `header`
  `footer`元素与header类似，代表最近的父级区块内容的页脚，同样不影响文档提纲

##### 内容分组
- p
  段落是主题接近的若干句子组成等文本块，如果段落没有特指，考虑使用p
- ol/ul/li
  需要注意，列表有序和无序在默认表现下不同，ol内的li可以设置value代表该列表项的序号值
- dl/dt/dd
  MDN对此元素的定义是：*一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。*
  因此最好能够使用在能够体现键值对的情况
- figure&figcaption
  `figure`元素是比较独立的，被主要引用的图片、插图、照片代码等，一般会有一个标题，即`figcaption`
- div
  最常用也是最滥用的元素，其本身无语义，可以和类名、id、title等结合，但是是最后考虑的选择。
  *尤其是涉及dom操作时，通过类名选择div需要遍历整个页面所有的div，性能上也会大量损耗*

##### 文本
- em/strong
  一般表示侧重点的强调，会因嵌套层数改变强调级别，一般渲染为斜体
- i
  可作为画外音等等杂项，建议与class、lang一同使用
- small
  不止作为小字使用，可以作为注意或声明使用
- cite
  作为引述的作品标题、文章论文等标题
- mark
  不常用，但可以作为与用户当前的行为相关的内容，如高亮显示搜索关键词

##### 嵌入内容
- img
  `img`要注意src和alt的使用，其中：
  - 有 src 且 alt 为空字符串，代表装饰用图
  - 有 src 且 alt 为非空字符串，图为文档内容的一部分
  - 有 src 且无 alt，图为内容一部分但无等价的文本内容可用