HTML基础（一）-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

HTML总结

HTML知识总结

第一问：什么是HTML？

HTML超文本标记语言
“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
以下列出了 HTML head 元素：
 标签         描述
<head>    定义了文档的信息
<title>   定义了文档的标题
<base>    定义了页面链接标签的默认链接地址
<link>    定义了一个文档和外部资源之间的关系
<meta>    定义了HTML文档中的元数据
<script>  定义了客户端的脚本文件
<style>   定义了HTML文档的样式文件

<body></body>之间当然就是超文本的主题内容

第二问：URL是什么？

统一资源定位器（Uniform Resource Locator）
通过URL可以使浏览器方便地获取新的网页。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

第三问：HTML是怎么发展到今天的HTML5？

第一版是IETF为1993年制定草案，1997年W3C推荐HTML4，1999年W3C推荐HTML4.01，2014年10月W3C推荐HTML5
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准

第四问：什么是XHTML？

XHTML是可扩展超文本标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。结合了部分XML的强大功能及大多数HTML的简单特性。
This is wrong:
这是错误的：
<table WIDTH="100%">
This is correct:
这是正确的：
<table width="100%">
Attribute values must be quoted
属性值使用双引号
This is wrong:
这是错误的：
<table width=100%>
This is correct:
这是正确的：
<table width="100%">
Attribute minimization is forbidden
属性简写是不允许的
This is wrong:
这是错误的：
<input checked> <input readonly> <input disabled> <option selected> <frame noresize>
This is correct:
正确的是这样：
<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
The id attribute replaces the name attribute
用id属性来替代name属性
This is wrong:
这是错误的：
<img src="picture.gif" name="picture1" />
This is correct:
这是正确的：
<img src="picture.gif" id="picture1" />

第五问：常见的HTML实体和符号的对应关系特殊字符？

空格 &nbsp;
　
<小于号&lt;

>大于号&gt;

&和号&amp;

"引号&quot;

'撇号&apos; (IE不支持)

￠分&cent;

￡镑&pound;

￥日元&yen;

?欧元&euro;

§小节&sect;

©版权&copy;   

®注册商标&reg;

™商标&trade;

×乘号&times;

÷除号&divide;

第六问：HTML常见的标签有哪些？

参见W3C官网
http://www.w3school.com.cn/tags/tag_html.asp

第七问：常见的DOCTYPE声明有哪些？

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

第八问：HTML和和XHTML之间不同和差异

最主要的不同：
XHTML 元素必须被正确地嵌套。
        在 HTML 中，某些元素可以像这样彼此不正确地嵌套：
        <b><i>This text is bold and italic</b></i>
        在 XHTML 中，所有的元素必须像这样彼此正确地嵌套：
        <b><i>This text is bold and italic</i></b>
XHTML 元素必须被关闭。
        非空标签必须使用结束标签。
        这是错误的：
        <p>This is a paragraph
        <p>This is another paragraph
        这是正确的：
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
XHTML   标签名必须用小写字母。
        这是错误的：
        <BODY>
        <P>This is a paragraph</P>
        </BODY>
        这是正确的：
        <body>
        <p>This is a paragraph</p>
        </body>
XHTML 文档必须拥有根元素。
        所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：
        <html>
        <head> ... </head>
        <body> ... </body>
        </html>
XHTML和HTML之间的差异：
        xmlns 属性在XHTML中是必需的，但在 HTML中不是。不过，即使XHTML文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。
        xmlns是XML Namespaces的缩写，中文名称是XML（标准通用标记语言的子集）命名空间。

第九问：HTML5新增标签有哪些？如何在不兼容HTML5浏览器下替换成HTML4？

article标签定义外部的内容

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>

aside标签定义 article 以外的内容

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

audio 标签定义声音，比如音乐或其他音频流

HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

canvas 标签定义图形，比如图表和其他图像

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

command 标签定义命令按钮

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

datalist 标签定义可选数据的列表

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

embed 标签定义嵌入的内容，比如插件

<embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

figcaption 标签定义 figure 元素的标题

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

footer 标签定义 section 或 document 的页脚。

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

header 标签定义 section 或 document 的页眉

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

hgroup 标签用于对网页或区段（section）的标题进行组合

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

keygen 标签定义生成密钥

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

mark主要用来在视觉上向用户呈现那些需要突出的文字

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

meter 标签定义度量衡

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

nav 标签定义导航链接的部分

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

output 标签定义不同类型的输出，比如脚本的输出

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

progress 标签运行中的进程

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

rp 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

rt 标签定义字符（中文注音或字符）的解释或发音

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

ruby 标签定义 ruby 注释（中文注音或字符）

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

section 标签定义文档中的节（section、区段）

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

source 标签为媒介元素

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

summary 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

time 标签定义日期或时间，或者两者

<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>

video 标签定义视频，比如电影片段或其他视频流

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

第十问：什么是浏览器标准模式和怪异模式？

浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。
怪异模式（quirks mode）是网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。
在 quirks 模式和标准模式之间一个突出的不同是对 CSS IE盒模型缺陷的处理。
IE6 盒子模型中，盒子的尺寸包含了content，padding， border 和 margin 这四个部分。
而 W3C 的盒子模型中，盒子的尺寸只包含content内容区，padding，border 和 margin 被排除在盒子尺寸之外。
另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下，基于 Gecko 的浏览器将会对齐至基线，而在 quirks 模式下它们会对齐至底部。
此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管 CSS 规范要求字体样式被继承进表格。如果字号使用相对单位指定，一个标准兼容的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，一个声明了基准字号为 80% 的页面内声明表格为 80% （以保证在不正确继承字号的浏览器中有 80% 的字号）的字号将会，在一个标准兼容的浏览器里，显示具有 64% 字号的表格。结果是，浏览器在怪异模式典型的不对表格继承字号。

转载于:https://my.oschina.net/ramosyWeb/blog/489846