写点什么

【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 选择器的权重和优先级;

用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【CSS 学习总结】第二篇 - HTML 扩展简介