HTML查漏补缺

时间 2019-12-04

标签 html 补缺栏目 HTML 繁體版

原文原文链接

HTML规范

HTML规范文档
H4时代被规定为错误的行为，在H5时代全都被合理化了，好比标签不区分大小写、只有开始标签没有结束标签、属性值不带引号等等错误，H5所有容许它们存在

遗漏的标签知识

<title>标签定义文档的标题，它是 head 部分中惟一必需的元素
<address>标签html
- 该标签订义文档或文章的做者/拥有者的联系信息
- 不该该用于描述通信地址，除非它是联系信息的一部分
- 这个元素不能包含除了联系信息以外的任何信息，好比出版日期（这应该包含在<time>元素中）。
应该使用 <h1> - <h6> 来表示标题，使用<em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。
<base>标签web
- 该标签用于指定一个文档中包含的全部相对URL的基本URL
- 一般状况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对URL中缺乏的部分，使用 <base> 标签后，浏览器将再也不使用当前文档的 URL，而使用<base>标签中指定的基本 URL 来解析全部的相对URL，包括 <a>、<img>、<link>、<form> 标签中的 URL
- 在一个文档中，最多能使用一个 <base> 元素
- 通常把 <base> 标签排在 head 元素中第一个元素的位置，这样 head 中其余元素就能够利用 <base>元素中的信息了
<bod>标签编程
- 该标签用于覆盖当前文本的朝向，它使得字符按给定的方向排列
<button>标签与<input type="button">json
- 若是在 HTML 表单中使用 button 元素，不一样的浏览器会提交不一样的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其余浏览器将提交 value 属性的内容；因此为了不提交不一样的值，在 HTML 表单中最好使用 input 元素来建立按钮
- 使用button元素与使用 input 元素建立的按钮之间的不一样之处在于：在<button> 与 <button/>之间，能够放置内容，好比文本或图像
- 使用 input 元素来建立按钮请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其余浏览器中（包括 W3C 规范）的默认值是 "submit"。
<caption >标签浏览器
- 该标签订义表格标题，必须紧随 table 标签以后。
- 只能对每一个表格定义一个标题，一般这个标题会被居中于表格之上
<cite> 标签服务器
- 一般表示它所包含的文本对某个参考文献的引用，好比书籍或者杂志的标题
- 它可使你或者其余人从文档中自动摘录参考书目，它可以自动整理引用表格，并把它们做为脚注或者独立的文档来显示（固然须要经过写相应的程序来处理）
- 该标签体现了语义化的便利
<details>标签和<summary> 标签网络
- <summary> 标签为 details 定义标题
- 标题是可见的，用户点击标题时，会显示出 details
<meter>标签app
- 该标签订义已知范围或分数值内的标量测量，好比说表示3/10
- 注意表示进度不该该用该标签而是<process>标签
<figure> 标签与<figcaption> 标签异步
- <figure>标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但若是被删除，则不该对文档流产生影响。
- <figcaption> 标签订义 figure 元素的标题，<figcaption> 标签应该被置于figure元素的第一个或最后一个子元素的位置
<template>标签编程语言
- 该标签能够定义html片断，可是不会被渲染
- 能够经过js来将片断显示到页面上
<table>标签
- 单元格默认平分table的宽度, table决定了整个表格的宽度
- 不设置单元格宽高时，宽高由内容撑开;
- 只设置高度时，内容撑开宽度，当宽度不可再变时，将会撑开高度;
- 只设置宽度时，内容只撑开高度;
- 当宽高均设置时，内容能够只撑开表格高度，而不能撑开宽度
- table里面的单元格的宽度会转换成百分比，当单元格宽度和超过table的宽度是不会溢出的，而是会撑开高度
<link>标签
- 定义文档与外部资源的关系
- rel = stylesheet，连接外部样式表
- rel = dns-prefetch，dns预解析（异步）
- rel = prefetch，预加载图片等（异步）
- rel = prerender，预渲染（异步）
- rel = icon，定义title图标
- rel = alternate，定义文档的替代版本（好比打印页、翻译或镜像），可作RSS。
- ........见W3C

课后小验证

HTML是什么，HTML5是什么
- HTML是超文本标记语言（Hyper Text Markup Language）
- 是用来描述网页的一种标记语言，而不是编程语言；标记语言是一套标记标签
- 与XML的区别：HTML的设计宗旨是显示数据，而XML的设计宗旨是传输数据；HTML的标签是预约义的，而XML的标签是使用者本身定义的
- HTML5是最新的 HTML 标准，拥有新的元素，更丰富的内容，更强大的适配性
HTML元素标签、属性都是什么概念？
- HTML元素指的是从开始标签（start tag）到结束标签（end tag）的全部代码，开始标签与结束标签之间的内容是HTML元素的元素内容
- HTML元素标签就是指一个HTML元素的开始标签和结束标签，浏览器不会直接显示标签，可是会使用这些标签来解释页面的内容
- HTML元素属性提供了有关HTML元素的更多的信息，好比图片的URL，元素的类名等
文档类型是什么概念，起什么做用？
- Web 世界中存在许多不一样的文档。只有了解文档的类型，浏览器才能正确地显示文档。
- HTML文档中使用<!DOCTYPE>声明帮助浏览器正确地显示网页，<!DOCTYPE>声明告诉了浏览器当前的HTML文档是用什么HTML版本编写的，这样浏览器才能彻底正确地显示出 HTML 页面
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签以前，且要注意它不属于HTML标签
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，由于 HTML 4.01 基于标准通用标记语言（SGML）。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容
- HTML5 不基于 SGML，因此不须要引用 DTD
meta标签都用来作什么的？
- 提供有关页面的元信息，经常使用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
- charset属性规定文档的编码方式，建议为UTF-8
- content属性定义与 http-equiv 或 name 属性相关的元信息
- http-equiv属性把对应的 content 属性关联到 HTTP 头部。
```
* `content-type`：用于指定内容类型，默认为`text/html`
* `refresh`: 设置文档多久刷新一次
* `default-style`：指定首选的样式表
```
- name属性把对应的 content 属性关联到一个名词。
```
* `author`
* `description`
* `generator`
* `keywords`
* `viewport`：控制页面的尺寸和比例，以便响应式
```
- meta标签是可扩展的，各浏览器产商能够本身定义一些特定的内容
```
*  `http-equiv = "X-UA-Compatible" content = "IE = edge"`：为 `IE8` 指定不一样的页面渲染模式
* `name = "format-detection" content="telphone = no"`：关闭`iOS`电话号码自动识别
* `name = "renderer" content = "webkit"`：`360`浏览器指定内核
```
Web语义化是什么，是为了解决什么问题
- Web语义化简单的说就是在编写HTML文档时，选择合适的标签将内容自己进行合理的描述，而不去管它的样式，使页面有良好的结构，页面元素有含义；同时对于类名、id名称也要命名的可以描述内容；从而可以让人和机器都容易理解（提高可读性、可维护性）
- Web语义化在方便开发人员阅读代码同时也有利于让机器（搜索引擎，爬虫）读懂文档内容，从而利用机器来对索引好的内容做各类处理和挖掘，好比SEO（搜索引擎优化）
- Web语义化在抛开CSS的状况下，页面也能呈现出清晰的结构
- Web语义化能够方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以更合适的方式来渲染网页（提升无障碍性）
- Web语义化有利于SEO
连接是什么概念，对应什么标签？
- 指从一个网页指向一个目标的链接关系
- 对应<a>标签，<link>标签，<script>标签，<area>标签

表单标签都有哪些，对应着什么功能，都有哪些属性

标签	功能
form	表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息
fieldset	将表单内的相关元素分组
fieldset	为 fieldset 元素定义标题
button	表示一个可点击的按钮，能够用在表单或文档其它须要使用简单标准按钮的地方
input	用于为基于Web的表单建立交互式控件，以便接受来自用户的数据
textarea	表示一个多行纯文本编辑控件
option	用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项。<option> 能够在弹出窗口和 html 文档中的其余项目列表中表示菜单项
optgroup	会建立包含在一个 <select> 元素中的一组选项
select	是一种表单控件，可建立选项菜单。菜单内的选项为<option> , 能够由 <optgroup> 元素分组。选项能够被用户预先选择。
datalist	与input元素结合来定义选项列表，包含了一组<option>元素,这些元素表示input的合法值
meter	用来显示已知范围的标量值或者分数值
process	用来显示一项任务的完成进度
output	表示计算或用户操做的结果
label	表示用户界面中项目的标题

ol, ul, dl, dd, dt等这些标签都适合用在什么地方，举个例子
- ol为有序列表，适用于有顺序的列表，好比说排行榜
- ul为无序列表，适用于不在乎顺序的列表，好比说菜单
- dl为定义列表，dt是定义列表的标题，dd是定义列表的具体描述，好比说术语解释表
如何提高无障碍性
- 为 img 提供 alt 属性
- noscript
- input 和 label 对应
- 图形验证码与语音验证码
- 文字和背景有足够对比度
- 键盘可操做
- 语义化
JSON-LD
- JavaScript Object Notation for Linked Data
- 是一种基于JSON表示和传输互联数据（Linked Data）的方法
- 结构化数据就是按必定的结构产生的一系列描述你网站内容的信息，它能帮助搜索引擎的爬虫更好地了解你网页中所要展示的内容，并在搜索结果中有更丰富得展示，而非千篇一概的连接，即提升搜索排名，美化搜索结果。它还可以被其余一些应用所读取使用，好比：Gmail, Facebook, Twitter 等，甚至还能够是 Siri，可穿戴设备，或是车载导航系统。
- JSON-LD与互联数据(Linked Data)
- 示例
```
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "name": "John Doe",
      "jobTitle": "Graduate research assistant",
      "affiliation": "University of Dreams",
      "additionalName": "Johnny",
      "url": "http://www.example.com",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "1234 Peach Drive",
        "addressLocality": "Wonderland",
        "addressRegion": "Georgia"
      }
    }
</script>
```