HTML基础

HTML文档基本结构

由<html>包裹，HTML所有信息必须包含在<html>标签中。
<head>为头部区域，包含所有文档元信息。
<body>为主体区域，包含传递信息和网页显示内容。

HTML

<html>
	<head>
	    <title>test title</title>
	</head>
	<body>test body</body>
</html>

HTML文档主要内容

文本
超链接
图片

HTML元素规范

绝大部分的元素都是有起始标签和结束标签的

html

<tag></tag>

起始标签和结束标签之间包含的是元素主体

html

<tag>元素主体</tag>

起始标签包含元素的名称以及可选属性，属性名称和属性值通过等号进行连接，属性与属性之间通过空格连接。

html

<tag a1="v1" a2="v2" a3="v3">元素主体</tag>

绝大部分标签都是成对出现的，但也有标签不是成对的，这些称为空标签。

html

<tag a1="v1" a2="v2" a3="v3"/>

HTML注释

html

<!-- 单行注释-->

或

<!---------------
多行注释
多行注释
多行注释
----------------->

XHTML文档基本结构

XHTML是html4的升级版本，XHTML是根据xml语法简化而来，因此它遵循xml文档规范，必须在文档根元素中使用xmlns属性声明文档的命名空间，独立标签需要关闭。

HTML5文档基本结构

HTML5文档省略了<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型，其目标是为了创建更简单的web程序，书写出更简洁的HTML代码。

在html5中，不需要刻意对版本进行声明。在html5中，文档类型的声明如下：

html

<!-- html5文档类型声明-->
<!DOCTYPE html>
<!-- html4文档类型声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在htm5中，定义字符编码的方式也简化了，只需要如下：

html

<!-- html5字符编码声明-->
<mete charset="UTF-8">
<!-- html4字符编码声明-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5元素标记省略

在html5中，元素的标记可以省略。可以省略的标签具体分为3类：

不允许写结束标记：area、base、br、col、command、embed、hr、img、input、keygen、link、mete、param、source、track、wbr
可以省略结束标记：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
开始标记和结束标记全部都可以省略：html、head、body、colgroup、tbody

不允许写结束标记是指，只允许使用<元素/>形式书写。
开始标记和结束标记全部都可以省略是指，该元素可以完全省略，即使被省略了，该元素仍以隐藏的方式存在，在文档结构中可以访问到。

HTML5中的布尔值

对于boolean值的属性，如disabled和readonle。

只写属性而不指定属性值时，为true

html

<input type="checkbox" checked>

不写该属性时，为false

html

<input type="checkbox">

属性值为属性名时，为true

html

<input type="checkbox" checked="checked">

属性值为空字符串时，为true

html

<input type="checkbox" checked="">

简单一句话，只有没写这个属性的时候为false，其他情况都为true。

HTML4元素

元素分类

HTML4共包含91个元素，这些元素用于对特定内容、结构、特性进行定义，可以分为3大类，分别是：

结构元素：定义结构。
内容元素：定义内容。
修饰元素：定义内容样式。

也可分为：

块级元素（Block-level elements）：块级元素通常在页面上以块的形式显示，它们会在页面中创建一个块状的区域，独占一行或一块空间。一些常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等。
内联元素（Inline elements）:内联元素通常在页面上以行内的形式显示，它们只会占据其内容的宽度，不会独占一行。一些常见的内联元素包括 <span>、<a>、<strong>、<em>、<img>、<br> 等。
空元素（Void elements）:空元素是指没有内容的元素，它们在 HTML 中没有结束标签。常见的空元素包括 <img>、<br>、<hr>、<input> 等。这些元素一般用于插入图像、换行、水平分割线和用户输入等。 ^e56950
文本级元素（Text-level elements）:文本级元素用于在文本中对文本进行样式或操作。这些元素通常是内联元素，包括 <a>、<span>、<strong>、<em>、<abbr>、<cite>、<code> 等。这些元素用于对文本进行语义标记和样式设置。

块级元素用于创建页面的结构。
内联元素则用于内部文本的样式和语义标记。
空元素通常用于插入特定的内容。
文本级元素则用于对文本进行标记和样式设置。

结构元素

结构元素用于构建网页文档的结构，多指块状元素，以下是一些常用元素：

div：在文档中定义一块区域，相当于一个容器、包含框。
span：在文本行中定义一个区域，相当于行内包含框。
ol（Ordered List）：定义一个有排列顺序的列表，顺序号默认以数字显示，可以通过css定义顺序号为字母。

html

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

ul（Unordered List）：定义一个没有排序的列表，有圆点表示每一项。

html

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

li（List）：列表的每一行
dl（Description List）：定义描述性列表
dt（Description Term）：dl中定义列表的词条。
dd（Description Definition）：dl中对定义的词条进行解释。

html

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>

    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages</dd>
</dl>

del（delete）：定义删除的文本。通常使用删除线标记文本。

html

<del>这部分文本已被删除，查看更改日志了解详情。</del>

ins（insert）：定义插入的文本，通常使用下划线标记文本。

html

<ins>其中的一些内容已被添加</ins>

h1~h6：标题1到标题6，定义不同级别的标题。

html

<h1>主标题</h1>
<h2>次级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
<h5>第五级标题</h5>
<h6>最低级标题</h6>

p：定义段落结构。

html

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

hr（Horizontal Rule）：定义水平线。

html

<p>这是第一段文本。</p>
<hr>
<p>这是第二段文本，位于水平线下方。</p>

内容元素

内容元素定义了元素在文档中表示内容的语义，一般指文本格式化元素，他们多是行内元素。

a：定义超链接

html

<a href="https://www.baidu.com">访问百度</a>

abbr：定义缩写词，并提供缩写词的完整解释。鼠标移到其上方时，显示完整解释。

html

<abbr title="完整解释">缩写</abbr>

acronym：定义取首字母的缩写词。html4中引入，html5中废弃，推荐使用abbr。

html

<abbr title="World Health Organization">WHO</abbr>

address：定义地址。
dfn：定义条目，对专用名称进行标记。在浏览器中，通常以斜体显示。

html

<p>The <dfn>HTML</dfn> specification is maintained by the W3C.</p>

kbd：定义键盘键。浏览器通常以等宽字体显示按键。

html

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the selected text.</p>

samp：定义样本，一般用于表示计算及程序的示例输出。浏览器通常以等宽字体显示按键。

html

<p>The output of the command is: <samp>Hello, World!</samp></p>

var：定义变量。浏览器通常以斜体显示var的内容。

html

<p>The variable <var>x</var> represents the value.</p>

tt：定义打印机字体，这是 HTML 中的一个旧的、废弃的元素，浏览器通常使用等宽字体文本表示它，通常用于模拟电传打字机或计算机终端上的文本显示。

html

<tt>This is teletype text.</tt>

code：定义计算机源代码。
pre：定义预定义格式文本，保留源代码格式。

java

<pre>
    <code>
    function sayHello() {
      console.log('Hello, World!');
    }
    </code>
</pre>

blockquote：定义大块内容引用。
cite：定义引文。

html

<blockquote>
    <p>This is a quoted text from another source.</p>
    <footer>
        <cite>Author Name, Title of the Book</cite>
    </footer>
</blockquote>

q：定义引用短语，通常浏览器会在引用文本周围添加引号，以突出显示。

html

<p>The author said: <q>This is a short quote.</q></p>

strong：定义重要文本，浏览器通常会以粗体显示文本。

html

<p>This text is <strong>strongly emphasized</strong>.</p>

em：定义文本为重要，浏览器通常会以斜体显示文本。

html

<p>This is <em>emphasized</em> text.</p>

修饰元素

修饰元素定义了文本的显示效果。

b（bold）：定义粗体文本
i（italic）：定义斜体文本
big：用于表示文本的相对较大的字号，HTML 中的一个旧的、废弃的元素，推荐使用 CSS 来处理样式和布局。
small：表示文本的相对较小的字号。
sup（superscript）： HTML 中的一个内联元素，用于表示文本中的上标。
sub（subscript）：HTML 中的一个内联元素，用于表示文本中的下标。
bdo（Bidirectional Override）：定义文本的显示方向，其有一个属性dir，是一个块级元素。
br：定义换行。它是唯一一个不需要闭合标签的元素，因为它没有内容。

html

<p>粗体：<b>字</b></p>
<p>斜体：<i>字</i></p>
<p>大字：<big>字</big></p>
<p>小字：<small>字</small></p>
<p>This is an example of H<sub>2</sub>O.</p>
<p>The event took place on July 4<sup>th</sup>, 1776.</p>
<p>This is some <bdo dir="rtl">RTL text</bdo> and some <bdo dir="ltr">LTR text</bdo>.</p>
<p>This is the first line.<br>This is the second line.</p>

以下废除元素的效果，推荐使用css实现：

center：定义文本居中。
font：定义文字的样式、大小和颜色。
u：定义文本下划线。
s：定义删除线，strike的缩写。
strike：定义删除线。

html

<center>This text is centered.</center>
<font face="Arial" color="blue" size="4">This is styled text.</font>
<p>This is some <u>underlined</u> text.</p>
<p>This is some <s>deleted</s> text.</p>
<p>This is some <strike>struck-through</strike> text.</p>

HTML4属性

HTML4元素包含的属性有很多，可以分为核心属性、语言属性、键盘属性、内容属性和延伸属性等类型。

核心属性

核心属性大部分元素都有，一些文档头部区域的元素没有。

class：定义类规则或样式规则。
id：定义元素的唯一标识。
style：定义元素的样式声明。

语言属性

语言属性主要用于定义元素的语言类型

lang：定义元素的语言代码或编码
dir：定义文本方向，包括ltr和rtl取值。
- lrt：从左到右
- rtl：从右到左

键盘属性

键盘属性定义键盘访问元素的方法

accesskey：定义访问某元素的键盘快捷键。如在a标签下，可实现通过快捷键实现浏览器跳转。

html

<a href="https://www.baidu.com" accesskey="E">chrome 浏览器按alt+shift+E 跳转到 www.baidu.com</a>

tabindex：定义元素的Tab键索引编号。

html

<input type="text" tabindex="1">
<input type="text" tabindex="3">
<input type="text" tabindex="2">
<input type="text" tabindex="0">

内容属性

内容属性定义元素包含内容的附加信息，对元素的内容起到补充作用。

alt：定义元素的替换文本。

html

<img src="https://www.baidu1.com/img/flexible/logo/pc/result.png" alt="百度一下">

title：定于元素的提示文本。

html

<a href="https://www.baidu.com" title="Visit Example.com">Link to Example.com</a>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="A beautiful landscape" title="Scenic View">
<input type="text" title="Enter your username">

longdesc：定义元素包含内容的大段描述信息，在html5中已被弃用。
cite：定义元素包含内容的引用信息。
datetime：定义元素包含内容的日期和时间。

其他属性

比较常用的其他属性有这些：

rel（relationship）：定义当前页面与其他页面的关系。可以取这些值：
- stylesheet：指示链接是一个样式表。
- icon：指示链接是一个图标。
- next：指示链接指向下一个文档。
- prev：指示链接指向前一个文档。
- alternate：指示链接指向一个备用版本的文档。
rev（reverse）：定义其他页面与当前页面之间的链接关系，在HTML5中已被弃用。

HTML5元素

HTML5在html5基础上新增了很多新的元素，可以分为以下几种类型：

结构元素
功能元素
表单元素

语义化结构元素

header：表示页面中一个内容区块或或整个页面的标题，一般用于定义页眉。
footer：表示整个页面或页面中一个内容区块的脚注，一般用于定义页脚。
section：表示页面中的一个内容区块。
article：表示页面中的一块与上下文不相干的独立内容。
aside：表示article元素的内容之外的，与article元素的内容相关的辅助信息。
nav：表示页面中导航链接。
main：表示网页中的主要内容。
figure：表示一段独立的流内容。

功能元素

hgroup：用于对整个页面或页面中的一个内容区块的标题进行组合。在html5中已被废弃。
video：定义视频，比如电影片段或其他视频流。

html

<video width="640" height="360" controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

audio：定义音频，比如音乐或其他音频流。

html

<audio controls>
  <source src="example.mp3" type="audio/mp3">
  <source src="example.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

<audio>标签会按顺序处理其包含的<source>标签。当浏览器遇到 <audio>标签时，它会依次检查每个<source>标签，寻找其支持的音频格式。一旦找到第一个支持的格式，浏览器就会使用该源播放音频，忽略后续的<source>标签。具体步骤如下：
浏览器解析<audio>标签。
浏览器检查第一个<source>标签，看它是否支持指定的音频格式。
如果浏览器支持该格式，则使用该源播放音频，并忽略后续的<source>标签。
如果浏览器不支持该格式，则继续检查下一个<source>标签。
重复步骤 2-4，直到找到一个支持的格式或遍历完所有的<source>标签。
如果没有找到任何支持的格式，浏览器会显示<audio>标签内的备用文本（如 "Your browser does not support the audio tag."）。这种处理方式确保了音频在尽可能多的浏览器中都能正常播放，增强了网页的兼容性。

embed：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等，推荐使用更具语义化的video和audio元素。
mark：主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字，浏览器默认使用黄色背景色标记。
dialog：定义对话框或窗口。
bdi（Bidirectional Isolation）：定义文本的文本方向，使元素内容脱离其周围文本的方向设置。
figcaption：定义figure元素的标题。
time：表示日期或事件，也可以同时表示两者。是一个语义化的元素。使用time标记事件，让机器更好地识别。
canvas：表示图形，如图标和其他图像。这个元素提供一块画布和一个绘图API展现给客户端JavaScript。
output：表示不同类型的输出，一般用于显示表单的输出内容。
source：为媒介元素如video和audio定义媒介资源。
menu：表示菜单列表，一个语义化的元素。
ruby：用于表示一段文本的注音（ruby text），通常用于显示汉字的拼音或其他字符的注音，通常与rt、rp元素一起使用。
rt：用于表示字符的解释或发音。
rp：定义不支持ruby元素的浏览器所显示的内容。
wbr：表示软换行。

wbr与br的区别是，br必须换行，wbr会根据浏览器的宽度换行，如果宽度足够则不需要换行，宽度不够则进行换行。

command：表示命令按钮，如单选按钮、复选框或按钮。在html5中被弃用。
details：用于创建一个折叠的部分，当页面加载时，details元素的内容是折叠的。
summary：通常与details一起使用，是details的第一个元素。是details折叠时显示的内容。

html

<details>
    <summary>Click to expand</summary>
    <p>This is the hidden content that can be expanded or collapsed.</p>
</details>

datalist：datalist元素用于表示可选数据的列表，通常与input元素配合使用，用于制作输入值的下拉列表。

html

<label for="fruit">Choose a fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">

<datalist id="fruits">
    <option value="Apple">
    <option value="Banana">
    <option value="Cherry">
    <option value="Date">
    <option value="Grape">
</datalist>

datagrid：表示可选数据的列表，以树形列表的形式来显示。
keygen：表示生成密钥，存在安全问题，已被弃用。
progress：表示运行中的进程，一般用于表示任务的完成进度。它通常用于展示文件上传、下载、任务执行等过程中的进度。

html

<progress id="progress" max="100" value="10"></progress>

meter：表示已知范围内的标量测量或分数。它可以用于表示进度、百分比、温度、音量等的测量值。
track：用于添加外部文本轨道（如字幕或章节）到媒体元素的元素。主要用于 <audio> 和 <video> 元素，以提供对应的文本信息，如字幕、翻译、描述等。

表单元素

HTML5为input元素的type属性增加了很多类型。

tel：表示必须输入电话号码的文本框。
search：表示搜索文本框。
url：表示必须输入URL地址的文本框。
email：表示必须输入电子邮件地址的文本框。
datetime：表示日期和时间的文本框
date：表示日期的文本框
month：表示月份文本框
week：表示周几文本框
time：表示时间文本框
datetime-local：表示本地日期和时间文本框。
number：表示必须避暑输入数字的文本框。
range：表示范围文本框。
color：表示颜色文本框

html

<input type="tel" title="tel" />
<input type="search" title="search"/>
<input type="url" title="url"/>
<input type="email" title="email"/>
<input type="datetime" title="datetime"/>
<input type="date" title="date"/>
<input type="month" title="month"/>
<input type="week" title="week"/>
<input type="time" title="time"/>
<input type="datetime-local" title="datetime-local"/>
<input type="number" title="number"/>
<input type="range" title="range"/>
<input type="color" title="color"/>

HTML5属性

HTML5增加和废除了很多属性，以下是一些常用的属性。

表单属性

autofocus：它以指定属性的方式让元素在画面打开时自动获得焦点。适用于元素input(typt=text)、select、textarea、button。
placeholder：它会以背景文字的形式提示用户可以输入的内容。适用于元素inpute(type=text)和textarea。
form：声明元素属于哪个表单，声明后元素可以放置在页面任何位置，而不是表单值内。适用于元素input、output、select、textarea、button、fieldset。
required：表示在用户提交时检查元素，要求元素必须有内容。适用于元素input(type=text)、textarea。
list：用于指定输入框绑定哪一个datelist元素，指定datelist的id，用于提示用户输入内容。
autocomplete：启用表单的自动完成功能，可以从历史记录里面自动填错表单内容，一般与datalist元素配合使用。
min：最小值
max：最大值
multiple：允许上传文件时一次上传多个文件
pattern：内容的正则表达式
step：表示数值的增减步长
novalidate：取消表单提交时进行的有关检查。
disabled：可以把子元素设置为disabled（无效）状态，适用于fieldset元素。
formaction：重载form元素的action属性。
formenctype：重载form元素的enctype属性。
formmethod：重载form元素的method属性。
formnovalidate：重载form元素的novalidate属性。
formtarget：重载form元素的target属性。

链接属性

media：指定目标URL是为什么类型的媒介/设备进行优化的，适用于元素a和area。
hreflang：用于指定链接（通常是<link>元素中的链接或 <a> 元素中的超链接）的目标资源语言的属性。
rel（relationship attribute）：定义当前页面与其他页面的关系
size：指定关联图标（icon元素）的大小
target：用于指定在何处打开所有从文档中链接的资源
- _blank：在新的窗口或标签页中打开链接。
- _self：在当前窗口或标签页中打开链接（默认行为）。
- _parent：在父框架中打开链接。
- _top：在整个浏览器窗口中打开链接。

其他属性

reversed：为ol元素增加的属性，使列表倒序显示。
charset：为meta增加的charset属性，为文档指示字符编码。
type：为menu增加的type属性，让菜单以上下文菜单、工具条、列表菜单3种形式出现。
label：为菜单元素menu定义一个可见的标注。
scoped：为style元素增加的scoped属性，用来规定杨hi的作用范围。
async：定义脚本元素script是否异步执行。
manifest：<html> 元素可以使用 manifest 属性来指定一个 Web App Manifest 文件。Web App Manifest 是一个 JSON 文件，包含有关 Web 应用程序的元信息，如名称、图标、主页 URL 等。通过使用 manifest 属性，开发者可以将这些信息链接到 HTML 文档中，以便浏览器能够获取并缓存这些信息，提高离线访问的性能。
sandbox、seamless、srcdoc：为iframe元素增加了3个属性，用来提高页面安全性，防止不信任的Web页面执行某些操作。

HTML5全局属性

HTML5新增了8个全局属性，这些全局属性可以用于任何HTML元素。

contentEditable：允许用户可以在线编辑元素中的内容。

html

<div contenteditable="true">
    This content is editable. Try typing here.
</div>

contextmenu：用于定义<div>元素的上下文菜单，属性值为要打开的<menu>元素的id。只有Firefox支持该属性。
data-*：该属性是 HTML5 中引入的一种自定义数据属性的方法。通过使用 data-* 属性，开发者可以将额外的数据附加到 HTML 元素，这些数据对于 JavaScript 脚本、CSS 样式或其他前端操作非常有用。这种方式允许你在不依赖非标准属性的情况下存储和检索数据。

html

<div data-color="red" data-product-id="123" data-is-active="true">Product</div>

<script>
    var productElement = document.querySelector('div');
    var color = productElement.dataset.color;      // 获取数据属性值
    var productId = productElement.dataset.productId;
    var isActive = productElement.dataset.isActive === 'true';  // 数据属性值始终是字符串
</script>

draggable：用于定义元素是否可以被拖动。

html

<div class="draggable" draggable="true">Drag me</div>

dropzone：定义在元素拖动数据时，是否复制、移动或链接被拖动数据。目前主流浏览器都不支持dropzone属性。
hidden：用于设置元素的可见状态，取值为一个布尔值。当设置为true时，元素不可见。当为false时，元素可见。
spellcheck：定义是否对元素进行拼写和语法检查。只要对input元素的文本值、textarea的文本或其他可编辑元素中的文本进行检查。
translate：定义是否应该翻译元素内容。目前主流浏览器都无法支持该属性。

HTML网页的文本设计

标题文本

使用<h1>~<h6>定义标题，h元素具有确切的语义，使用时要慎重选择。

段落文本

使用<p>定义段落文本，在段落文本前后会创建一定距离的空白，浏览器会自动添加这些空间，用户可以根据需要使用CSS重置这些样式。

引用文本

<q>标签

用于定义短引用，被引用的内容通过使用引号包围。
其有一个cite属性，定义引用的出处或来源。

<blockquote>标签

用于定义长引用，被引用的内容会从常规文本中分离出来，左、右两侧会缩进显示，有时会显示为斜体。
其有一个cite属性，定义引用的来源URL。

<cite>标签

用于定义参考文献的引用，如书籍或杂志的标题，引用的文本将以斜体显示，常用<a>标签配合使用，定义一个超链接指向参考文的联机版本。

强调文本

<em>标签

该标签用于强调文本，其包含的文字默认显示为斜体。

<strong>标签

该标签用于强调文本，其包含的文字默认显示为粗体。

<strong>与<em>的区别

<strong>的强调程度比<em>更加强烈。
<strong>以粗体显示，<em>以斜体显示

格式文本

文本格式有多种多样，如粗体、斜体、大号、小号、下划线、预定义、高亮、反白等效果。为了排版方便，HTML5继续支持HTML4中部分纯格式标签，如下：

<b>：定义粗体文本，与<strong>标签的默认效果相似。
<i>：定义斜体文本，与<em>标签功能的默认效果相似。
<big>：定义大号字体。
- 可以嵌套使用<big>标签逐步方法文本，每个<big>标签都可以使字体缩小，直至上限7号字体。
- 当文字已经是最大号字体时，<big>标签将不起任何作用。
<small>：定义小号字体。
- 可以嵌套使用<small>标签逐步方法文本，每个<small>标签都可以使字体缩小，直至下限1号字体。
- 当文字已经是最小号字体时，<small>标签将不起任何作用。
<sup>：定义上标文本，以当前文流中字符高度的一半显示，字体和字号和当前文本流的一样。
<sub>：定义下标文本，以当前文流中字符高度的一半显示，字体和字号和当前文本流的一样。

输出文本

HTML元素提供了如下输出信息的标签：

<code>：表示代码字体，即显示源代码，通常用于用于表示单一的行内代码。
<pre>：表示预定义格式的源代码，即保留源代码显示中的空格大小，通常用于表示多行代码，其中的空格和换行符会被保留。
<tt>：表示打印机字体。
<kbd>：表示键盘字体。
<dfn>：表示定义的术语。
<var>：表示变量字体。
<samp>：表示代码范例

html

<p>表示代码的文本：<code>hello world!</code></p>
<p>表示预定义格式的文本：
<pre>
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
</pre>
</p>
<p>表示打印机字体的文本：<tt>hello world!</tt></p>
<p>表示键盘字体的文本：<kbd>hello world!</kbd></p>
<p>表示定义的术语的文本：<dfn>hello world!</dfn></p>
<p>表示变量字体的文本：<var>hello world!</var></p>
<p>表示代码范例的文本：<samp>hello world!</samp></p>

缩写文本

有两个标签可以缩写文本：

<abbr>：缩写，用于标记文本中的缩写，以提供更多的语义信息。
- title属性：设置在鼠标指针移动到<abbr>上时显示完整文字。
<acronym>：首字母缩略词，用于标记文本中的缩写，以提供更多的语义信息。该标签在html5中已被弃用，推荐使用<abbr>。

html

<abbr title="这是一段很长的文字的缩写">这是缩写</abbr>

插入和删除文本

标签如下：

<ins>：定义插入到文档中的文本。
<del>：定义文档中已被删除的文本。这两个标签都支持以下两个专用属性：
cite：指向另外一个文档的URL，该文档可解释文本被修改的原因。
datetime：定义文本被修改的日期和时间，格式为YYYY-MM-DD hh:mi:ss。

html

<p>这是一段很长的文字，
    <ins cite="www.baidu.com" datetime="2024-01-08 16:11:01">这是一段插入的文字</ins>
    <del cite="www.baidu.com" datetime="2024-01-08 16:11:05">这是一段被删除的文字</del>
</p>

设置文本方向

<bdo>标签可以改表文本流的方向，它包含一个属性：dir，取值包括ltr（从左到右）和rtl（从右到左）。

html

<p><bdo dir="rtl">这是一段逆向的文字</bdo></p>

标记文本

<mark>标签用于定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息，对于当前用户具有参考作用的一段文字。例如网页中检索某个关键词时，呈现的检索结果，使用mark高亮显示。

html

<p>高亮显示后面两个字：<mark>高亮</mark></p>

进度信息

<progress>标签以进度条的形式表示任务的进度。

这个进度可以是不确定的，表示任务正在进行。
也可以是确定的，使用0到100之间的数字来表示完成情况。 progress元素有两个属性，用于表示当前任务完成情况。
max：定义任务一共需要多少工作量，工作量单位是随意的，不用指定。
value：定义已经完成多少任务。

max、value属性只能指定为有效的浮点数，且属性的值必须大于0。value必须小于等于max属性。

html

<progress></progress>
<progress max="120" value="50"></progress>

刻度信息

<meter>标签用于定义已知范围或分数值内的标量、进度。例如，磁盘用量、查询结果的相关性等。其包含以下7个主要属性：

value：在元素中特别标示出来的实际值，该值默认为0，可以指定一个浮点小数值。
min：用于设置范围的最小值，默认值为0，值不能小于0。
max：用于设置范围的最大值，默认值为1。
low：用于设置范围的下限值。
high：用于设置范围的上限值。
optimum：设置最佳值。
form：设置meter元素所属的一个或多个表单。

html

<p><meter max="100" min="0" high="80" low="20" optimum="60" value="100"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="90"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="80"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="60"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="20"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="10"></meter></p>
<p><meter max="100" min="0" high="80" low="20" optimum="60" value="0"></meter></p>

时间信息

<time>标签用以定义公历的时间（24小时制）或日期，其中的时间、时区偏移是可选的。该标签的功能主要用于让浏览器识别到标准的时间格式。

html

<p><time datetime="2024-01-01">2024-01-01</time></p>
<p><time datetime="2024-01-01T08:05:05">2024-01-01 08:05:05</time></p>
<p><time datetime="2024-01-01T08:05:05Z">2024-01-01 08:05:05</time></p>
<p><time datetime="2024-01-01T08:05:05+9:00">2024-01-01 17:05:05</time></p>

日期与时间之间使用T分隔，T表示时间
Z表示使用UTC标准时间
+9:00表示编码另一地区时间 <time>标签包含2个属性：

datetime：定义日期和时间，否则由元素的内容给定日期和时间。
pubdate：定义<time>标签定义的日期和时间是否是发布日期。

联系文本

<address>标签定义文档或文章作者、拥有者的联系信息，其包含文本通常显示为斜体，大部分浏览器会在address元素前后添加折行。

如果address标签位于body标签内，它表示文档联系信息。
如果address标签位于article标签内，它表示文章的联系信息。

html

<body>
    <p>这是一个段落。</p>
    <footer>
        <section>
            <address>
                <a href="https://www.baidu.com" title="百度">百度首页</a>
            </address>
            <p><time datetime="2024-01-01" pubdate></time></p>
        </section>
    </footer>
</body>

隔离文本

<bdi>标签允许设置一段文本，使其脱离其父元素的文本方向设置。该标签在用户评论或其他无法完全控制的内容处可以起到隔离作用。

换行断点

<wbr>标签定义文本中的何处适合添加换行符，它将在浏览器宽度不够时，对文本在合适的位置进行换行。

现代浏览器默认情况下会在适当的位置进行断字，而不需要明确使用<wbr>，所以这个标签已经很少用了。

文本注释

<ruby>标签可以定义ruby注释，即中文注音或字符。<ruby>需要与<rt>标签和<rp>标签以同使用。

HTML中的超链接

在HTML中建立超链接是需要有两个要素，分别是设置为超链接的网页元素和超链接指向的目标地址。

URL格式

URL（Uniform Resource Locator，统一资源定位器）主要用于指定网上资源的位置和方式，格式如下：

url

protocol://machinename[:port]/directory/filename

一个URL一般由以下3个部分组成：

第一部分：协议
- http://：超文本传输协议，表示资源是HTML文件。
- ftp://：文件传输协议，表示使用ftp传输方式访问该资源。
- mailto：表示该资源是电子邮件。
- file://：表示本地文件。
第二部分：存有该资源的主机IP地址及端口号
第三部分：主机资源的具体地址，如目录和文件名等。

超链接分类

根据URL不同，网页中的超链接一般分为3类：

内部链接：内部链接所链接的目标一般位于同一个网站中，可以是相对路径或绝对路径。
外部链接：外部链接所链接的目标一般为外部网站目标。
锚点链接：锚点链接是一种特殊的链接方式，实际上它是内部链接或外部链接基础上增加锚标记后缀**（#标记名）**。当跳转到该链接时，会跳转到该链接网页的锚点位置。

根据链接的内容不同，又可以分为：

文本超链接
图像超链接
E-mail链接：点击链接后浏览器会打开默认的电子邮件程序，收件人邮箱地址会更新为指定的地址。格式如下：

url

mailto:namee@mysite.cn?subject=这是邮件主题

其中subject表示邮件主题，为可选项目

多媒体文件链接
空链接：空链接是指href属性设置为#的，单击空链接，页面不会发生变化。

html

<a href="#">空链接</a>

下载链接：如果浏览器不能识别，则会弹出文件下载对话框，允许用户下载到本地。如果是浏览器可以识别的对象，会直接在浏览器中显示。对于浏览器能解析的目标度喜庆，用户可以使用download属性，强制浏览器执行下载。
热点区域：热点区域是为图像的局部区域定义超链接，当点击该区域时，会触发超链接，并跳转到其他网页或网页的某个位置。
框架链接：通过iframe标签浮动框架在窗口中再创建一个窗口，浮动框架接受一个参数src表示浮动框架中显示网页的路径。
等

`<a>`标签的使用

在html中使用<a>标签定义超链接，设计从一个页面跳转到另外一个页面，其包含以下属性：

href：规定链接指向的页面的URL，可以是各种类型的文件。
download：规定被下载的超链接目标
hreflang：规定被链接的文档的语言
media：规定被链接文档是为何种媒介/设备优化的
rel：规定当前文档与被链接文档之间的关系
target：规定在何处打开链接文档，可取_blank、_parent、_self（默认值）、_top、framename
type：规定被链接文档的MIME类型

只有当使用了href属性时，其他属性才会生效。

定义锚点链接

使用#定义锚点链接，任何被定义了ID值的元素都可以作为锚点标记，就可以定义指向该位置点的锚点链接。

定义热点区域

定义热点区域，需要<img>、<map>和<area>标签配合使用。

使用<map>定于一大片热点区域，须定义id或name属性。
使用<area>定义图像映射的区域，<area>需要嵌入在<map>中。
在<img>中使用usemap属性通过id或name引用<map>。

html

<img src="./rfdynq.ico" usemap="#amap" />
<map id="amap">
    <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="点我">
</map>

浮动框架

通过iframe标签创建一个浮动框架，它接受一个src参数，该参数表示框架中显示的网页路径，在默认情况下，浮动框架的宽度和高度为220x120。

浮动框架包含如下一些属性：

frameborder：取值1、0，规定是否显示框架周围的边框。
height：定义框架的高度
width：定义框架的宽度
longdesc：接受一个url，该url页面包含了有关iframe的描述。
marginheight：定义iframe的顶部和底部的边距。
marginwidth：定义iframe的左侧和右侧的边距。
name：定义iframe的名称。
sandbox：该属性有多个值，用于启用一系列对iframe中的内容的额外限制。
scrolling：规定iframe是否显示滚动条
seamless：规定iframe看上去像是包含文档的一部分。
src：接受一个url，规定iframe中显示的文档的url。
scrdoc：规定iframe中显示的页面的HTML内容。

HTML中的列表

列表的基本结构

在HTML中，列表结构分为有序列表、无序列表和定义列表。

无序列表

无序列表使用项目符号来标识列表

html

<ul>
    <li>第一列</li>
    <li>第二列
        <ul>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ul>
    </li>
    <li>第三列</li>
</ul>

有序列表

有序列表则使用编号来标识列表的项目顺序。

html

<ol>
    <li>第一列</li>
    <li>第二列
        <ol>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ol>
    </li>
    <li>第三列</li>
</ol>

<ol>标签有以下常用属性：

reversed：定义列表顺序为降序，如9、8、7...
start：定义有序列表的起始值。
type：定义在列表中使用的标记类型。

定义列表

定义列表是一种特殊的结构，它包含词条(dt)和解释(dt)两块内容，一个dt标签可以对应一个或多个dd标签。

html

<dl>
    <dt>第一列</dt>
    <dd>第一列的解释</dd>
    <dd>第一列的解释</dd>
    <dt>第二列</dt>
    <dd>第二列的解释</dd>
    <dd>第二列的解释</dd>
    <dt>第三列</dt>
    <dd>第三列的解释</dd>
    <dd>第三列的解释</dd>
</dl>

菜单列表

在html5中，使用<menu>、<menuitem>、<command>定义命令列表或菜单，如上下文菜单、工具栏，以及列出表单控件和命令。

<menu>标签中可以包含<command>和<menuitem>标签，用于定义命令和项目。

仅有Firefox 8.0+版本浏览器支持<menuitem>标签。《

<menu>标签有两个专用属性：

label：定义菜单的可见标签
type：定义菜单类型，有如下取值：
- list：默认值，定义列表菜单。
- context：定义上下文菜单。
- toolbar：定义工具栏菜单。

<command>标签包含很多属性，可以用来定制样式和行为：

type：定义command的类型，可取值：checkbox、command、radio，默认为command。
checked：定义是否被选中，仅适用于radio或checkbox类型
disabled：定义commadn是否可用
icon：定义command显示的图像的url
label：定义command可见的label
radiogroup：定义command的组名，仅在类型为radio时可用。

HTML中的表格

在网页设计中，表格是很重要的对象，它有两个基本功能：网页布局和二维数据显示。

表格的基础结构

表格由行、列、单元格3部分组成，在HTML中使用以下标签定义一个标准表格：

<table>：定义一个表格。
<caption>：定义表格标题。<caption>标签必须紧随在<table>标签之后每个表格只能定义一个标题，标题通常会被居中显示在表格之上。
<th>：table head，定义表头单元格。表头标签内部的文本通常显示为粗体、居中
<thead>：定义表头结构
<tr>：table row，定义表格的每行。
<td>：table data，定义每个单元格的内容，单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<tbody>：定义表格主体结构。
<tfoot>：定义表格的页脚结构
<col>：在表格中定义针对一个或对各列的属性值。只能在<table>或<colgroup>标签中使用。
<colgroup>：定义表格列的分组。通过该标签，可用对列组进行格式化。只能在<table>标签中使用。

html

<table>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>第一列数据</td>
        <td>第二列数据</td>
    </tr>
</table>

创建表格

简单表格

简单表格由一个table元素，以及一个或多个tr和td元素组成。tr定义表格行，td定义单元格。

html

<table>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
    <tr>
        <td>第一列数据</td>
        <td>第二列数据</td>
    </tr>
</table>

包含表头的表格

在html中使用th定义表头单元格，相当于数据库表中的字段名。

html

<table>
    <tr>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>11111@qq.com</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>12323@qq.com</td>
    </tr>
</table>

包含标题的表格

使用caption元素定义表格的标题，caption元素必须紧随table之后，一个table只能定义一个caption。

html

<table>
    <caption>标题</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
    <tr>
        <td>第一列数据</td>
        <td>第二列数据</td>
    </tr>
</table>

结构化的表格

使用thead、tfoot、tbody元素对表格中的行-tr进行分组，创建一个结构化的表格。

thead：元素用于定义表格的表头。
tfoot：用于对表格中的表注（页脚）内容进行分组。
tbody：用于对表格中的主体内容进行分组。当使用thead、tfoot、tbody时，必须使用全部的元素，排列次序一次为thead>tfoot>tbody，且需要使用table元素包裹。

html

<style type="text/css">
    table,
    tr,
    th,
    td {
        border: solid 1px black;
        /* 设置边框样式和颜色 */
    }

    tfoot td {
        text-align: right;
    }
</style>
<table>
    <caption>通讯率</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <!-- colspan属性用于合并单元格 -->
            <td colspan="2">邮箱信息</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>张三</td>
            <td>123123@qq.com</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>56756756@qq.com</td>
        </tr>
    </tbody>
</table>

列分组的表格

HTML中使用col或colgroup元素对表格中的列进行分组。使用col标签可以为表格中一个或多个列定义属性值。col元素只能在table或colgroup元素中使用，col元素是仅包含属性的空元素，不能够包含任何信息。

span是colgroup和col标签的专用属性，规定列组应该横跨的列数，取值为正整数。

现代浏览器目前对col和colgroup的样式支持不太好，仅支持width和background-color属性。

html

<style type="text/css">
    col.span1 {
        width: 70%;
        background-color: yellow;
    }

    col.span2 {
        width: 30%;
        background-color: blue;
    }
</style>
<table>
    <caption>标题</caption>
    <colgroup>
        <col class="span2" />
        <col class="span1" />
    </colgroup>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
    <tr>
        <td>第一列数据</td>
        <td>第二列数据</td>
    </tr>
</table>

设置表格属性

表格的大部分属性都可以使用CSS属性替代使用，也有部分专用属性无法使用CSS实现。表格有如下属性：

border：定义表格边框，值为正数，单位为像素。当值为0时，表示隐藏表格边框线。功能类似于CSS中的border属性，但没有CSS中的强大。
frame：设置数据表的外边框线显示样式，实际上它是对border属性的功能扩展。其有如下取值：
- void：不显示任一边框线
- above：顶端边框线
- below：底部边框线
- hsides：顶部和底部边框线
- lhs：左边框线
- rhs：右边框线
- vsides：左和右的边框线
- box：所有四周的边框线
- border：所有四周的边框线。
rules：设置数据表的内边线显示，实际上它是对border属性的功能扩展。其有如下取值：
- none：禁止显示内边线
- groups：仅显示分组内边线
- rows：显示每行的水平线
- cols：显示每列的垂直线
- all：显示所有行和列的内边线
cellpadding：定义数据表单元格的补白。类似于css中的padding属性。
cellspacing：定义数据表单元格的边界。类似于css中的border-spacing属性。
width：定义数据表的宽度。类似于css中的width属性。
summary：定义表格的摘要，没有对应的css属性。

设置单元格属性

单元格标签td和th也包含大量属性，其中大部分属性都可以使用css属性代替使用，也有部分专用属性无法使用CSS实现。其有如下属性：

abbr：定义单元格中内容的缩写版本。
align：定义单元格内容的水平对齐方式，功能类似于css中的text-align属性。其有如下取值：
- right：右对齐
- left：左对齐
- center：居中对齐
- justify：两端对齐
- char：对准指定字符
valign：定义单元格内容的垂直排列方式，类似于css中的vertical-align属性。其有如下取值：
- top：顶部对齐
- middle：居中对齐
- bottom：底部对齐
- baseline：基线对齐
axis：对单元进行分类，取值为一个类名。
char：定义根据哪个字符来进行内容的对齐。
charoff：定义对齐字符的偏移量
colspan：定义单元格可横跨的列数，取值为正数。当取值为0时，则表示横跨到列组的最后一列。
rowspan：定义单元格可横跨的行数，取值为正数。当取值为0时，则表示横跨到行组的最后一行。
headers：定义单元格相关的表头，绑定表头元素的id值。
scope：定义将表头数据与单元格数据相关联的方法。其有如下取值：
- col：列的表头
- colgroup：列组的表头
- row：行的表头
- rowgroup：行组的表头

单元格跨列或跨行显示

使用colspan定义单元格跨列合并，使用rowspan定义单元格跨行合并。

html

<table border="1px">
    <tr>
        <td align="center" colspan="4">上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
    <tr>
        <td align="center" colspan="4">下午</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>历史</td>
        <td>化学</td>
        <td>物理</td>
    </tr>
</table>

HTML中的表单

在网页中，表单的作用非常重要，主要负责采集浏览者的输入信息，用于与后端交互。

表单的基本结构

一个完整的表单结构由以下3部分组成：

表单框架（<form>标签）：<form>标签是一个包含框，里面包含了所有的表单对象。表单框架还包含处理表单数据的各种属性，如提交字符编码、与服务器交互的地址、HTTP提交的方式等。
表单域（<input>、<select>等标签）：用于采集用户的输入或选择的数据的控件，如文本框、文本区域、密码框、隐藏域、单选框、复选框、下拉选择框及文件上传框等。
表单按钮(<input>、<button>标签)：用于将数据发送到服务器，也可以用来控制其他脚本行为，如提交、重置等行为。

<form>标签包含很多属性：

accept-charset：接受一个编码字符列表，设置服务器可处理的表单数据字符集。
action：接受一个url地址，设置当提交表单时向何处发送表单数据。

当设置action="#"时，表示提交给当前页面。

autocomplete：On/Off，设置是否启用表单的自动完成功能。
enctype：设置在发送表单数据之前如何对其进行编码。可取：
- application/x-www-form-urlencoded：默认值，将表单中数据编码为名称/值对的形式发送至服务器，是标准的编码格式。
- multipart/form-data：将表单中数据编码为一条消息，表单中的每个表单元素表示消息中的一个部分，然后传送至服务器。若表单中含有上传组件时，必须设置该属性值。一般用于上传文件。
- text/plain：将表单中的数据以纯文本方式进行编码。发送邮件时需设置编码类型，否则接收时会出现编码混乱的情况。
- application/json：发送json类型的数据。
method：设置用于发送form-data的HTTP方法，可取：
- get：默认值，发送get请求。
- post：发送post请求。
name：设置表单的名称。
novalidate：如果使用该属性，则表单提交时不进行数据验证。
target：设置在何处打开action URL，可取如下值：
- _blank：表示在新的窗口或标签页中加载响应。
- _self：默认值，表示在当前窗口或框架中加载响应。
- _parent：表示将在父框架中加载响应。
- _top：表示在顶层框架中加载响应。
- framename：指定一个具体的框架或窗口的名称，以便在该框架或窗口中加载响应。

所有表单元素都包含两个基本属性：

name：用于定义表单对象的名称，提交表单时，通过name属性名可以访问表单对象的值。
id：用于定义表单对象的ID编码，以便JS和CSS访问该对象，一般可以为表单对象的name和id属性设置相同的值。

表单中的按钮有多种形式：

当使用input标签，type="submit"时，表示提交按钮，该按钮负责提交表单数据到服务器。
当使用input标签，type="reset"时，表示重设按钮，该按钮能够清空用户输入的数据，并恢复到默认状态。
当使用input标签，type="image"时，表示图像按钮。使用属性src指定图像按钮的URL，使用属性alt定义图像替换文本。该按钮功能与提交按钮功能相同。
当使用input标签，type="button"时，表示普通按钮，该按钮没有默认动作，需用户通过脚本定义实现功能。
使用button标签也能定义按钮，通过type属性指定按钮类型，如button、reset、submit，默认为提交按钮。

html

<form action="#">
    <p>用户名：<input name="username" type="text" /></p>
    <p>密码：<input name="password" type="text"/></p>
    <input type="submit" value="提交">
</form>

输入型控件`<input>`标签

<input>标签可以定义多种形式的输入框，包括单行文本框、密码输入框、隐藏输入、文件上传组件、单选按钮、提交按钮、重置按钮以及图像按钮等。

<input>标签的type属性用于定义输入框的类型，如果没有设置type属性，默认显示为单行文本框。

`<input>`标签的属性值

type：设置input元素的类型，可取如下值：
- text：默认值，单行文本框
- password：密码输入框
- hidden：隐藏文本
- email：专门用于输入email地址的文本框，提交表单时会验证是否是一个有效的电子邮件地址。
- url：专门用于输入url地址的文本框。提交表单时会验证是否是url地址格式的文本。
- number：专门用于输入数值的文本框。还可以使用max、min、step、value属性限定数字范围和设置默认值。
- range：提供一个滑动条，用于输入包含范围内数字值。
- search：提供用于输入搜索关键词的文本框。
- tel：提供用于输入电话号码的文本框。
- color：提供专门用于输入颜色的文本框。
- button：普通按钮
- reset：重置按钮
- submit：提交按钮
- image：图像按钮
- file：上传文件
- checkbox：复选框
- radio：单选框
- 时间类型：date、month、week、time、datetime、datetime-local。
name：定义input元素的名称。
form：接收form表单的id/name属性。设置input标签所属的一个或多个表单。

如果一个form属性要引用两个或两个以上的表单，则需要使用空格将表单的id分隔开。

value：设置input元素的值。
checked：设置此input元素首次加载时应当被选中。
required：设置输入字段为必输，内容为空时不允许用户提交。
readonly：设置输入字段为只读。
disabled：当input元素加载时禁用此元素。
placeholder：用于设置输入字段的提示词。当输入框为空时显式出现，当输入框获得焦点时则会消失。
max：设置输入字段的最大值，与min属性配合使用。
min：设置输入字段的最小值，与max属性配合使用。
maxlength：设置输入字段中的字符的最大长度。
step：设置输入字的合法数字间隔。
pattern：接收一个正则表达式。用于设置输入字段的值的模式或格式。
size：给定输入字符的数量，用于定义输入字段的宽度。CSS中的width属性可以替代该属性。
multiple：如果使用该属性，则允许一个以上的值。当type='file'时，表示允许上传多个文件。
accept：取值为：mime_type，设置文件上传时限定的文件类型。
src：用于定义图像按钮的图像URL。适用于type='image'时。
alt：接收一个文本值，type为image时，定义图像按钮的替代文本。
height：用于定义input字段的高度。仅适用于type='image'时。
width：定义input字段的宽度。仅适用于type='image'时。
list：接收一个datelist标签的id属性。引入datalist中的数据作为输入字段的预定义选项提供给用户选择。
autofocus：在页面加载时，使控件获得焦点。
autocomplete：取值为on/off，设置是否使用输入字段的自动完成功能。
formaction：用于覆盖表单的action属性。适用于type='submit'和type='image'时。
formenctype：用于覆盖表单的enctype属性。适用于type='submit'和type='image'时。
formmethod：用于覆盖表单的method属性。适用于type='submit'和type='image'时。
formnovalidate：用于覆盖表单的novalidate属性。当使用该属性时，提交表单时不进行验证。
formtarget：用于覆盖表单的target属性。适用于type='submit'和type='image'时。

formaction、formenctype、formmethod、formnovalidate、formtarget这些重写类型仅适用于type为submit和image输入类型。

`<textarea>`多行文本框

<textarea>标签可用于定义多行文本框，其大部分属性与<input>标签相同。其有以下几个专有属性：

cols：设置文本区域内可见字符宽度。
rows：设置文本区域内可见行数。

一般通过css的width和height属性控制文本框的宽度和高度。当输入的内容超过可视区域后，文本区域将出现滚动条，可通过CSS控制是否显示滚动条。

wrap：定义输入内容大于文本区域宽度时显示的方式。
- soft：默认值。当在表单中提交时，textarea中的文本不换行。
- hard：当在表单中提交时，textarea中的文本换行，即包含换行符。当使用hard时，必须设置cols属性。

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>test title</title>
</head>
<form action="#" accept-charset="utf-8">
    <div> <input type="text" name="text" id="text" placeholder="提示文本" />
    </div>
    <div> <input type="password" name="password" id="password" />
    </div>
    <div> <input type="hidden" name="hidden" id="hidden" value="hidden" />
    </div>
    <div> <input type="button" name="button" id="button" />
    </div>
    <div> <input type="reset" name="reset" id="reset" />
    </div>
    <div> <input type="submit" name="submit" id="submit" />
    </div>
    <div> <input type="image" name="image" id="image" alt="image" src="./rfdynq.ico" />
    </div>
    <div> <input type="file" multiple accept=".xlsx,.txt,.xml">
    </div>
    <div> <input type="checkbox" name="checkbox id=" checkbox" checked>
    </div>
    <div> <input type="radio" name="radio" id="radio" checked>
    </div>
    <div><textarea name="textarea" id="textarea" cols="30" rows="10"></textarea></div>
</form>

</html>

选择型控件

选项框（单选框与复选框）

<input type="radio">表示单选按钮，以一个圆形的选择框表示。多个单选按钮可以合并为一个单选按钮组，单选按钮组中的name值必须相同，单选按钮组同一时刻只能选择其中一个。

<input type="checkbox">表示复选框，可以允许多项选择，每个复选框都是一个独立的元素，且必须有一个唯一的名称name。

单选框和复选框使用checked属性时表示选中状态。

html

<form action="#">

    <div>
        <label><input type="radio" name="radiogroup" value="男" checked />男</label>
        <label><input type="radio" name="radiogroup" value="女" />女</label>
        <label><input type="radio" name="radiogroup" value="未知" />未知</label>
    </div>

    <div>
        <label><input type="checkbox" name="bfv" value="战地5" />战地5</label>
        <label><input type="checkbox" name="dbg2" value="荒野大镖客2" />荒野大镖客2</label>
        <label><input type="checkbox" name="ws3" value="巫师3" />巫师3</label>
    </div>

</form>

一般使用<label>标签来为选项提供描述性文本，因为它可以通过点击文本来选中相关的单选按钮，提升用户体验。

下拉框

<select>标签和<option>标签配合使用可以设计除下拉菜单或列表框。

<select>标签用于定义选择框
<option>标签用于定义选项项目。
- value属性：表示选项的值。
- selected属性：表示定义为默认选项。
<optgroup>标签用于对标签分组
- label属性：选项分组的名称，该属性是必须的。

<select>标签包含两个专用属性：

size：定义下拉菜单中显示的项目数目，optgroup标签的项目也计算在其中。
multiple：定义下拉菜单可以多选。

html

<form action="#">
    <p>
        <select name="select" id="select">
            <optgroup label="组1">
                <option value="战地5">战地5</option>
                <option value="巫师3">巫师3</option>
                <option value="老头环">老头换</option>
            </optgroup>
            <optgroup label="组2">
                <option value="双人成行" selected>双人成行</option>
                <option value="地平线5">地平线5</option>
                <option value="彩虹六号">彩虹六号</option>
            </optgroup>
        </select>
    </p>
</form>

日期选择器类型

在HTML5中提供了多个用于选择日期和时间的输入类型，它们是<input>标签不同的type属性。

html

<input type="date">

date：选取日、月、年。
month：选取月、年。
week：选取周和年。
time：选取时间（小时和分钟）。
datetime：选取时间、日、月、年（utc时间）。
datetime-local：选取时间、日、月、年（本地时间）。

辅助控件

表单控件分组

使用<fieldset>和<legend>标签可以对表单控件进行分组。

<fieldset>：为表单对象进行分组，一个表单可以包含多个<fieldset>标签。默认状态下，表单区域分组得外面会显示一个包围框。
<legend>：定义每组得标题，默认显示在<fieldset>包含框的左上角。

表单控件分组，一般用于大型或复杂的表单结构中，比如注册表单中，可以分组成基本信息（必填项）和详细信息（选填项）。

表单对象提示信息

<label>标签定义表单对象的提示信息，label标签包含for专用属性，可将提示信息与表单对象绑定再一起。当用户点击提示信息时，会激活对应的表单对象。

快捷键

表单元素的accesskey属性，可以为每个表单控件定义一个快捷访问键。

tab访问键

表单元素的tabindex属性可以为每个表单控件定义按下Tab键时被表单元素或链接选中的顺序。

当tabindex=0时相当于默认设置。
当tabindex=-1时，表示禁用该标签的Tab按键。
tabindex属性值越小，优先级越高，越早获得焦点。
tabindex属性值相同时，按元素出现的先后顺序获得焦点。

禁用表单控件

使用disabled属性，可以禁用表单元素，用户将不能选中控件。

datalist元素

datalist元素用于为输入框提供一个可选得列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。

datalist中包含option元素，表示每一个选项，option元素必须设置value属性。

要把datalist提供的列表绑定到某输入框，需要使用输入框的list属性来引用datalist元素的id。

html

<form action="#">
    <input type="text" name="text" id="text" list="game" />
    <datalist id="game">
        <option value="Minecraft"></option>
        <option value="bfv5"></option>
        <option value="skyline"></option>
    </datalist>
</form>

keygen元素

keygen元素是密钥对生成器，能够使得用户验证更为可靠，用户提交表单时会生成两个密钥，一个是公钥，一个是私钥。私钥会存储在客户端，公钥则会发送到服务器，用于后续的用户验证。

html

<form action="#">
    <keygen name="security"/>
    <input type="submit" value="提交">
</form>

output元素

output元素用于在浏览器中显示计算结果或脚本输出，其包含完整得开始和结束标签。

显示验证

HTML5为form、input、select和textarea元素定义了一个checkValidity()方法。调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。该方法返回布尔值，以提示是否通过验证。

HTML开发规范

在标准布局中，我们应该为每个div框架元素定义id属性，这些id属性如同人的身份证一样，方便CSS能够准确控制每个div布局块。

HTML转换为XHTML的方法

可以通过一些转换工具进行快速转换
一些大型的HTML文档、或手写代码比较随意的文档，可能使用工具效果不好，需要进行手工转换时，需要遵循以下几点
1. 闭合所有元素。
2. 使用正确的空元素语法。
3. 所有的属性值都必须使用引号。
4. 为所有属性分配值。
5. 元素和属性名要小写。
6. 元素要正确嵌套。
7. 包含DOCTYPE声明。
8. 在<html>标签中添加XHTML名字空间。

网页排版

使用结构标签进行网页布局

HTML包含丰富的标签，除了常用的<div>标签构建网页结构外，还有几类标签可以完善网页结构。

<div>：块状结构
<span>：行内机构
<h1> <h2> <h3> <h4> <h5> <h6>：定义文档标题，1-6级标题。
<p>：定义段落文本
<ul>、<ol>、<li>：定义信息列表、导航列表、榜单结构等。
<table>、<tr>、<td>：定义表格结构
<form>、<input>、<textarea>：定义表单结构
<span>：定义行内包含框

使用div

文档结构基本构成元素是div，div表示**区块(division)**的意思，它提供了将文档分割为有意义的区域的方法。

通过将主要内容区域包围在div中并分配id或class，就可以在文档中添加有意义的结构。

使用span

与div不同，span元素可以用来对行内元素进行分组，以应用不同的类样式。

使用id和class

id用于唯一标识某个元素，class用于标识一类样式相同的元素。

id和class的命名应遵循语义化，区分大小写，使用驼峰命名。

一般情况下，我们只会在不适合使用id的情况才对元素应用类，并且尽可能少使用类。实际上，创建大多数文档常常只需要添加几个类。

标签显示类型

CSS把标签分为两种基本显示形态：Block（块状）和Inline（行内）。

块状元素

块状元素的宽度一般为100%，占据一行，即使宽度不为100%，块状元素也始终占据一行。

常用的块状元素如下：

address：表示特定信息，如地址、签名、作者、文档信息，一般显示为斜体效果。
blockquote：表示文本中的一段引用语。一般为缩进显示。
div：通过定位包含框，没有明确的语义。
dl：表示定义列表。
fledset：表示字段集，显示为一个方框，用来包含文本和其他元素。
form：表示包含的控件是某个表单的组成部分。
h1-h6：表示标题
noframes：指定在不支持FrameSet元素的浏览器中显示的HTML
noscript：指定在不支持简本的浏览器中显示的HTML
ol：有序列表
p：表示一个段落
pre：显示一段文字，保留代码中的空格和回车
table：表示一个表格
ul：表示不排序的项目列表
li：表示列表中的一个项目
legend：在FieldSet元素绘制的方框内插入一个标题。

行内元素

行内元素没有固定的大小，定义width和height属性无效。行内元素可以在行内自由流动，但可以定义边界、补白、边框和背景，它显示的高度和宽度只能够根据所包含内容的高度和宽度来确定。

常用的行内元素如下：

a：超链接
abbr：标注内部文本为缩写。
acronym：表示取首字母的缩写词。
b：指定文本以粗体显示
bdo：控制包含文本的阅读顺序。
big：包含文本比当前字体稍大的字体显示
br：插入一个换行符
button：定义一个包含文本的按钮。
cite：表示引文
code：表示代码字体，通常以等宽字体显示。
dnf：表示术语，通常以斜体显示
em：表示强调文本，以斜体显示
i：指定文本以斜体显示
img：插入图像或视频片段
input：创建各种表单输入控件
kbd：定义键盘键。浏览器通常以等宽字体显示按键。
label：为页面上的其他元素指定标签
map：包含客户端图像映射的坐标数据
object：插入对象
q：分离文本中的引语
samp：表示代码范例
script：指定由脚本引擎解释的页面中的脚本
select：表示一个列表框或者一个下拉框
small：指定内含文本要以比当前字体稍小的字体显示
span：指定内嵌文本容器
strike：带删除线显示文本
strong：以粗体显示文本
sub：以下标形式显示文本
sup：以上标形式显示文本
textarea：多行文本输入控件
tt：定义打印机字体，这是 HTML 中的一个旧的、废弃的元素，浏览器通常使用等宽字体文本表示它，通常用于模拟电传打字机或计算机终端上的文本显示。
var：定义程序变量。通常以斜体显示。

该表元素的显示类型

在CSS中，可以使用display属性来改变元素的显示类型。其有如下选项值：

block：块状显示，会在元素后面添加换行符，也就是说其他元素不能再其后面并列显示。
none：隐藏显示。这与visibility:hidden声明不同，display:none声明不会为被隐藏的元素保留位置，浏览器不会解析其内容。
inline：行内显示。在元素后面删除换行符，多个元素可以在一行内并列显示。
inline-block：行内显示，但是元素的内容以块状显示，行内其他行内元素还会显示在同一行内。
compact：紧凑的块状显示，或基于内容之上的行内显示。
marker：在容器对象之前或之后显示，该属性值必须与:after和:before伪元素一起使用。
inline-table：具有行内特征的表格显示。
list-item：具有块状特征的列表项目显示，并可以添加可选项目标志。
run-in：块状显示或居于内容之上的行内显示。
table：具有块状特征的表格显示。
table-capiton：表格标题显示。
table-cell：表格单元格显示。
table-column：表格列显示。
table-column-group：表格列组显示
table-header-group：表格标题组显示
table-footer-group：表格页脚组显示
table-row：表格行显示。
table-row-group：表格行组显示

常用的显示类型都可以归为block和inline两种基本形态，其他类型都是这两种类型的特殊显示，证正能够应用并获取所有浏览器支持的只有4个：

block
none
inline
list-item

HTML结构嵌套中的常用规则

规则1

body元素能够直接包含的元素有ins、del、script、block类型元素。

block是指块状类型的元素，即body能够包含任何块状元素。
script是头部隐藏显示的脚本元素。
ins和del是两个行内元素。除了这两个特殊的行内元素外，其他任何行内元素都不能够直接包含在body中。

规则2

ins和del元素能够直接包含块状元素和行内元素等不同类型的元素，但是行内元素禁止包含块状元素。

规则3

p、h1-h6可以包含行内元素和纯文本内容，但不能直接包含块状元素。但可以间接包含块状元素，比如object、map和button行内元素中还可以包含块状元素。

规则4

ul和ol元素只能够包含li元素，li元素中可以包含其他元素。

规则5

dl元素只能包含dt和dt和dd元素，不能包含其他元素。同时dt只能包含行内元素，不能包含块状元素。dd可以包含任何元素。

规则6

form元素不能直接包含input元素，因为input元素是行内元素，而form元素仅能够包含块状元素。

错误示范：

html

<form action="#">
    <label for="a">a：</label>
    <input type="text" name="a" id="a">
    <label for="b">b：</label>
    <input type="text" name="b" id="b">
</form>

规则7

table元素能够直接包含caption、colgroup、col、thead、tbody、tfoot，但不能够包含tr以及其他元素。

如果在table中包含tr，则浏览器会在table和tr之间嵌入tbody元素。

不过，还是建议养成使用thead、tbody、tfoot元素的习惯。

caption元素只能够包含行内元素。

tr元素只能够包含th和td元素，而th和td元素能够包含任何元素。

设计HTML5的网页结构

HTML5新增了多个标签用于设计文档结构。

定义文章块

article：用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。通常包含头部（header元素）、底部（footer元素）。

定义内容块

select：用于对网站或应用程序中页面上的内容进行分区。通常由内容以及标题（hn元素）组成。

div元素关注结构的独立性，而selection元素关注内容的独立性，selection元素包含的内容可以单独存储到数据库中或输出到word文档仲。

使用selection元素时需要注意以下几个问题：

不要将selection元素当作设置样式的页面容器，对于此类操作应该使用div元素。
如果article元素、aside元素或nav元素更符合使用条件，不推荐使用selection元素。
不为没有标题的内容区块使用selection元素。

定义导航块

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。

并不是所有链接都要被放进nav元素中，只需要将主要的、基本的链接组放进nav元素即可。

nav元素适合用在以下场合:

传统导航条。常规网站都设置不同层级的导航条，其作用是将当前页面跳转到网站的其他页面去。
侧边栏导航条。现在主流的博客或商品网站都有侧边栏导航条，其作用是从当前文章或商品页面跳转到其他文章或商品页面上。
页内导航。页内导航的主要作用是在页面内的几个主要组成部分之间进行跳转。
翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章之间跳转。

html

<nav draggable="true">
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.google.com">谷歌</a>
    <a href="https://www.runoob.com">菜鸟</a>
</nav>

定义侧边栏

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有别于主要内容的部分。

aside有以下两种常用场景：

作为主要内容的附属信息部分，包含在article元素中，可以是与当前文章有关的参考资料或名称解释。
作为页面或站点全局的附属信息部分。比如侧边栏、友情链接、博客其他文章的列表、广告单元等。

定义主要区域

main元素表示网页中的主要内容。主要内容区域是指与网页标题或应用程序中本页主要功能直接相关或进行拓展的内容。

每个页面内容只能放置一个main元素，不能将main元素放置在任何article、aside、footer、header或nav元素内容。

定义标题栏

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题。一般放在整个页面的开头。

定义标题组

hgroup元素可以为标题或子标题进行分组，通常它与h1~h6元素组合试用，一个内容块中的标题及字标题可以通过hgroup元素组成一组。

html

<article>
    <hgroup>
        <h1>第一标题</h1>
        <h2>第二标题</h2>
        <h3>第三标题</h3>
    </hgroup>
    <p>正文部分</p>
</article>

定义脚注栏

footer元素用于定义内容块的脚注栏，如在内容块中添加注释，或者网页中添加版权信息等。

浮动布局

浮动布局不同于流动模式，它能够让对象脱离左右相邻元素，在包含框内向左或右侧浮动显示，但是浮动元素不能脱离文档流，依然受文档流的影响。

定义浮动布局

在默认情况下任何元素都不具有浮动特性，可以使用CSS的float属性定义元素的向左或向右浮动，基本用法如下：

html

float: none|left|right

none：表示消除浮动。
left：表示元素向左浮动。
right：表示元素向右浮动。

html

<style type="text/css">
    div#float {
        float: left;
    }
</style>
<div>
    <div id="float">
        <img src="./rfdynq.ico" alt="图片1">
    </div>
    <div>
        <img src="./rfdynq.ico" alt="图片2">
    </div>
</div>

浮动布局具有如下几个特征：

浮动元素以块状显示，可以定义width和height属性。
- 浮动元素硬明确定义大小，如果浮动元素没有定义宽度和高度，它会自动收缩到仅能包住内容为止。
- 当块状元素没有定义宽度时，则会自动显示为100%。
浮动元素与流动元素可以混合使用，浮动元素不会被重叠，都遵循先上后下显示规则，都受到文档流显示。但浮动元素能够改变相邻元素的显示位置，可以向左或向右并列显示。
浮动元素仅能改变水平显示方式，不能改变垂直显示方式，依然受文档流影响。流动元素总会以流动的形式环绕浮动元素左右显示。
浮动元素可以并列显示，如果包含框不够，则会错行显示。

清除浮动

在CSS中使用clear属性清除浮动，以定义与浮动元素相邻的元素在必要的情况下换行显示。

清除浮动元素不是清除元素自身，而是将当前元素设置为不允许与某个方向的浮动元素并列显示，并把当前元素清除到下一行显示。

clear属性其有如下取值：

left：清除左边的浮动元素，如果左边存在浮动元素，则当前元素会换行显示。
right：清除右边的浮动元素，如果右边存在浮动元素，则当前元素会换行显示。
both：清除左右两边浮动元素，不管那边存在浮动对象，则当前元素都会换行显示。
none：默认值，允许两边都可以存在浮动元素，当前元素不会主动换行显示。

html

<style type="text/css">
    div#float {
        float: left;
    }
    div#clear {
        clear: left;
    }
</style>
<div>
    <div id="float">
        <img src="./rfdynq.ico" alt="图片1">
    </div>
    <div id="clear">
        <img src="./rfdynq.ico" alt="图片2">
    </div>
</div>

如上面示列，第二个div的左边存在浮动元素，因此第二div换行显示。

浮动嵌套

浮动元素可以互相嵌套，嵌套规律与流动元素嵌套相同。浮动的父元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。

需要注意的是，如果把浮动元素嵌入流动元素之内，则父元素不能够自适应子浮动元素的高度，可能会导致父元素不能正确显示。比如父元素设置了背景颜色但没有显示。需要额外增加一个清除元素。

html

<style type="text/css">
    #contain{
        background-color: #FF99FF;
    }
    #span1{
        float: left;
        border: solid 1px black;
    }
    #span2{
        float:left;
        border: solid 1px black;
    }
    #div1{
        clear: left;
    }
</style>
<div id="contain">
    <span id="span1">span元素浮动</span>
    <span id="span2">span元素浮动</span>
    <div id="div1"></span>
</div>

混合浮动和流动布局

使用浮动布局和流动布局实现左右栏目。

html

<style type="text/css">
    #contain {
        border: solid 1px #000000;
    }
    img {
        float: left;
        clear: left;
        margin-right: 10px;
    }
</style>
<div id="contain">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <h1>文章标题</h1>
    <p>文章段落</p>
    <div style="clear: both;"></div>
</div>

2. 使用浮动布局和流动布局实现导航栏。

html

<style type="text/css">
    #contain {
        border: solid 1px #000000;
    }
    img {
        float: left;
        clear: left;
        margin-right: 10px;
    }
    #nav {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }
    #nav li{
        float: left;
        background-color: aqua;
        border: 1px solid #000000;
        height: 30px;
        width: 100px;
        text-align: center;
    }
    #nav li a {
        text-decoration: none;
    }
</style>
<ul id="nav">
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
    <li><a href="#">导航5</a></li>
    <div style="clear: both;"></div>
</ul>
<div id="contain">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <h1>文章标题</h1>
    <p>文章段落</p>
    <div style="clear: both;"></div>
</div>

定位显示布局

定位显示布局允许用户精确定义网页元素的显示位置，可以是绝对位置，也可以是相对位置。

定义定位显示

在css中通过position属性定义元素定位显示，其语法如下：

css

postion:static|relative|absolute|fixed

static：默认值。表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。
absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口，其层叠顺序则通过z-index属性来定义。（绝对于别人）
fixed：表示固定定位，与absolute定位类型类似，但它的定位包含框是视图本身即浏览器窗口的屏幕位置。因此固定定位的元素会始终位于浏览器窗口内试图的某个位置，不会受到文档流动影响。这与background-attachment:fixed;属性功能相同。
relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中偏移位置。相对定位完成的过程是首先按static方式生成一个元素，然后移动这个元素，移动方向由left、right、top、bottom确定，元素的形状和偏移前的位置保留不动。（相对于自己）

绝对定位absolute的定位包含框

**CSS定位包含框（定位框）**是标准布局中一个重要概念，它是绝对定位的基础。

绝对定位元素的偏移量是根据定位包括的位置计算的，一个绝对元素的位置取决于它的偏移量：top、right、bottom、left属性值。

定位包含框是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。

在默认状态下，body元素就是一个根定位包括框，所有绝对定位元素根据窗口来确定自己所处的位置和百分比大小显示的。
如果定义了定位包含框，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。

定位包含框一般可以用position属性来定义，有效取值包括absolute、fixed、relateive。

html

<style type="text/css">
    #a,
    #b {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 10px;
    }

    #a-a {
        position: absolute;
        width:50%;
        height: 50%;
        left: 50%;
        top: 50%;
        border: 1px solid #000;
    }

    #b {
        position: relative;
    }

    #b-b {
        position: absolute;
        width:50%;
        height: 50%;
        left: 50%;
        top: 50%;
        border: 1px solid #000;
    }
</style>
<div id="a">
    <div id="a-a">a-a</div>
</div>
<div id="b">
    <div id="b-b">b-b</div>
</div>

如上面例子，b设置了postion:relative，所以b-b取b为定位包含框。a没有被设置为定位包含框，所以b-b取默认body为定位包含框。

相对定位relative

相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的。

一个相对定位元素的位置取决于它的偏移量：top、right、bottom、left属性值。

html

<style type="text/css">
    b {
        position: relative;
        top: -30px;
        border: 1px solid #000;
    }
    div{
        border: 1px solid #000;
        margin-top: 10%;
    }
</style>
<div>
    <p><b>这是标题</b>这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。</p>
</div>

可以看到，相对定位后，元素对象的原空间保留不变。相对定位偏移的边距遵循绝对定位中的偏离规则，不过相对定位的定位包含框是元素对象的原位置。

相对定位与绝对定位的区别

相对定位元素占有自己的空间，即原始位置保留不变。绝对定位元素被完全拖离出正常文档流中原来的空间，且原来空间将不再被保留，被相邻元素挤占。
绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。

定位层叠

定位元素之间允许重叠显示，但在流动布局和浮动布局中是无法实现这种重叠效果的，因此可以利用定位重叠结束创建动态网页效果。

在CSS中可以通过z-index属性来确定定位元素的层叠等级，该属性只有在position属性取值为relative、absolute或fixed时才可以使用。

z-index属性值越大，层叠等级就越高
如果z-index属性值相同，则根据结构顺序层叠。
如果未指定z-index属性值，则此属性值为正数的元素会在其上，属性值为负数的元素会在其之下。

html

<style type="text/css">
    #a{
        background-color: aqua;
        border: 1px solid black;
        position: relative;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    #b{
        background-color: red;
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: relative;
        top: -50px;
        left: 50px;
        z-index: 2;
    }
    #c{
        background-color: green;
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: relative;
        top: -75px;
    }
</style>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

混合定位布局

混合定位布局是指利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。

比如，给父元素定义为相对定位position:relative，给子元素定义为position:absolute，那么子元素的位置将随着父元素，而不是整个页面进行变化。

html

<style type="text/css">
    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    #header {
        background-color: beige;
        width: 100%;
        height: 20%;
    }

    #container {
        background-color: burlywood;
        width: 100%;
        height: 60%;
        position: relative;
        margin: 0 auto;
    }
    #left{
        width: 30%;
        background-color: aliceblue;
        position: absolute;
        height: 100%;
    }
    #right{
        width: 70%;
        background-color: antiquewhite;
        position: absolute;
        right: 0px;
        height: 100%;
    }
    #footer {
        background-color: blanchedalmond;
        width: 100%;
        height: 20%;
    }
</style>
<div id="header">header</div>
<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>

HTML5 Web 存储

HTML5 的 Web 存储（Web Storage）是一种在用户浏览器中存储数据的机制，它允许 Web 应用程序更高效地存储和检索数据，而不需要依赖于服务器端的数据库。

Web 存储主要包括两种类型：localStorage 和 sessionStorage。

localStorage

持久性：数据不会过期，除非被显式删除。
作用范围：同一域名下的所有页面共享，基于同源策略，不同源之间数据不共享。
容量限制：通常为 5-10 MB（具体取决于浏览器）。

javascript

// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
let value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();

以下示例存储了按钮点击次数到localStorage内，重新打开网页时，依然能取到该值。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="button" value="点击增加" onclick="addCount()">
        <p id="time"></p>
    </div>
    <script>

        function showTimes() {
            let p = document.getElementsByTagName('p')[0];
            let count = localStorage.getItem('clickTimes');
            p.innerHTML = "点击次数：" + (count == null ? 0 : count);
        }

        function addCount() {
            let count = localStorage.getItem('clickTimes');
            if (count == null) {
                localStorage.setItem('clickTimes', 1);
            } else {
                localStorage.setItem('clickTimes', parseInt(count) + 1);
            }
            showTimes();
        }

        showTimes();
    </script>
</body>

</html>

sessionStorage

持久性：数据仅在当前会话（浏览器窗口或标签页）中有效，窗口或标签页关闭后数据即失效。
作用范围：同一窗口或标签页内的所有页面共享，基于同源策略，不同源之间数据不共享。
容量限制：通常为 5-10 MB（具体取决于浏览器）。

javascript

// 存储数据
sessionStorage.setItem('key', 'value');
// 读取数据
let value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();

以下示例存储了按钮点击次数到sessionStorage内，重新打开网页时，数据已被重置。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="button" value="点击增加" onclick="addCount()">
        <p id="time"></p>
    </div>
    <script>

        function showTimes() {
            let p = document.getElementsByTagName('p')[0];
            let count = sessionStorage.getItem('clickTimes');
            p.innerHTML = "点击次数：" + (count == null ? 0 : count);
        }

        function addCount() {
            let count = sessionStorage.getItem('clickTimes');
            if (count == null) {
                sessionStorage.setItem('clickTimes', 1);
            } else {
                sessionStorage.setItem('clickTimes', parseInt(count) + 1);
            }
            showTimes();
        }

        showTimes();
    </script>
</body>

</html>

HTML5 Web SQL 数据库

HTML5 Web SQL数据库是一种基于SQL的数据库，旨在通过浏览器提供客户端的存储解决方案。它允许开发者使用结构化查询语言（SQL）来操作客户端的数据库。

WebSQL数据库虽然方便，但它已经不再被推荐使用，它已经被 W3C 停止规范化，原因是它依赖于具体的 SQL 实现（大多数情况下是 SQLite）。因此，新的开发工作通常推荐使用其他技术，如 IndexedDB。

HTML5 应用程序缓存

HTML5 应用程序缓存（Application Cache，简称 AppCache）是 HTML5 标准的一部分，它允许开发者指定哪些资源（如 HTML、CSS、JavaScript、图像等）应该被浏览器缓存，从而使得这些资源在没有网络连接时也能使用。这项技术能够显著提高网页的加载速度和可用性，特别是在网络连接不稳定或离线的情况下。

要使用缓存技术，需要在HTML文件的<html>标签中加入manifest属性，指向一个缓存清单文件。以下示例，example.appcache为缓存清单文件。

html

<!DOCTYPE html>
<html manifest="example.appcache">
<head>
    <title>AppCache Example</title>
</head>
<body>
    <h1>My Offline Web App</h1>
</body>
</html>

缓存清单文件中，需要包含3部分内容：

CACHE: 列出要缓存的文件。
NETWORK: 列出不缓存的文件，表示这些文件需要在线访问。
FALLBACK: 为指定的资源提供备选内容，通常用于在离线时显示的内容。以上内容以URI的形式列示在缓存清单文件中，通过换行分隔开。

bash

CACHE MANIFEST
# 版本号或注释

CACHE:
# 需要缓存的文件列表
/index.html
/styles.css
/scripts.js
/images/logo.png

NETWORK:
# 不缓存的文件列表（这些文件总是从网络获取）
/api/*
/dynamic-content.php

FALLBACK:
# 指定替代资源的文件列表
/offline.html

注意事项：

缓存清单文件必须使用 UTF-8 编码。
一旦缓存清单文件中的内容发生改变，浏览器将重新下载并更新缓存。
应用程序缓存的行为在现代浏览器中已被 Service Workers 取代，因为 Service Workers 提供了更强大的功能和更灵活的缓存管理方式。

HTML5 Web Workers

HTML5 Web Worker 是一种在后台运行 JavaScript 的方式，允许你在不阻塞用户界面的情况下执行脚本。使用 Web Workers，可以在主线程之外创建一个独立的工作线程，从而避免因为复杂的计算或长时间的处理任务而导致页面变得无响应。

其有以下特性：

后台处理：Web Worker 在独立的线程中运行，不会阻塞主线程。
异步通信：主线程和 Worker 线程之间通过消息传递进行通信。
同源限制：出于安全考虑，Web Worker 只能加载与其起源相同的脚本。
安全限制：由于安全原因，Web Worker 中不允许访问 DOM、window 对象和某些 API（如 alert 和 confirm）。

创建Worker的方式

使用new Worker(js)的方式创建一个worker，如下：

javascript

w=new Worker(my.js);

my.js中的脚本将会在独立的工作线程中执行。

worker内部与worker外部通讯

worker内部：是指创建worker对象时，构造参数指定的javascript代码，该部分js代码运行在一个独立线程内。
worker外部：是指创建worker对象的js代码，该部分代码一般运行在主线程中。

要理解worker内外通讯需要分别从内部、外部去理解。

worker内部

worker内部有两个事件属性：

onmessage：用于处理从主线程发送到worker内部的消息。
onerror：用于处理 Worker 内部发生的错误。 worker内部有两个常用的方法：
postMessage()：从Worker内部线程向外部主线程发送消息。
importScripts()：向Worker内部引入其他脚本文件。
close()：在Worker内部，可以使用self.close()方法来关闭自身。self是Worker线程的全局对象，类似于浏览器环境中的 window 对象。

javascript

var count = 0;
function run() {
    setTimeout(() => {
        if (count < 10) {
            console.log(count++);
            run();
        } else {
            close();
        }
    }, 1000);
}
run();

onmessage = function (event) {
    console.log("MAIN:" + event.data);
    postMessage("hello");
}

onerror = function (event) {
    console.log("work inner:" + event.message);
}

worker外部

worker外部有两个事件属性：

onmessage：用于处理从worker内部发送到主线程的消息。
onerror：用于处理 Worker 内部发生的错误。 worker外部有两个常用的方法：
postMessage()：从Worker内部线程向外部主线程发送消息。
terminate()：立即终止Worker的执行。

javascript

var w = new Worker("worker.js");
w.onmessage = function (e) {
    console.log("worker:" + e.data);
}
w.onerror = function (e) {
    console.log("worker:" + e.message);
}
function sendMessageToWorker() {
    w.postMessage("Hello, worker!");
}
function stopWorker() {
    w.terminate();
}

HTML5 服务器发送事件（Server-Sent Events，SSE）

HTML5 服务器发送事件（Server-Sent Events，SSE）是一种允许服务器通过单一HTTP连接向客户端发送实时更新的技术。与WebSockets不同，SSE是单向的，即服务器可以向客户端发送消息，但客户端无法向服务器发送消息。SSE的常见应用包括实时通知、消息更新、社交媒体信息流等。

通过new EventSource(url)创建一个EventSource对象，给eventSource对象绑定onmessage事件和onerror事件的回调函数。

onmessage：当服务端推送到消息到客户端时执行回调函数。
onerror：当eventSource出现异常时执行回调函数

javascript

const eventSource = new EventSource('https://example.com/sse');
eventSource.onmessage = function (event) {
    console.log('Message from server:', data);
}

eventSource.onerror = function (error) {
    console.error('EventSource failed:', err);
}

SSE对服务端提供的服务有一些要求：

HTTP响应头：

必须设置Content-Type为text/event-stream。
可以设置Cache-Control为no-cache以防止客户端缓存响应。
可以设置Connection为keep-alive以保持连接打开。

数据格式：

数据必须按照特定格式发送，每条消息以两个换行符\n\n结束。
每条消息可以包含一个或多个字段，如data:、id:、event:、retry:等，每个字段以换行符\n结束。

保持连接：

SSE依赖长连接，服务器需要支持并保持连接长时间打开。
需要处理客户端的自动重连。

HTML5 WebSocket

HTML5 WebSocket是一种用于在浏览器和服务器之间建立持久连接的通信协议。与传统的HTTP请求-响应模式不同，WebSocket允许客户端与服务端进行双向通信，从而实现高效和实时的数据传输。其有如下特点：

双向通信：客户端和服务器可以互相发送消息，而不需要客户端每次都发起请求。
全双工：允许同时进行数据的发送和接收，类似于电话通话。
较低的延迟：由于连接是持久的，所以减少了建立连接和关闭连接的开销，从而实现较低的延迟。
节省带宽：减少了HTTP头的开销，因为一旦连接建立后，就不再需要每次都传递完整的HTTP头信息。

在HTML5中提供了WebSocket类来建立浏览器与服务器的WebSocket通信，使用以下方式建立一个WebSocket连接。

javascript

var Socket = new WebSocket(url, [protocol] );

第一个参数URL指定连接的URL地址
第二个参数protocal指定连接的协议

WebSocket对象的属性：

readyState：表示连接状态，是一个只读属性。
- 0：表示连接尚未建立。
- 1：表示连接已建立，可以进行通信。
- 2：表示连接正在关闭。
- 3：表示连接已经关闭或者连接不能打开。
bufferedAmount：表示已被send()发送方法放入到队列中等待传输，但没有发出的UTF-8文本字节数。

WebSocket对象的事件：

open：连接建立时触发。
message：客户端接收服务端数据时触发。
error：通信发生错误时触发。
close：连接关闭时触发。

WebSocket对象的方法：

send()：使用连接发送数据。
close()：关闭连接。

以下示例演示了如何在浏览器创建一个websocket对象，向服务端发送信息，并接收服务端发送的信息。

javascript

<body>
    <label for="message">发送内容：</label>
    <input type="text" name="message" id="message">
    <input type="button" value="发送" id="send" onclick="sendMessage()">
    <input type="button" value="关闭" id="close" onclick="closeConnect()">
    <div>
        <p>接收到的内容：</p>
        <p id="rec"></p>
    </div>
    <script>
        var webSocket = new WebSocket("ws://localhost:8080/ws/test");
        webSocket.onopen = function (event) {
            console.log("连接成功");
        }
        webSocket.onmessage = function (event) {
            const recMsg = event.data;
            console.log("接收到信息：" + recMsg);
            document.getElementById("rec").innerHTML += recMsg + `<br>`;

        }
        webSocket.onclose = function (event) {
            console.log("连接关闭");
        }
        webSocket.onerror = function (event) {
            console.log("连接出现异常");
        }

        function sendMessage() {
            var message = document.getElementById("message").value;
            webSocket.send(message);
        }

        function closeConnect() {
            webSocket.close();
        }
    </script>
</body>

HTML基础 ​

HTML4元素 ​

元素分类 ​

结构元素 ​

内容元素 ​

修饰元素 ​

HTML4属性 ​

核心属性 ​

语言属性 ​

键盘属性 ​

内容属性 ​

其他属性 ​

HTML5元素 ​

语义化结构元素 ​

功能元素 ​

表单元素 ​

HTML5属性 ​

表单属性 ​

链接属性 ​

其他属性 ​

HTML5全局属性 ​

HTML网页的文本设计 ​

标题文本 ​

段落文本 ​

引用文本 ​

强调文本 ​

格式文本 ​

输出文本 ​

缩写文本 ​

插入和删除文本 ​

设置文本方向 ​

标记文本 ​

进度信息 ​

刻度信息 ​

时间信息 ​

联系文本 ​

隔离文本 ​

换行断点 ​

文本注释 ​

HTML中的超链接 ​

URL格式 ​

超链接分类 ​

<a>标签的使用 ​

定义锚点链接 ​

定义热点区域 ​

浮动框架 ​

HTML中的列表 ​

列表的基本结构 ​

无序列表 ​

有序列表 ​

定义列表 ​

菜单列表 ​

HTML中的表格 ​

表格的基础结构 ​

创建表格 ​

简单表格 ​

包含表头的表格 ​

包含标题的表格 ​

结构化的表格 ​

列分组的表格 ​

设置表格属性 ​

设置单元格属性 ​

单元格跨列或跨行显示 ​

HTML中的表单 ​

表单的基本结构 ​

输入型控件<input>标签 ​

<input>标签的属性值 ​

<textarea>多行文本框 ​

选择型控件 ​

选项框（单选框与复选框） ​

下拉框 ​

日期选择器类型 ​

辅助控件 ​

表单控件分组 ​

表单对象提示信息 ​

快捷键 ​

tab访问键 ​

禁用表单控件 ​

datalist元素 ​

keygen元素 ​

HTML基础

HTML4元素

元素分类

结构元素

内容元素

修饰元素

HTML4属性

核心属性

语言属性

键盘属性

内容属性

其他属性

HTML5元素

语义化结构元素

功能元素

表单元素

HTML5属性

表单属性

链接属性

其他属性

HTML5全局属性

HTML网页的文本设计

标题文本

段落文本

引用文本

强调文本

格式文本

输出文本

缩写文本

插入和删除文本

设置文本方向

标记文本

进度信息

刻度信息

时间信息

联系文本

隔离文本

换行断点

文本注释

HTML中的超链接

URL格式

超链接分类

`<a>`标签的使用

定义锚点链接

定义热点区域

浮动框架

HTML中的列表

列表的基本结构

无序列表

有序列表

定义列表

菜单列表

HTML中的表格

表格的基础结构

创建表格

简单表格

包含表头的表格

包含标题的表格

结构化的表格

列分组的表格

设置表格属性

设置单元格属性

单元格跨列或跨行显示

HTML中的表单

表单的基本结构

输入型控件`<input>`标签

`<input>`标签的属性值

`<textarea>`多行文本框

选择型控件

选项框（单选框与复选框）

下拉框

日期选择器类型

辅助控件

表单控件分组

表单对象提示信息

快捷键

tab访问键

禁用表单控件

datalist元素

keygen元素