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

BraveWang
191 阅读2分钟

「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」。

一，前言

上一篇，简单介绍了 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，实体名称、实体编号对照表

对照表.png

四，结尾

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

下一篇，# 第三篇 - CSS 选择器的权重和优先级；

avatar
文章
阅读
粉丝