本章介绍
<head>标签中的可用标签：
<title>，<meta>，<link>，<style>，<script>，<noscript>和<base>。
网页标题
语法
<title>标题内容</title>
作用
- 定义了浏览器工具栏的标题
- 定义了网页在收藏夹内的标题
- 定义了搜索引擎结果页面显示的标题
元数据
语法
<meta http-equiv/name="" content="" />
作用
指定网页的描述、关键词、文档的最后修改时间、作者等元数据；
这些元数据不显示在页面上，但会被浏览器解析。
属性
| 属性 | 描述 | 值 | 值描述 |
|---|---|---|---|
| content | 与http-equiv或name相关的信息 |
||
| http-equiv | 把content关联到HTTP头部 |
content-type expires refresh set-cookie X-UA-Compatible ... |
内容类型 过期时间 刷新/跳转时间 设定cookie IE渲染模式 ... |
| name | 把content关联到一个名称 |
author description keywords generator revised copyright viewport others |
作者 描述 关键词 文档生成器 修改时间 版权 移动端 其他 |
| charset | 规定HTML文档的字符编码 （H5属性） |
utf-8等 | 字符编码 |
案例
- 设置网页的字符编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <!-- H5的简便写法 --> <meta charset="gb2312" /> - 定义文档关键词，用于搜索引擎
<meta name="keywords" content="用逗号分隔的关键词列表" /> - 移动端页面优化
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
引用外部资源
语法
<link rel="" type="" href="" />
属性
| 属性 | 描述 | 值 |
|---|---|---|
| href | 被链接文档的位置（必需） | |
| ref | 被链接文档与当前文档的关系（必需） | stylesheet等 |
| type | 被链接文档的MIME类型 | text/css等 |
内联样式表
语法
<style type="" media="">内联样式</style>
属性
| 属性 | 描述 | 值 |
|---|---|---|
| type | 样式表的MIME类型（必需） | text/css |
| media | 样式表应用的媒体类型 | all等 |
| scoped | 样式仅应用到style元素的父元素及其子元素系 （H5属性） |
scoped |
链接的默认地址或目标
语法
<base href="" target="" />
属性
| 属性 | 描述 | 值 | 值描述 |
|---|---|---|---|
| href | 链接的默认URL | ||
| target | 链接的默认打开位置 | _blank _parent _self _top 框架名 |
在新窗口/选项卡中打开 在父框架中打开 在当前框架中打开（默认） 在整个窗口中打开 在指定的框架中打开 |
脚本
语法
<script type="">该标签可写在HTML文档中的任意位置，推荐写在</body>前</script>
<script src="">使用src属性时，此处应为空</script>
属性
| 属性 | 描述 | 值 |
|---|---|---|
| src | 外部脚本的url | |
| type | 脚本的MIME类型 （H5中非必需） |
text/javascript等 |
| charset | 外部脚本字符编码 | |
| async | 异步执行外部脚本 （H5属性，IE9-不支持） |
async |
| defer | 页面解析完成后执行外部脚本 （H5属性） |
defer |
脚本无法使用时
- 如果浏览器可识别
<script>标签但无法支持其中的脚本<noscript>脚本无法执行时的替换文本</noscript> - 如果浏览器无法识别
<script>标签<script><!-- 脚本写在这里，防止被浏览器显示在页面上 //--></script>
网友评论