元数据元素

发表于

文档标题
title 元素设置文档标题或名称。

相对 URL 解析基准
base 元素设置一个基准的 UTL，让 HTML 文档中的相对连接再次基础上进行解析。相对链接省略 URL 中的协议、主机和端口号，需要根据别的 URL 得出其完整形式。
局部属性：href、target。

用元数据说明文档
meta 元素可以用来定义文档的各种数据，一个 HTML 文档中可以包含多个 meta 元素。
局部属性：name、content、charset、http-quiv

         1. 指定名／值元数据对

1
2
3
<head>
    <meta name="author" content="Christina McQueen">
</head>

供 meta 元素使用的与定义元数据类型

元数据名称 说明
application name 当前页所属 web 应用系统的名称
author 当前页的作者名
description 当前页的说明
generator 用来生成 HMTL 的软件名称
keywords 一批以逗号分隔的字符串，用来描述页面的内容

         2. 声明字符编码

1
2
3
<head>
    <meta charset="urf-8">
</head>

         3. 模拟 HTTP 标头字段

1
2
3
<head>
    <meta http-equiv="refresh" content="5;https://christinamcqueen.github.io"/>
</head>

http-equiv 属性允许使用的值

属性值 说明
refresh 以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面，也可指定一个 URL 让浏览器载入
default-style 指定页面优先使用的样式表。对应的 content 属性值应与同一文档中某个 style 元素或 link 元素的 title 属性值相同
content-type 另一种声明 HTML 页面所用字符编码的方法。eg：<meta http-equiv="content-type" content="text/html" charset="utf-8">

定义 CSS 样式

  1. 指定样式类型：type 属性用来指定样式类型，属性值为 text/css。

  2. 指定样式作用范围：scoped 属性若存在于 style 元素中，则其中定义的样式值作用于该元素的父元素及其所有兄弟元素。反之则作用于整个 HTML 文档。

  3. 指定样式使用的媒体

                  1) 使用 style 元素的 media 属性

1
2
3
<style media="screen" type="text/css">
    ...
</style>

供 style 元素属性用的规定设备值
设备 适用设备
all 所有设备（默认值）
aural 语音合成器
braille 盲文设备
handheld 手持设备
projection 投影机
print 打印预览和打印页面
screen 计算机显示器屏幕
tty 电传打字机等等宽设备
tv 电视机

                  2) 使 style 元素的对象更加具体

1
2
3
<style media="screen AND (max-width: 500px)" type="text/css">
    ...
</style>
供 style 元素的 media 属性使用的特性
特性 说明 示例
width height 浏览器宽度和高度。单位：px width: 200px
device-width device-height 整个设备的宽度和高度（不仅仅识浏览器窗口） min-device-width: 200px
resolution 设备的像素密度。单位：dpi/dpcm max-resolution: 600dpi
orientation 设备较长边炒香。支持的值：portrait/landscape orientation:landscape
aspect-ratio device-aspect-ratio 浏览器窗口或设备的像素宽高比 min-aspect-ratio: 16/9
color monochrome 彩色或黑白设备上每个像素占用的二进制位数 min-monochrome: 2
color-index 设备所能现实的颜色数目 max-color-index: 256
scan 电视的扫描模式。支持的值：progressive/interlace scan: interlace
grid 设备的类型。网格型设备使用固定网格显示内容 grid: 0

使用脚本元素

1. script 元素

script 元素的局部属性
属性 说明
type 所引用或定义的脚本的类型，对于 JavaScript 简本这个属性可以省略
src 指定外部脚本文件的 URL
defer async 设定脚本的执行方式
charset 外部脚本所用的字符编码，该属性只能与 src 属性一同使用

defer: 所有元素解析后加载脚本文件。

1
<script defer src="path to file"></script>

async: 浏览器在继续解析 HTML 文档中其他元素的同时异步加载和执行脚本。

2. noscript 元素

适用于禁止启用 JavaScript 的场景。

1
2
3
4
5
6
<head>
    <script defer src="path to file"></script>
    <npscript>
        <h1>You can't use this page without JavaScript</h1>
    </npscript>
</head>