【CSS 学习总结】第二篇 - HTML 扩展简介

作者：Brave

2021 年 12 月 22 日
本文字数：2353 字
阅读完需：约 8 分钟

一，前言

上一篇，简单介绍了 html 标签和使用语义化的好处；

本篇，继续介绍 HTML 的文档声明、meta 元信息、HTML Entity 字符实体等 HTML 扩展内容；

二，DOCTYPE 文档声明

1，文档声明简介

文档声明能够帮助浏览器正确地显示网页;
文档声明不区分大小写，一定不能省略，否则将会发生怪异事件；
由于浏览器从上到下进行解析，所以文档声明必须放在文档的第一行；
通过文档声明指定文档类型 HTML 版本，浏览器识别到将按照对应类型对文档进行解析；
文档声明的高版本会兼容低版本，在工作中默认指定高版本即可（即 html5 文档声明）；
文档声明 VsCode 快捷键：! + shift

2，文档声明的类型

HTML5<!DOCTYPE html>
HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

复制代码

二，meta 元信息

meta 标签，提供关于 HTML 文档的元数据;
meta 元信息不会显示在页面上，但是对于机器是可读的;
meta 元信息可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务;

<!-- 声明编码 --><meta charset="UTF-8" />
<!-- 页面关键词 --><meta name="keywords" content="" />
<!-- 页面描述 --><meta name="description" content=" " />
<!-- 移动设备视口 --><meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 搜索引擎索引方式 -->all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索；nofollow：页面上的链接不可以被查询。<meta name="robots" content="index,follow" />
<!-- 网页的作者 --><meta name="author" content="author name" /> 
<!-- 优先使用 IE 最新版本和 Chrome --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />// 关于 X-UA-Compatible<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --><meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --><meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ><!-- 优先使用IE最新版本和Chrome -->
<!-- 页面重定向和刷新 --><meta http-equiv="refresh" content="0;url=" />
<!-- 禁止浏览器从本地缓存访问页面内容(无法脱机浏览) --><meta http-equiv="Pragma" content="no-cache">
<!-- 转码声明：避免网站的自动转码 --><meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 启用 WebApp 全屏模式 --><meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 隐藏状态栏/设置状态栏颜色(开启 WebApp 全屏模式下才会生效） --><!-- content的值为 default | black | black-translucent --><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 添加到主屏后的标题 --><meta name="apple-mobile-web-app-title" content="标题">
<!-- 忽略数字自动识别为电话号码 --><meta content="telephone=no" name="format-detection" />
<!-- 忽略识别邮箱 --><meta content="email=no" name="format-detection" />
<!-- 添加智能 App 广告条 Smart App Banner --><meta name="apple-itunes-app" content="app-id=myAppStoreID,   affiliate-data=myAffiliateData, app-argument=myURL">  <!-- 手持设备优化（不识别 viewport 的浏览器，如黑莓） --><meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 --><meta name="MobileOptimized"  content="320"><!-- uc 强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ 强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC 强制全屏 --><meta name="full-screen" content="yes"><!-- QQ 强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC 应用模式 --><meta name="browsermode" content="application"><!-- QQ 应用模式 --><meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no">
<!-- 浏览器内核控制  --><meta name="renderer" content="webkit|ie-comp|ie-stand">

复制代码

三，HTML Entity 字符实体

1，什么是字符实体

编写 html 时，如果需要用到 "<"、">"、"空格" 等符号，浏览器默认会将他们与标签混合处理；

为了能够输出这些符号，就需要进行转义操作：

在 HTML 中，这些字符被称为 HTML Entity，即 HTML 字符实体；
一个 HTML Entity 包含 2 种转义格式：Entity Name 和 Entity Number；

2，字符实体的作用

用于显示 HTML 的保留字符，如 <、>、&、 " 等；
用于表示难以在常规输入设备下完成输入的字符，如 ©、®、± 等；
给定的字符编码无法表达文档字符集的其他字符，如 ASCII 编码；

3，Entity Name 实体名称

格式： &entityName;
说明：以 "&" 开头，";" 结尾，以语义的形式描述字符；字符"<"，英文"less than"，取 2 个单词的首字母 &lt；

4，Entity Number 实体数字

格式： &#entityNumber;
说明：以 "&#" 开头，";" 结尾，以编号的形式描述字符；这个编号可以是十进制、十六进制等，以 "&#x" 开头的数字格式

5，实体名称、实体编号对照表

四，结尾

本篇，主要介绍 HTML 的文档声明、meta 元信息、HTML Entity 字符实体等 HTML 扩展内容；

下一篇，CSS 选择器的权重和优先级;

发布于: 7 小时前阅读数: 6

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

发布

暂无评论

创作场景