一、用于框架搭建
1.1.<doctype>元素
注意：该元素的作用：第一，告诉浏览器处理的是html文档；第二，标记文档内容所属的html版本。
<!DOCTYPE html>| 元素类型 | - |
| 局部属性 | - |
| 内容 | - |
| 标签用法 | 单个开始标签 |
| 父元素 | - |
1.2.<head>元素
注意：每个html文档中应当包含一个<head>元素，而<head>元素中应当包含一个<title>元素。
<head><!--该元素包含整个文档的元数据与文档信息-->
<title>This element is necessary!</title>
</head>| 元素类型 | - |
| 局部属性 | - |
| 内容 | 必须有一个<title>元素 |
| 标签用法 | 开始标签和结束标签，内含其他元素 |
| 父元素 | <html> |
1.3.<body>元素
注意：该元素中存放文档的主要内容，总是紧跟在<head>元素之后，是<html>元素的第二子元素。
<body>This is main content.</body>| 元素类型 | - |
| 局部属性 | - |
| 内容 | 所有短语元素和流元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <html> |
1.4.<html>元素
<!DOUCTYPE html>
<html><!--被称作根元素-->
<head>
<title>This is the content on the tab.</title>
</head>
<body>
<p>Here are the main content.</p>
</body>
</html>| 元素类型 | - |
| 局部属性 | manifest |
| 内容 | <head>元素&<body>元素 |
| 标签用法 | 开始标签和结束标签，内含其他元素 |
| 父元素 | - |
二、用于文档说明
2.1.<title>元素
注意：该元素的作用是设置文档的标题或名称，其内容一般放在浏览器的标签上。
| 元素类型 | 元数据 |
| 局部属性 | - |
| 内容 | 文档标题或对文档言简意赅的描述 |
| 标签用法 | 开始标签和结束标签，内含文字 |
| 父元素 | <head> |
2.2.<base>元素
注意：该元素的作用是设置相对URL的解析基准。该元素设置一个基准URL，让html文档中的相对链接在此基础上解析，html文档至少应该包含一个<base>元素；否则，浏览器将会将当前文档的URL认定为所有相对URL的解析基准。
href属性指定了解析文档此后部分中的相对URL要用到的基准URL。
target属性告诉浏览器浏览器该如何如何打开URL。
<html>
<head>
<title>This is an example.</title>
<base href="http://www.midshar.top/"/>
</head>
<body>
<a href="home.html">GO TO MY PAGE.</a>
<!--此处的相对链接会添加在<base>元素后面成为一个完整的URL"http://www.midshar.top/home.html"-->
</body>
</html>| 元素类型 | 元数据 |
| 局部属性 | href、target |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | <head> |
2.3.<meta>元素
注意：该元素的作用是设置文档元数据，每个<meta>元素只能限定一种用途。
name属性设置元数据类型，content属性设置值（可以使用元数据扩展），两者合并指定名/值元数据对。
charset属性用于声明字符编码，属性值一般使用UTF-8。
http-equiv属性用来模拟HTTP标头字段。
<html>
<head>
<base href="http://www.midshar.top/"/><!--设置页面基准URL-->
<title>This is an example.</title>
<meta charset="UTF-8"/><!--声明页面编码-->
<meta name="author" content="RshiX"/><!--页面作者-->
<meta name="description" content="A simple page."/><!--页面主要说明-->
<meta http-equiv="refresh" content="5;http://www.baidu.com"/><!--5秒之后，页面将跳转至百度-->
<meta http-equiv="content-type" content="text/html charset=UTF-8"/><!--声明页面字符编码-->
</head>
<body>
</body>
</html>| 元素类型 | 元数据 |
| 局部属性 | name、content、charset、http-equiv |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | <head> |
2.4.<style>元素
注意：该元素用来定义html文档内嵌的CSS样式，一般地，该元素可以不必放在<head>元素里，一个html文档可以包含多个<style>元素。
type属性可以指定样式类型，它的值总是"text/css"；
scoped属性将定义的样式只作用于该元素的父元素及所有兄弟元素，不存在该属性时将作用于整个文档；
media属性指明文档在何种类型设备下使用该元素中定义的样式，可供选择的值有 all（所有设备）、aural（语音合成器）、braille（盲文设备）、handheld（手持设备）、projection（投影机）、print（打印机）、screen（计算机显示屏）、tty（等宽设备）、tv（电视机）。特别地，该属性可以有以下具体设置：
- (max/min)width、(max/min)height，分别表示浏览器窗口的宽度和高度，单位px；
- (max/min)device-width、(max/min)device-height，分别表示整个设备的宽度和高度，单位px；
- (max/min)resolution，表示设备像素密度，单位dpi/dpcm；
- orientation，表示设备较长边朝向，提供的可选值有portrait和landscape；
- (max/min)aspect-ratio、(max/min)device-aspect-ratio，表示浏览器窗口/设备的像素宽高比；
- (max/min)color、(max/min)monochrome，表示彩色/黑白设备上每个像素占用的二进制数；
- (max/min)color-index，表示设备能够显示的颜色数目；
- scan，表示电视的扫描模式，提供的可选值有progressive和interlace；
- grid，表示设备类型，提供的可选值有0和1(代表网格型设备)。
<html>
<head>
<title>This is an example.</title>
<style type="text/css" media="screen AND (max-width:2000px)"><!--适用于浏览器窗口小于2000像素-->
p{color:red;font-style:italic}
</style>
<style type="text/css" media="print">
p{color:black;font-weght:bold}
</style>
</head>
<body>
<p>This is a simple sentence.</p>
</body>
</html>| 元素类型 | - |
| 局部属性 | media、type、scoped |
| 内容 | CSS样式 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 任何可包含元数据的元素：head、div、article、section、aside、noscript |
2.5.<link>元素
注意：该元素用来在html文档和外部资源之间建立联系。
rel属性说明了html文档页与link元素所关联的资源的关系类型，提供的可选值有 alternate（链接至文档的替代版本）、author（链接至文档作者）、help（链接至说明文档）、icon（指定图标资源）、license（链接至相关许可证）、pingback（指定一个回探服务器）、prefetch（预先获取一个资源）、stylesheet（载入外部样式表）。
type属性说明了所关联资源的MIME类型，如 text/css、image/x-icon。
href属性指定link元素指向的资源URL。
hreflang属性说明所关联资源使用的语言。
media属性说明所关联的内容用于哪种设备。
sizes属性指定图标大小。
<html>
<head>
<title>This is an example.</title>
<link type="text/css" rel="stylesheet" href="mystyle.css"/><!--链接外部样式表-->
<link type="image/x-icon" rel="shortcut icon" href="myweblogo.ico"/><!--添加网站标志-->
<link rel="prefetch" href="http://www.midshar.top/home.html"/><!--预先加载该页面-->
<!--rel属性还有另外一些值:author、help、icon、license、pingback、alternate.-->
</head>
<body>
<p>No text</p>
</body>
</html>| 元素类型 | 元数据 |
| 局部属性 | rel、type、href、hreflang、media、sizes |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | head、noscript |
三、用于脚本编写
3.1.<script>元素
注意：该元素用来在页面中加入脚本，可以在文档中定义脚本或者引用外部文件脚本。
type属性表示所引用脚本类型，对于JS脚本可省略。
src属性指定外部脚本文件的URL，设置了该属性的该元素不能有任何内容。
defer属性可以推迟脚本文件的执行至浏览器解析完html文档所有元素之后，只能用于外部脚本文件，布尔型。
async属性表示异步执行脚本，页面中的脚本可能不会按照定义的次序执行，若脚本使用了其他脚本中定义的函数或值，就不宜使用该属性，布尔型。
charset属性说明外部脚本文件所使用的字符编码。
<html>
<head>
<title>This is an example.</title>
<script defer src="myscript.js"><!--设置了src属性的<script>元素不能有任何内容--></script>
</head>
<body>
<p>I like <span id="change">apples</span> and oranges.</p>
</body>
<!--该例中"myscript.js"是一个外部脚本，用途是查找id为"change"的元素并修改，defer属性将让浏览器在解析完所有的HTML元素后再执行该脚本-->
</html>| 元素类型 | 元数据/短语元素 |
| 局部属性 | defer、async、src、type、charset |
| 内容 | 脚本语言语句或者为空 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含元数据或短语元素的任何元素 |
3.2.<noscript>元素
注意：该元素用来向禁用了JS或浏览器不支持JS的用户显示内容，一个页面可以加入多个<noscript>元素。
<html>
<head>
<title>This is an example.<title>
<noscript>
<h1>You must use the JavaScript to open this Webpage!</h1>
<p>Otherwise,after 5 seconeds the broswer will turn to another Webpage.</p>
<meta http-equiv="refresh" content="5;http://www.midshar.top/home.html"/><!--若浏览器禁用或不支持Javascript，将会出现这些提示信息并在5秒之后跳转至目标网页-->
</noscript>
</head>
<body>
<p>Hello,World!</p>
</body>
</html>| 元素类型 | 元数据/短语元素/流元素 |
| 局部属性 | - |
| 内容 | 短语元素、流元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含元数据、短语元素或流元素的任何元素 |
四、用于文字标记
4.1.<a>元素
注意：该元素用来生成超链接，该超链接可指向外部网页，也可链接相对URL，还可使用全局属性id以"#id"的形式查找并跳转至固定位置，如果查找不成功，浏览器将会查找一个name属性值与之匹配的元素。
href属性用来指向资源的URL。
hreflang属性用来说明所链接的资源所使用的语言。
target属性指定用来打开所链接资源的浏览环境。可供选择的值有：_blank（在新窗口/新标签页打开）、_parent（在父窗框组中打开）、_self（在当前窗口打开——默认行为）、_top（在顶层窗口打开）、<frame>（在指定窗框打开）。
media属性说明所链接资源适用于哪种设备
type属性说明所链接资源的MIME类型，如 text/html。
rel属性说明文档与所链接资源的关系类型。
<html>
<head>
<title>This is an example.</title>
</head>
<body>
<a href="http://www.midshar.top#idname" target="_blank">Go to my Webpage.</a><!--在新标签页打开目标网页并跳转至元素ID名称为idname处-->
</body>
</html>| 元素类型 | 包含短语元素时为短语元素，包含流元素时视作流元素 |
| 局部属性 | href、hreflang、target、media、type、rel |
| 内容 | 短语元素、流元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.2.<b>元素
注意：该元素用来标记一段文字，但不表示强调。通常用于产品名称与标识关键词。
The browser that comes with Windows is the <b>IE</b> browser.<!--该元素表示关键词和产品名称，但是不含强调意味-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.3.<em>元素
注意：该元素用来强调一段文字。
The <em>Wenchuan earthquake</em> occurred in 2008.<!--该元素用于强调-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.4.<i>元素
注意：该元素用来标记一段与周围有本质区别的文字。通常用来标识外文词语、科技术语或某人的想法。
Chinese Kung Fu <i>(中国功夫)</i> is a unique cultural heritage.<!--该元素表示一段文字与周围内容有本质区别,一般用于科技术语、外文词语和心理想法-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.5.<s>元素
注意：该元素用来标记一段内容不再正确。其通用样式是在文本中间添加删除线。
No <s>998</s>, no <s>98</s>, just 9.8.<!--该元素在内容上增加删除线，其呈现形式一般用CSS实现-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.6.<strong>元素
注意：该元素用来标记一段重要文字，其语义性更强。
<strong>Warning!Warning!The tsunami will arrive in ten seconds.</strong><!--该元素表示强调内容，这是一段重要文字！-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.7.<u>元素
注意：该元素用来标记一段文字，使之从周围文本中凸显出来，但并不表示强调或其重要性有所增加。该元素的通用样式是在内容下方添加下划线，它与<a>元素的习惯样式相似，应当尽量避免使用该元素。
There is an <u>underline</u> with the text.<!--容易与可单击链接混淆-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.8.<small>元素
注意：该元素用来表示小好字体内容，常用作免责声明或澄清声明。
I bought twelve apple's<small>(two of them are free)</small>.<!--该元素多用于免责声明或澄清声明-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.9.<sub>元素与<sup>元素
注意：<sub>元素表示下标，<sup>元素表示上标。
If you ask me what is the <sub>WWW</sub>,maybe I should tell you need to search on the <sup>Internet</sup>.<!--<sub>元素表示下标，<sup>元素表示上标-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.10.<br>元素
注意：该元素用来使内容强制换行，应当用在换行也是内容的一部分的情况。
Do not go gentle into that good night,<br>Old age should burn and rave at close of day;<br>Rage, rage against the dying of the light.
<!--该元素其后的内容将在浏览器中下一行显示-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
4.11.<wbr>元素
注意：该元素用来指明可以安全换行的位置。当浏览器窗口小于了当前内容的长度，可以在此换行，但究竟是否换行是由浏览器决定。
This is a very long word:Super<wbr>califragilistic<wbr>expialidocious.<!--该元素位置处可由浏览器决定是否换行，可以将整个长单词划分为几个短片段-->| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
4.12.<code>元素、<var>元素、<samp>元素与<kbd>元素
注意：<code>元素表示计算机代码片段，通常其内容会显示为等宽字体；<var>元素表示编程中的变量；<samp>元素表示程序或计算机系统的输出；<kbd>元素表示用户输入。
<html>
<head>
<title>This is an example.</title>
</head>
<body>
<p><code>var fruits=["apples","oranges","cherries"];<br>
document.writeln("I like"+fruits.length+" fruits");<code>
</p>
<p>The varible in this example is <var>fruits</var>.</p>
<p>The output from the code is:<samp>I like 4 fruits</samp>.</p>
<p>When prompted for my favorite fruit,I typed <kbd>apples</kbd>.</p>
</body>
</html>
<!--各个元素在浏览器中的显示基本一致-->4.13.<abbr>元素
注意：该元素用来表示缩写。
title属性表示该缩写词的完整词语。
The <abbr title="World Wide Web">WWW</abbr> is short for World Wide Web.| 元素类型 | 短语元素 |
| 局部属性 | 全局属性title有特殊含义 |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.14.<dfn>元素
注意：该元素用来表示定义中的术语。
title属性的值应当设置为该术语。
<dfn title="WWW">WWW</dfn>:It is a combination of client/server based information discovery technology and hypertext technology.| 元素类型 | 短语元素 |
| 局部属性 | 全局属性title有特殊含义 |
| 内容 | 文字或一个<abbr>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.15.<q>元素
注意：该元素用来表示自他处引用的内容，通常是一小段内容。
cite属性用来指定引文的URL。
The above definition of the <q cite="https://baike.baidu.com">WWW</q> comes from Baidu.| 元素类型 | 短语元素 |
| 局部属性 | cite |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.16.<cite>元素
注意：该元素用来表示所引用作品的标题，如图书、诗歌、文章、电影、歌曲等的标题。它不能用来引用人物姓名。
The novel <cite>Kong Yiji</cite> is from Lu Xun's collection of short stories <cite>Shouting</cite>.| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.17.<ruby>元素、<rt>元素与<rp>元素
注意：这三个元素通常搭配起来使用。<ruby>元素表示一段包含注音符号的文字，<rt>元素用来标识注音符号，<rp>元素用来标记不支持注音符号特性的浏览器显示在注音符号前后的括号。当浏览器支持注音符号时，<rp>元素及其内容会被忽视，而<rt>元素的内容会作为注音符号显示。
<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
<ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
<ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
<!--支持注音符号的浏览器会忽略<rp>元素的内容,<rt>元素中的注音符号会显示在表意语言上方-->
<!--可注音的元音拼音：ā á ǎ à ō ó ǒ ò ē é ě è ī í ǐ ì ū ú ǔ ù ǖ ǘ ǚ ǜ ü-->4.17.1.<ruby>元素
| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容及<rp>元素、<rt>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.17.2.<rp>元素
| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <ruby>元素 |
4.17.3.<rt>元素
| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <ruby>元素 |
4.18.<bdo>元素
注意：该元素用来指明内容中文字的方向。
dir属性设置文字的方向，可供选择的值有ltr与rtl。
<bdo dir="ltr">From left to right.</bdo><!--文字方向从左至右-->
<bdo dir="rtl">From right to left.</bdo><!--文字方向从右至左-->| 元素类型 | 短语元素 |
| 局部属性 | 无。必须有全局属性dir |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.19.<bdi>元素
注意：该元素用来表示一段出于方向考虑而与其他内容隔离开来的文字，通常适用于要显示内容的文字方向未知的情况。
<p>The direction of this text is from left to right.</p>
<p>
This text will disrupt the layout direction:
<q><bdi>هذا النص يعطل تخطيط الاتجاه.</bdi></q><!--阿拉伯文字-->
</p>| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.20.<span>元素
注意：该元素本身没有任何含义，它用来把CSS的一些属性应用到其内容上。
<p>This is an ordinary text that can be <span>represented</span> by <span> elements.</p>| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.21.<mark>元素
注意：该元素用来表示因为与某段上下文相关而被突出显示的一段文字。
<p>
I would like a <mark>pair</mark> of <mark>pears</mark>.
</p>| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
4.22.<ins>元素与<del>元素
注意：<ins>元素用来表示在文档中添加的文字；<del>元素用来表示在文档中删除的文字。
cite属性用来指定解释添加或删除相关文字原因的文档的URL。
datetime属性用来设置修改时间。
<p>You can use the <ins><ins> element</ins> to insert and the <del><del> element</del> to delete.</p>
<!--<ins>元素会在内容上添加下划线，<del>元素会在内容上增加删除线。-->| 元素类型 | 包含短语元素时为短语元素，包含流元素时视作流元素 |
| 局部属性 | cite、datetime |
| 内容 | 短语内容或流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素或流元素的任何元素 |
4.23.<time>元素
注意：该元素用来表示时间或日期。
datetime属性以RFC3339规定的格式指定日期或时间。
pubdate属性表示整个html文档或离该元素最近的<article>元素的发布日期，布尔型。
<p>
I still remember the night of <time datetime="2023-3-11">March 11, 2023</time>, <time datetime="23:00">around 11 pm</time>, which was an unforgettable moment for me.
</p>| 元素类型 | 短语元素 |
| 局部属性 | datetime、pubdate |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素或流元素的任何元素 |
五、用于内容组织
5.1.<p>元素
注意：该元素用来表示段落，这是最普通的文本形式，段落与段落之间会存在一定间距。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>This is an example.</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.2.<div>元素
注意：该元素与<span>元素一样，没有具体含义。但是可以使用它为内容建立结构并赋予其含义，并添加CSS样式（该元素应当作为实在没有适当语义性元素的情况下的备选元素）。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>This is an example.</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<div id="partA">
<p>Do not go gentle into that good night,</p>
<p>Old age should burn and rave at close of day;</p>
<p>Rage, rage against the dying of the light.</p>
<p>Though wise men at their end know dark is right,</p>
<p>Because their words had forked no lightning they</p>
</div>
<div id="partB">
<p>Do not go gentle into that good night.</p>
<p>Good men, the last wave by, crying how bright</p>
<p>Their frail deeds might have danced in a green bay,</p>
<p>Rage, rage against the dying of the light.</p>
<p>Wild men who caught and sang the sun in flight,</p>
<p>And learn, too late, they grieved it on its way,</p>
</div>
<div id="partC">
<p>Do not go gentle into that good night.</p>
<p>Grave men, near death, who see with blinding sight</p>
<p>Blind eyes could blaze like meteors and be gay,</p>
<p>Rage, rage against the dying of the light.</p>
<p>And you, my father, there on the sad height,</p>
<p>Curse, bless me now with your fierce tears, I pray.</p>
</div>
<div id="partD">
<p>Do not go gentle into that good night.</p>
<p>Rage, rage against the dying of the light.</p>
</div>
</body>
</html>
<!--正文内容来自《Do not go gentle into that good night》，作者 Dylan Thomas.-->| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.3.<pre>元素
注意：该元素用来表示预先编排好格式的内容，它会让浏览器阻止合并空白字符，让我们编写的源文档的格式予以保留。通常与<code>等一些格式具有重要意义的元素搭配使用。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>This is an example.</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<p>I will display a section of JavaScript code:</p>
<pre>
<code>
var fruits = [ "apples" , "oranges" , "mangoes" , "cherries" ] ;
for (var i = 0 ; i < fruits.length ; i++)
{
document.writeln ("I like" + fruits.[i]);
}
</code><!--将按照本源码的格式在浏览器页面展示内容-->
</pre>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.4.<blockquote>元素
注意：该元素与<q>元素类似，均表示引自他处的内容，但该元素表示的是引用一大段内容。浏览器会忽略该元素中内容的格式。
cite属性用来指定引文的URL。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>Do not go gentle into that good night</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Do not go gentle into that good night</h1>
<div id="partA">
<blockquote>
<p>Do not go gentle into that good night,</p>
<p>Old age should burn and rave at close of day;</p>
<p>Rage, rage against the dying of the light.</p>
<p>Though wise men at their end know dark is right,</p>
<p>Because their words had forked no lightning they</p>
</blockquote>
</div>
<div id="partB">
<blockquote>
<p>Do not go gentle into that good night.</p>
<p>Good men, the last wave by, crying how bright</p>
<p>Their frail deeds might have danced in a green bay,</p>
<p>Rage, rage against the dying of the light.</p>
<p>Wild men who caught and sang the sun in flight,</p>
<p>And learn, too late, they grieved it on its way,</p>
</blockquote>
</div>
<div id="partC">
<blockquote>
<p>Do not go gentle into that good night.</p>
<p>Grave men, near death, who see with blinding sight</p>
<p>Blind eyes could blaze like meteors and be gay,</p>
<p>Rage, rage against the dying of the light.</p>
<p>And you, my father, there on the sad height,</p>
<p>Curse, bless me now with your fierce tears, I pray.</p>
</blockquote>
</div>
<div id="partD">
<blockquote>
<p>Do not go gentle into that good night.</p>
<p>Rage, rage against the dying of the light.</p>
</blockquote>
</div>
</body>
</html>
<!--正文内容来自《Do not go gentle into that good night》，作者 Dylan Thomas.-->| 元素类型 | 流元素 |
| 局部属性 | cite |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.5.<hr>元素
注意：该元素用来表示段落级别的主题分隔，通常用作故事中地点的改变以及工具书中某一部分主题的改变，该元素的默认样式为一条横线。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>English poetry collection</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Rain</h1>
<blockquote>
<p>Rain is falling all around,</p>
<p>It falls on field and tree,</p>
<p>It rains on the umbrella here,</p>
<p>And on the ships at sea.</p>
</blockquote>
<hr/>
<h1>At The Seaside</h1>
<blockquote>
<p>When I was down beside the sea,</p>
<p>A wooden spade they gave to me,</p>
<p>To dig the sandy shore.</p>
<p>The holes were empty like a cup,</p>
<p>In every hole the sea camp up,</p>
<p>Till it could come no more.</p>
</blockquote>
<hr/>
<h1>O Sailor, Come Ashore</h1>
<h2>(Part I)</h2>
<blockquote>
<p>O sailor, come ashore</p>
<p>What have you brought for me?</p>
<p>Red coral , white coral,</p>
<p>Coral from the sea.</p>
</blockquote>
<h2>(Part II)</h2>
<blockquote>
<p>I did not dig it from the ground</p>
<p>Nor pluck it from a tree;</p>
<p>Feeble insects made it</p>
<p>In the stormy sea.</p>
</blockquote>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含流元素的任何元素 |
5.6.<ol>元素、<ul>元素与<li>元素
注意：<ol>元素表示有序列表，<ul>元素表示无序列表，<li>元素表示列表项。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>Recipe</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Scrambled eggs with tomatoes</h1><!--西红柿炒蛋的食谱与制作步骤-->
<p><strong>Ingredients:</strong></p>
<ul>
<li>tomato</li>
<li>egg</li>
<li>scallion</il>
<li>starch water</li>
<li>lard</li>
<li>sugar</li>
<li>salt</li>
<li>onion oil</li>
</ul>
<p><strong>Production procedure:</strong></p>
<ol>
<li>Cross the tomatoes and soak them in freshly boiled water for 10 minutes so they can be peeled. Peel and cut into small pieces.</li>
<li>Break the eggs into a bowl.</li>
<li>Fill half an egg shell with warm water and pour it into the egg four times in total.</li>
<li>Add a little salt.</li>
<li>Add a little starch water (starch: water = 1:2) to make the eggs more lubricated. Stir well.</li>
<li>Heat the oil under the pan and heat it.</li>
<li>Heat up, wait for the oil to be hot, then lay the egg mixture, lightly spread, do not break too hard.</li>
<li>In chunks, put on a plate.</li>
<li>Wok hot, under the lard.</li>
<li>Boil the tomatoes until they are sandy.</li>
<li>Add white sugar.</li>
<li>Add salt (like light soy sauce, can be changed to light soy sauce), stir fry.</li>
<li>Add egg cubes and lightly fry.</li>
<li>Add shallot oil and stir well.</li>
<li>Plate. Sprinkle with scallions. Done.</li>
</ol>
</body>
</html>5.6.1.<ol>元素
注意：在<ol>元素中，有三个局部属性。
start属性设定列表首项的编号值，不使用该属性默认首项编号为1。
type属性用来设定编号的类型，可供选择的值有1（十进制）、a（小写拉丁字母）、A（大写拉丁字母）、i（小写罗马数字）、I（大写罗马数字）。
reversed属性表示列表将采用倒序编号，布尔型。
| 元素类型 | 流元素 |
| 局部属性 | start、reversed、type |
| 3内容 | 零个或多个<li>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.6.2.<ul>元素
注意：在<ul>元素中，每个列表项前都有一个项目符号，可通过CSS更改。
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 零个或多个<li>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.6.3.<li>元素
注意：<li>元素与<ol>元素、<ul>元素与<menu>元素搭配使用，它表示父元素中的一个列表项。
value属性可以用来生成不连续的有序列表。
| 元素类型 | 流元素 |
| 局部属性 | value（仅当父元素是<ol>元素时） |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <ol>元素、<ul>元素与<menu>元素 |
5.7.<dl>元素、<dt>元素与<dd>元素
注意：<dl>元素表示一个说明列表；<dt>元素表示说明列表中的术语；<dd>元素表示说明列表中的定义。一个<dt>元素可以包含多个<dd>元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>Example</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<dl>
<dt>OpenAI</dt>
<dd>An artificial intelligence research company founded in the United States, has a core purpose of "achieving a secure Artificial General Intelligence (AGI)" that benefits humanity.</dd>
<dt>MicroSoft</dt>
<dd>An American multinational technology company founded on April 4, 1975. We develop, manufacture, license and provide a wide range of computer software services.</dd>
<dt>Netscape</dt>
<dd>Netscape is the common abbreviation for Netscape Communications Corporation. It was once an American computer services company, best known for producing the web browser of the same name, Netscape Navigator. In November 1998, Netscape was acquired by AOL.</dd>
<dt>Lenovo</dt>
<dd>Lenovo Group is a global technology company founded in China with a presence in 180 markets. Lenovo focuses on globalization and continues to develop innovative technologies.</dd>
</dl>
</body>
</html>5.7.1.<dl>元素
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.7.2.<dt>元素与<dd>元素
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <dl>元素 |
5.8.<figure>元素与<figcaption>元素
注意：<figure>元素定义一个插图，也可以表示某种图标或图示；<figcaption>元素表示插图的标题，通常它包含在<figure>元素中，并且必须是<figure>元素的第一个或最后一个子元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>Example</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<figure>
<figcaption>
<strong>Open source software as defined by the software development industry must meet certain conditions:</strong>
</figcaption>
<ul>
<li>Programs must be distributed free of charge (but can be part of a package sold).</li>
<li>The source code must be provided.</li>
<li>Anyone must be allowed to modify the source code.</li>
<li>You can redistribute the modified version.</li>
<li>The license must not require the exclusion of other software or interfere with the operation of other software.</li>
</ul>
</figure>
</body>
</html>5.8.1.<figure>元素
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容，可包含一个<figcaption>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
5.8.2.<figcaption>元素
| 元素类型 | - |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <figure>元素 |
六、用于文档分节
6.1.<h1>元素~<h6>元素
注意：该元素集定义了一套标题体系，从<h1>元素~<h6>元素字号逐渐变小。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>Example</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>I'm a class one title</h1><!-- 一级标题 -->
<h2>I'm a secondary title</h2><!-- 二级标题 -->
<h3>I'm a tertiary title</h3><!-- 三级标题 -->
<h4>I'm a level four title</h4><!-- 四级标题 -->
<h5>I'm a level five title</h5><!-- 五级标题 -->
<h6>I'm a level six title</h6><!-- 六级标题 -->
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <hgroup>元素或可以包含流元素的任何元素，<address>元素除外 |
6.2.<hgroup>元素
注意：该元素用来隐藏子标题。它将几个标题元素作为一个整体处理，让其在html文档大纲中不再显示。它在标题体系中的位置取决于它的第一个标题子元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>hgroup element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<hgroup style="font-weight:bolder;font-family: sans-serif;"><!--<hgroup>元素将几个不同级别的标题标记起来，在大纲视图中只会显示<hgroup>元素中的第一个标题-->
<h1>Discussion on the audit of financial special funds under the background of full coverage of audit</h1>
<h2>-- Take XX County as an example</h2>
</hgroup>
<h2>Preface</h2>
<h3>Research Background</h3>
<h3>Significance of research</h3>
<h2>Theoretical basis for realizing full audit coverage of special financial funds</h2>
<h3>Meaning of related nouns</h3>
<h4>What we mean by full audit coverage</h4>
<h4>The meaning of auditing special financial funds</h4>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | <h1>元素~<h6>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
6.3.<section>元素
注意：该元素用来表示文档中的一节，它没有默认样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>section element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<section id="time"><!--该元素对内容的显示布局并没有任何影响-->
<h1>About time</h1>
<p>There are three things here:</p>
<ol>
<li>Definition and origin of time</li>
<li>The concept of time in classical physics</li>
<li>Time distortion in relativity</li>
</ol>
</section>
<section id="space">
<h1>About space</h1>
<p>There are three points here,too:</p>
<ol>
<li>Definition and characteristics of space</li>
<li>Application of geometry to space research</li>
<li>Quantum mechanics challenges the concept of space</li>
</ol>
</section>
<section id="Universe">
<h1>About the Universe</h1>
<p>It includes:</p>
<ol>
<li>The Big Bang theory and its implications</li>
<li>Galaxy formation and evolution</li>
<li>Black holes, dark energy and other unsolved mysteries</li>
</ol>
</section>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | <style>元素和流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，<address>元素除外 |
6.4.<header>元素与<footer>元素
注意：<header>元素表示首部，<footer>元素表示尾部。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>footer element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader" style="text-align: center;background-color: antiquewhite;">
<p style="margin: 0px;font: italic bolder 25px/30px Georgia, serif;">I'm going to write an article about science called Genesis.</p>
<p style="text-decoration:overline underline;margin: 5px;font: italic medium 10px/25px Arial,sans-serif;"><small><time datetime="2023-11-4">2023/10/31</time> Tuesday</small></p>
<footer id="mypagemainfooter" style="text-align: center;font-size: x-small;margin: 130px 0px 0px 0px;background-color:rgb(183, 182, 182)">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>6.4.1.<header>元素
注意：<header>元素通常包含刊头、徽标、导航、logo等内容。可以表示html文档的首部，也可以表示<section>元素的首部。
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，不能是<address>元素、<footer>元素与其他<header>元素 |
6.4.2.<footer>元素
注意：<footer>元素通常包含总结信息、作者介绍、版权信息、友情链接、徽标、免责声明等。同样地，可以表示html文档的尾部，也可以表示<section>元素的尾部。
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，不能是<address>元素、<footer>元素与其他<header>元素 |
6.5.<nav>元素
注意：该元素表示文档中的一个导航区域。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>nav element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader">
<p>I'm going to write an article about science called Genesis.</p>
<p><small><time datetime="2023-11-4">2023/10/31</time> Tuesday</small></p>
</header>
<nav id="mypagemenu">
<ul>
<li style="display: inline;">Home</li>
<li style="display: inline;">Comprehensive area</li>
<li style="display: inline;">Q&A area</li>
<li style="display: inline;">Resource area</li>
<li style="display: inline;">Mixed area</li>
</ul>
</nav>
<footer id="mypagemainfooter">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，不能是<address>元素 |
6.6.<article>元素
注意：该元素代表html文档中一段独立成篇的内容，例如：一条博客、一篇文章或者一则日记。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>article element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader">
<p>I'm going to write an article about science called Genesis.</p>
</header>
<article>
<h1>Big data</h1>
<p>refers to the amount of data involved that is too large to be captured, managed, processed, and collated into information that can help enterprises make more positive decisions in a reasonable time by mainstream software tools. In The Age of Big Data by Victor Mayer-Schoenberger and Kenneth Cukier, big data refers to the use of all data for analysis, rather than taking shortcuts such as random analysis (sampling surveys). The 5V characteristics of big data (IBM) : Volume, Velocity, Variety, Value, Veracity.</p>
</article>
<footer id="mypagemainfooter">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | <style>元素和流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，不能是<address>元素 |
6.7.<aside>元素
注意：该元素用来表示与周边内容沾边的内容，类似于书籍或者杂志中的侧栏。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>aside element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader">
<p>I'm going to write an article about science called Genesis.</p>
</header>
<aside id="advertisement">
<p>Here is an advertisement sidebar, is recruiting advertisers, welcome to join!</p>
</aside>
<footer id="mypagemainfooter">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | <style>元素和流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素，不能是<address>元素 |
6.8.<address>元素
注意：该元素用来表示文档或<article>元素的联系信息，它不能用来表示html文档或文章的联系信息之外的地址。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>footer element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader">
<p>I'm going to write an article about science called Genesis.</p>
</header>
<aside id="advertisement">
<p>Here is an advertisement sidebar, is recruiting advertisers, welcome to join!</p>
<address>No. XXX, XX Street, XX District, XX City, XX Province.</address><!--默认样式为斜体文本-->
</aside>
<footer id="mypagemainfooter">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 流内容，不包括<h1>~<h6>元素、<header>元素、<footer>元素、<section>元素、<nav>元素、<article>元素与<aside>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
6.9.<details>元素与<summary>元素
注意：这两个元素均用来表示一个详情区域。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>details element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<header id="mypagemainheader">
<p>I'm going to write an article about science called Genesis.</p>
</header>
<section>
Information technology is a general term for various technologies used primarily to manage and process information. It mainly applies computer science and communication technology to design, develop, install and implement information systems and application software. It is also often referred to as information and communication technology.
<details>
<summary>Including:</summary>
Sensing technology, computer and intelligence technology, communication technology and control technology.
</details>
</section>
<footer id="mypagemainfooter">
©2023,Midshar.top's Personal Page.<br/>All trademarks and registered trademarks appearing on this site are the properlty of their respective owners.
</footer>
</body>
</html>6.9.1.<details>元素
注意：该元素在html文档中生成一个区域，用户可以展开它了解更多详情。<details>元素通常包含一个<summary>元素。
| 元素类型 | 流元素 |
| 局部属性 | open |
| 内容 | 流内容与<summary>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
6.9.2.<summary>元素
注意：该元素包含在<details>元素里，表示为该详情区域生成一个说明标签。
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <details>元素 |
七、用于表格构建
7.1.<table>元素、<tr>元素与<td>元素
注意：这三个元素是基本的表格元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>table element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Which fruits do you like?</h1>
<table>
<tr>
<td>Apples</td>
<td>Oranges</td>
<td>lemons</td>
</tr>
<tr>
<td>Peaches</td>
<td>Banana</td>
<td>Watermelon</td>
</tr>
<tr>
<td>Litchi</td>
<td>Pears</td>
<td>Mango</td>
</tr>
</table>
</body>
</html>7.1.1.<table>元素
注意：<table>元素是表格的核心元素，它表示html文档中的表格。表格的长度与宽度可以跟随内容自动扩展，也可以手动调整。
border属性用来设置表格外边框的宽度。可设置为整数或者空字符串("")
| 元素类型 | 流元素 |
| 局部属性 | border |
| 内容 | <caption>元素、<colgroup>元素、<thead>元素、<tbody>元素、<tfoot>元素、<tr>元素、<th>元素和<td>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
7.1.2.<tr>元素
注意：该元素用来表示表格的行。在html文档中，表格是基于行的，每个行必须单独标记。
| 元素类型 | 流元素 |
| 局部属性 | - |
| 内容 | 一个或多个<th>元素或<td>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素、<thead>元素、<tbody>元素与<tfoot>元素 |
7.1.3.<td>元素
注意：该元素用来表示表格中的单元格。
colspan属性表示合并列，其值为整数数字，代表需要合并的列数。
rowspan属性表示合并行，其值为整数数字，代表需要合并的行数。
headers属性表示与该单元格的相关联的<th>元素，它的值可以被设置为一个或多个<th>元素的id属性值。
| 元素类型 | 流元素 |
| 局部属性 | colspan、rowspan、headers |
| 内容 | 流内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <tr>元素 |
7.2.<th>元素
注意：该元素用来表示表头的单元格，可以用来区分数据和对数据的说明。在同一行中，<td>元素与<th>元素可以同时使用。
colspan属性表示合并列，其值为整数数字，代表需要合并的列数。
rowspan属性表示合并行，其值为整数数字，代表需要合并的行数。
headers属性表示与该单元格的相关联的<th>元素，它的值可以被设置为一个或多个<th>元素的id属性值。
scope属性表示将两个单元格规定为行/列表头或行组/列组表头，该属性没有视觉效果，仅可通过屏幕阅读器使用。可供选择的值有：col（表示列的表头）、row（表示行的表头）、colgroup（表示列组的表头）、rowgroup（表示行组的表头）。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>th element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Which fruits do you like?</h1>
<table>
<tr><!--标题行-->
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
<tr><!--数据行-->
<td>Apples</td>
<td>Oranges</td>
<td>lemons</td>
</tr>
</table>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | colspan、rowspan、headers和scope |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <tr>元素 |
7.3.<tbody>元素、<thead>元素与<tfoot>元素
注意：<tbody>元素表示构成表格的全体行（除开标题行与表脚行），<thead>元素表示表格的标题行，<tfoot>元素表示表格的表脚行。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>tfoot element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<h1>Which do you like?</h1>
<table cellspacing="0px" width="50%" height="100px">
<thead><!--表头-->
<tr>
<th>Species</th>
<th>Tom</th>
<th>Lucy</th>
<th>Bob</th>
<th>Jack</th>
</tr>
</thead>
<tbody><!--表格正文数据-->
<tr>
<th>Fruits</th>>
<td>Oranges</td>
<td>Peaches</td>
<td>Apples</td>
<td>Strawberries</td>
</tr>
<tr>
<th>Vegetables</th>
<td>Onions</td>
<td>Tomatoes</td>
<td>Potatoes</td>
<td>Broccoli</td>
</tr>
<tr>
<th>Meat</th>
<td>Fish</td>
<td>Beef</td>
<td>Pork</td>
<td>Chicken</td>
</tr>
</tbody>
<tfoot><!--表脚-->
<tr>
<th>Species</th>
<th>Tom</th>
<th>Lucy</th>
<th>Bob</th>
<th>Jack</th>
</tr>
</tfoot>
</table>
</body>
</html>7.3.1.<tbody>元素
| 元素类型 | - |
| 局部属性 | - |
| 内容 | <tr>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素 |
7.3.2.<thead>元素
注意：如果没有<thead>元素，除开<tfoot>元素之外的内容都会被视为<tbody>元素中的部分。
| 元素类型 | - |
| 局部属性 | - |
| 内容 | <tr>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素 |
7.3.3.<tfoot>元素
注意：该元素出现在<tbody>元素与<tr>元素前后都可以。
| 元素类型 | - |
| 局部属性 | - |
| 内容 | <tr>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素 |
7.4.<caption>元素
注意：该元素用来为表格定义一个标题并将其与表格关联起来。一个表格只能包含一个<caption>元素，无论它放在哪个位置，它的内容总是会默认地显示在表格的上方。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>caption element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<table cellspacing="0px" width="50%" height="100px">
<caption >Which food do you like?</caption><!--表格标题-->
<thead>
<tr>
<th>Species</th>
<th>Tom</th>
<th>Lucy</th>
<th>Bob</th>
<th>Jack</th>
</tr>
</thead>
<tbody>
<tr>
<th>Fruits</th>>
<td>Oranges</td>
<td>Peaches</td>
<td>Apples</td>
<td>Strawberries</td>
</tr>
<tr>
<th>Vegetables</th>
<td>Onions</td>
<td>Tomatoes</td>
<td>Potatoes</td>
<td>Broccoli</td>
</tr>
<tr>
<th>Meat</th>
<td>Fish</td>
<td>Beef</td>
<td>Pork</td>
<td>Chicken</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Species</th>
<th>Meat</th>
<th>Fruits</th>
<th>Meat</th>
<th>Vegetables</th>
</tr>
</tfoot>
</table>
</body>
</html>| 元素类型 | - |
| 局部属性 | - |
| 内容 | 流内容（<table>元素除外） |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素 |
7.5.<colgroup>元素与<col>元素
注意：<colgroup>元素代表一组列，<col>元素代表列。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>colgroup&col element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<table cellspacing="0px" width="50%" height="100px">
<caption >Which food do you like?</caption>
<!-- <colgroup>元素与<col>元素并用。用<col>元素的span属性指明代表列数，不设置span属性代表一列。 -->
<colgroup id="colGroupOne">
<col id="colOne">
<col id="colTwo&colThree" span="2">
</colgroup>
<!-- <colgroup>元素单用，用span属性指明代表列数。 -->
<colgroup id="colGroupTwo" span="2"></colgroup>
<thead>
<tr>
<th>Species</th>
<th>Tom</th>
<th>Lucy</th>
<th>Bob</th>
<th>Jack</th>
</tr>
</thead>
<tbody>
<tr>
<th>Fruits</th>>
<td>Oranges</td>
<td>Peaches</td>
<td>Apples</td>
<td>Strawberries</td>
</tr>
<tr>
<th>Vegetables</th>
<td>Onions</td>
<td>Tomatoes</td>
<td>Potatoes</td>
<td>Broccoli</td>
</tr>
<tr>
<th>Meat</th>
<td>Fish</td>
<td>Beef</td>
<td>Pork</td>
<td>Chicken</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Species</th>
<th>Meat</th>
<th>Fruits</th>
<th>Meat</th>
<th>Vegetables</th>
</tr>
</tfoot>
</table>
</body>
</html>7.5.1.<colgroup>元素
注意：应用到该元素上的样式具体程度低于应用到<tr>元素、<td>元素与<th>元素的样式。不规则的列（如利用colspan属性合并列）计入首列。该元素的影响范围覆盖了列中所有的单元格，所以该元素无法用作更具体的选择器的基础）。
span属性指定了该元素负责的列数。
| 元素类型 | - |
| 局部属性 | span |
| 内容 | <col>元素（未设置col属性时） |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <table>元素 |
7.5.2.<col>元素
注意：若<colgroup>元素不利用span属性指定列数，则可以利用该元素指定，每个该元素代表一列。
span属性可以设置表示负责的列数。
| 元素类型 | - |
| 局部属性 | span |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | <colgroup>元素 |
八、用于表单构建
8.1.<form>元素、<input>元素与<button>元素
注意：这三个元素是基本的表单元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>form element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form action="http://www.baidu.com/"><!--简单的表单三要素-->
<input type="text"/> <button type="button">Touch</button>
</form>
</body>
</html>8.1.1.<form>元素
注意：该元素表示html页面上的表单。
action属性说明了用户提交表单时浏览器应该把用户数据发送到什么地方，若不设置该属性，浏览器将会把表单数据发送到用以加载该html文档的URL。
method属性用来指定将表单数据发送到服务器的HTTP方法，可选值有"GET"和"POST"。GET请求用于安全交互，同一个请求可以发送任意多次而不会产生额外的作用，应该用于只读信息；POST请求用于不安全交互，提交请求时会导致一些状态的改变，可用于会改变应用程序状态的各种操作。Node.js请求只响应POST请求。
enctype属性指定浏览器对发送给服务器的数据采用的编码方式。可选值有三个：application/x-www-form-urlencoded，默认编码方式，不能上传文件；multipart/form-data，用来上传文件；text/plain，因浏览器而异。
autocomplete属性用来控制表单的自动完成功能。可选值有"on"与"off"。
target属性用来指定表单反馈信息的目标显示位置，一般是用反馈页面替换原页面。它的可选值有：_blank（反馈信息显示在新窗口/标签页）、_parent（反馈信息显示在父窗框组中）、_self（反馈信息显示在当前窗口，默认行为）、_top（反馈信息显示在顶层窗口）、_<frame>（反馈信息显示在指定窗框）。
name属性用来设置表单名称，该名称必须是唯一的。提交表单时，name属性值不会发送给服务器。
novalidata属性表示用户在提交表单时不会进行数据验证，布尔属性。
accept-charset属性规定服务器处理表单数据接受的字符集。
| 元素类型 | 流元素 |
| 局部属性 | action、method、enctype、name、accept-charset、novalidate、target和autocomplete |
| 内容 | 流内容（主要是<label>元素与<input>元素） |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素（<form>元素除外） |
8.1.2.<input>元素
注意：该元素用来收集用户输入的数据。
autofocus属性用来聚焦某个<input>元素，该属性只能用在一个<input>元素上，布尔型。
disabled属性用来禁用单个<input>元素，布尔型。
name属性定义了<input>元素的名称，只有设置了name属性的表单元素在提交时才能传递它们的值。
type属性规定<input>元素的类型，默认情况下是text类型。
form属性指定该元素绑定的表单，其值应当是<form>元素的id值。
| 元素类型 | 短语元素 |
| 局部属性 | type、name、disabled、form等 |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
8.1.3.<button>元素
注意：该元素用来告诉浏览器所有数据已经输入完毕。当它没有设置任何属性时，其默认作用是告诉浏览器把用户输入的数据提交给服务器。
type属性指明<button>元素的类型。可选值有：
- submit：提交表单，默认行为。若设置为该类型，有以下额外属性用来覆盖或补充<form>元素的设置：form（指定按钮关联的表单）、formaction（另行指定表单要提交的URL）、formenctype（另行指定表单的编码方式）、formmethod（另行指定表单的HTTP方式）、formtarget（另行指定表单反馈信息的显示位置）、formnovilidate（另行指定是否应执行客户端数据检查）。
- reset：重置表单，无额外属性。
- button：表示纯按钮，没有任何作用。
name属性用来规定按钮的名称。
disabled属性表示应该禁用该按钮，布尔型。
form属性指定该元素绑定的表单，其值应当是<form>元素的id值。
value属性规定按钮的初始值，可由脚本进行修改。
autofocus属性用来自动聚焦该元素。
| 元素类型 | 短语元素 |
| 局部属性 | type、name、disabled、form、value、autofocus等 |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
8.2.<label>元素
注意：该元素用来为表单中的每个元素提供说明。
for属性规定与该元素绑定的表单元素，需要与元素的id属性关联。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>label element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form>
<p>Please Fill The Blank:</p>
<p><label for="name">Your Name:<input type="text" id="name"/></label></p>
<p><label for="sex">Your Sex:<input type="text" id="sex"/></label></p>
<p><label for="birth">Your Date of Birth:<input type="text" id="birth"/></label></p>
<p><label for="career">Your Career:<input type="text" id="career"/></label></p>
<hr/>
</form>
</body>
</html>| 元素类型 | 短语元素 |
| 局部属性 | for、form |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
8.3.<fieldset>元素与<legend>元素
注意：<fieldset>元素可以将一些元素组织起来，通常会用一个外边框包围这些元素。在开头可以包含一个<legend>元素。<legend>元素用来表示一个说明标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>fieldset&legend element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form>
<p>Please Fill The Blank:</p>
<p><label for="name">Your Name:<input type="text" id="name"/></label></p>
<p><label for="sex">Your Sex:<input type="text" id="sex"/></label></p>
<p><label for="birth">Your Date of Birth:<input type="text" id="birth"/></label></p>
<p><label for="career">Your Career:<input type="text" id="career"/></label></p>
<hr/>
<fieldset style="line-height: 30px;">
<legend>About Your Phone</legend>
Do you have a smart phone? <input type="text" placeholder="Yes"/><br/>
What brand is your smartphone? <input type="text" placeholder="iPhone"/><br/>
How much it cost? <input type="text" placeholder="$600"/>
</fieldset>
</form>
</body>
</html>8.3.1.<fieldset>元素
注意：该元素用来组织一批内容。
disabled属性可以一次性禁用多个<input>元素，布尔型。
name属性用来指定该元素的名称。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
| 元素类型 | 流元素 |
| 局部属性 | name、form、disabled |
| 内容 | 流内容（开头可以包含一个<legend>元素） |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
8.3.2.<legend>元素
注意：该元素必须是<fieldset>元素的第一个子元素，它代表一个说明标签。
| 元素类型 | - |
| 局部属性 | - |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <fieldset>元素 |
8.4.<datalist>元素与<option>元素
注意：<datalist>元素用来提供一批可供选择的值，每个<option>元素表示一个可供用户选择的值。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>datalist&option element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form>
<p>Please Fill The Blank:</p>
<p><label for="name">Your Name:<input type="text" id="name"/></label></p>
<p><label for="sex">Your Sex:<input type="text" id="sex"/></label></p>
<p><label for="birth">Your Date of Birth:<input type="text" id="birth"/></label></p>
<p><label for="career">Your Career:<input type="text" id="career"/></label></p>
<p><label for="tel">Your Tel:<input type="text" id="tel"/></label></p>
<p><label for="address">Your Address:<input type="text" id="address"/></label></p>
<hr/>
<fieldset style="line-height: 30px;">
<legend>About Your Phone</legend>
Do you have a smart phone? <input type="text" placeholder="Yes"/><br/>
What brand is your smartphone? <input type="text" placeholder="iPhone"/><br/>
How much it cost? <input type="text" placeholder="$600"/>
</fieldset>
<fieldset style="line-height: 30px;">
<legend>About Your Wishes</legend>
What brand do you want to change? <input type="text" list="phonelist"/><br/><!--list属性值等于<datalist>元素唯一id值-->
What model do you want? <input type="text"/><br/>
How much you are willing to pay for it? $<input type="number"/>
</fieldset>
<datalist id="phonelist"><!--可供选择的选项列表-->
<option value="huawei">HUAWEI</option>
<option value="xiaomi">XIAOMI</option>
<option value="meizu">MEIZU</option>
<option value="oneplus">ONEPLUS</option>
<option value="oppo">OPPO</option>
<option value="vivo">VIVO</option>
</datalist>
</form>
</body>
</html>8.4.1.<datalist>元素
| 元素类型 | 短语元素 |
| 局部属性 | - |
| 内容 | <option>元素和短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
8.4.2.<option>元素
注意：该元素用来定义下拉列表中的一个选项（一个条目）。
value属性用来定义送往服务器的选项值。
label属性定义标签选项显示的内容。
selected属性规定默认情况下处于选中状态的值，布尔型。
disabled属性规定此选项为禁用状态，布尔型。
| 元素类型 | - |
| 局部属性 | value、label、selected与disabled |
| 内容 | 字符数据 |
| 标签用法 | 开始标签和结束标签或虚元素形式 |
| 父元素 | <datalist>元素、<select>元素与<optgroup>元素 |
8.5.<select>元素与<optgroup>元素
注意：<select>元素用来生成一个选项列表供用户选择，<optgroup>元素用来给选项分组。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>select&optgroup element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form>
<p>Please Fill The Blank:</p>
<p><label for="name">Your Name:<input type="text" id="name"/></label></p>
<p>
Your Sex:
<select id="sex" name="sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p><label for="birth">Your Date of Birth:<input type="text" id="birth"/></label></p>
<p><label for="career">Your Career:<input type="text" id="career"/></label></p>
<p><label for="tel">Your Tel:<input type="text" id="tel"/></label></p>
<p><label for="address">Your Address:<input type="text" id="address"/></label></p>
<p>
Your Favorite Smartphone Brand:
<select>
<optgroup label="DOMESDIC"><!--该元素可对<option>元素的选项金星分组，label属性设置各组的小标题-->
<option value="OPPO">OPPO</option>
<option value="VIVO">VIVO</option>
<option value="NUBIA">NUBIA</option>
<option value="ONEPLUS">ONEPLUS</option>
<option value="HUAWEI">HUAWEI</option>
<option value="MEIZU">MEIZU</option>
<option value="XIAOMI">XIAOMI</option>
</optgroup>
<optgroup label="ABROAD"><!--该元素可对<option>元素的选项金星分组，label属性设置各组的小标题-->
<option value="IPHONE">IPHONE</option>
<option value="SAMSUNG">SAMSUNG</option>
<option value="XPERIA">XPERIA</option>
<option value="LG">LG</option>
<option value="NOKIA">NOKIA</option>
<option value="SONY">SONY</option>
</optgroup>
</select>
</p>
<hr/>
<fieldset style="line-height: 30px;">
<legend>About Your Phone</legend>
Do you have a smart phone? <input type="text" placeholder="Yes"/><br/>
What brand is your smartphone? <input type="text" placeholder="iPhone"/><br/>
How much it cost? <input type="text" placeholder="$600"/>
</fieldset>
<fieldset style="line-height: 30px;">
<legend>About Your Wishes</legend>
What brand do you want to change? <input type="text" list="phonelist"/><br/><!--list属性值等于<datalist>元素唯一id值-->
What model do you want? <input type="text"/><br/>
How much you are willing to pay for it? $<input type="number"/>
</fieldset>
<datalist id="phonelist"><!--可供选择的选项列表-->
<option value="huawei">HUAWEI</option>
<option value="xiaomi">XIAOMI</option>
<option value="meizu">MEIZU</option>
<option value="oneplus">ONEPLUS</option>
<option value="oppo">OPPO</option>
<option value="vivo">VIVO</option>
</datalist>
</form>
</body>
</html>8.5.1.<select>标签
注意：该元素中的选项更紧凑，适用于选项较多的情况，它可以用来创建下拉列表。
name属性用来定义下拉列表的名称。
disabled属性表示禁用下拉列表，布尔型。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
size属性规定下拉列表中可见选项的数目，其值为整数。
autofocus属性表示自动聚焦到该表单元素，布尔型。
required属性表示用户在提交表单前必须选择一个下拉列表中的选项。
multiple元素表示用户一次性可以选择多个选项，布尔型。
| 元素类型 | 短语元素 |
| 局部属性 | name、disabled、form、size、autofocus、required和multiple |
| 内容 | <option>元素或<optgroup>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
8.5.2.<optgroup>元素
注意：该元素可用来给<option>元素进行编组。
label属性用来为整组选项提供一个小标题。
disabled属性表示禁用该编组内的所有选项。
| 元素类型 | - |
| 局部属性 | label、disabled |
| 内容 | <option>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | <select>元素 |
8.6.<textarea>元素
注意：该元素用来生成多行文本框，可以输入多行文字。
name属性用来对文本区命名。
rows属性用来设置文本区最大行数，cols属性用来设置文本区最大列数。
disablede属性用来禁用该文本区，布尔型。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
readonly属性表示文本区只可读，不可编辑，布尔型。
maxlength属性规定文本区域的最大字符数。
placeholder属性用来给用户展示一段简短的提示。
dirname属性规定提交文本的方向，其值始终为[该元素的name属性值.dir]。
required属性规定文本区域是必填的，布尔型。
wrap属性规定当在表单中提交时，文本区域中的文本如何换行。其值有hard（提交表单时换行，必须设置cols属性值）与soft（提交表单时不换行，默认）。
autofocus属性表示自动聚焦到该元素区域，布尔型。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>textarea element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form>
<p>Please Fill The Blank:</p>
<p><label for="name">Your Name:<input type="text" id="name"/></label></p>
<p>
Your Sex:
<select id="sex" name="sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p><label for="birth">Your Date of Birth:<input type="text" id="birth"/></label></p>
<p><label for="career">Your Career:<input type="text" id="career"/></label></p>
<p><label for="tel">Your Tel:<input type="text" id="tel"/></label></p>
<p><label for="address">Your Address:<input type="text" id="address"/></label></p>
<p>
Your Favorite Smartphone Brand:
<select>
<optgroup label="DOMESDIC">
<option value="OPPO">OPPO</option>
<option value="VIVO">VIVO</option>
<option value="NUBIA">NUBIA</option>
<option value="ONEPLUS">ONEPLUS</option>
<option value="HUAWEI">HUAWEI</option>
<option value="MEIZU">MEIZU</option>
<option value="XIAOMI">XIAOMI</option>
</optgroup>
<optgroup label="ABROAD">
<option value="IPHONE">IPHONE</option>
<option value="SAMSUNG">SAMSUNG</option>
<option value="XPERIA">XPERIA</option>
<option value="LG">LG</option>
<option value="NOKIA">NOKIA</option>
<option value="SONY">SONY</option>
</optgroup>
</select>
</p>
<hr/>
<fieldset style="line-height: 30px;">
<legend>About Your Phone</legend>
Do you have a smart phone? <input type="text" placeholder="Yes"/><br/>
What brand is your smartphone? <input type="text" placeholder="iPhone"/><br/>
How much it cost? <input type="text" placeholder="$600"/>
</fieldset>
<fieldset style="line-height: 30px;">
<legend>About Your Wishes</legend>
What brand do you want to change? <input type="text" list="phonelist"/><br/><!--list属性值等于<datalist>元素唯一id值-->
What model do you want? <input type="text"/><br/>
How much you are willing to pay for it? $<input type="number"/>
</fieldset>
<hr/>
<p>
<label for="idea">
You can write other ideas here:
<textarea id="idea" name="idea" rows="4" cols="180">Your idea:</textarea><!--文本块，每行不超过180字符，不超过4行-->
</label>
</p>
<datalist id="phonelist"><!--可供选择的选项列表-->
<option value="huawei">HUAWEI</option>
<option value="xiaomi">XIAOMI</option>
<option value="meizu">MEIZU</option>
<option value="oneplus">ONEPLUS</option>
<option value="oppo">OPPO</option>
<option value="vivo">VIVO</option>
</datalist>
</form>
</body>
</html>| 元素类型 | 流元素 |
| 局部属性 | name、rows、cols、disabled、form、readonly、maxlength、placeholder、dirname、required、wrap、autofocus |
| 内容 | 文本 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含流元素的任何元素 |
8.7.<output>元素
注意：该元素用来表示计算结果。
name属性用来定义该元素的唯一名称，它在表单提交时使用。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
for属性用来定义输出域的一个或多个元素，它的值为一个或多个元素的 id 列表，以空格分隔，规定计算中使用的元素与计算结果之间的关系。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>output element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<form onsubmit="return false" oninput="res.value=quant.valueAsNumber*price.valueAsNumber">
<fieldset>
<legend>Price Calculator</legend>
<input type="number" placeholder="Quanlity" id="quant" name="quant"/> *
<input type="number" placeholder="Price" id="price" name="price"/> =
<output for="quant name" name="res"></output><!--输出-->
</fieldset>
</form>
</body>
</html>| 元素类型 | 短语元素 |
| 局部属性 | name、for、form |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
8.8.<keygen>元素
注意：该元素用来生成公开/私有密钥对。提交表单时，公钥被发送给服务器，私钥由浏览器保留并存入用户的密钥仓库。
name属性用来定义该元素的唯一名称。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
disabled属性表示禁用该元素，布尔型。
autofocus属性表示自动聚焦到该元素区域，布尔型。
keytype属性用来指定生成密钥对的算法，它只有RSA一个值。
challenge属性用来指定一条与公钥一起发送给服务器的密钥管理口令。
| 元素类型 | 短语元素 |
| 局部属性 | name、form、disabled、keytype、challenge、autofocus |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
九、用于嵌入内容
9.1.<img>元素
注意：该元素用来在html文档中嵌入图像。
src属性用来指定嵌入图像的URL。
alt属性定义了该元素的备用内容，当浏览器无法正确加载图像时，该内容就会显示。
width属性用来指定将要显示图像的宽度，height属性用来指定将要显示图像的高度。
usemap属性用来将图像定义为客户器端图像映射，其值为"#"后紧跟一个name属性值。创建客户端分区响应图时，不需要再用<a>元素来显式创建超链接。
ismap属性用来将图像定义为服务器端图像映射，在图像上点击的位置会附加到URL上，布尔型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>img element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body style="background-color: rgba(227, 238, 238, 0.549);">
<section>
<img src="image/logo/camera(1).png" alt="camera"/>
<img src="image/logo/message(1).png" alt="message"/>
<img src="image/logo/phone(1).png" alt="phone"/>
<img src="image/logo/player(1).png" alt="player"/>
<img src="image/logo/calc(1).png" alt="calc"/>
<img src="image/logo/contact(1).png" alt="contact"/>
<img src="image/logo/weather(1).png" alt="weather"/>
<img src="image/logo/search(1).png" alt="search"/>
</section>
</body>
</html>| 元素类型 | 短语元素 |
| 局部属性 | src、alt、width、height、usemap、ismap |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
9.2.<map>元素与<area>元素
注意：<map>元素用来定义一个客户端图像映射。通常该元素包含一个或多个<area>元素，这些元素各自代表图像上可以被点击的一块区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>map&area element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<section>
<img src="image/logo/calc(1).png" usemap="#calc" alt="calc"/>
</section>
<map id="calc">
<area href="addition.html" shape="rect" coords="3,3,48,48" alt="plus"/><!--在矩形选区下，coords属性对应顺序为：矩形左边框距图像左边缘距离，矩形上边框距图像上边缘距离，矩形右边框距图像左边缘距离，矩形下边框距图像上边缘距离-->
<area href="subtraction.html" shape="rect" coords="51,3,100,48" alt="sub"/>
<area href="multiplication.html" shape="rect" coords="3,51,48,100" alt="mul"/>
<area href="division.html" shape="rect" coords="51,51,100,100" alt="div"/><!--其余地方可以将coords属性设置为default-->
</map>
</body>
</html>9.2.1.<map>元素
注意：该元素是客户端分区响应图的关键元素。
name属性用来规定该元素的唯一名称。
| 元素类型 | 包含短语元素时为短语元素，包含流元素时视作流元素 |
| 局部属性 | name（id属性值需和name属性值相同） |
| 内容 | <area>元素 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素、流元素的任何元素 |
9.2.2.<area>元素
注意：该元素分为两类：第一类处理的是该元素所代表的图像区域被用户点击后浏览器会导航到的URL；第二类包含了shape属性与coords属性，这些属性标明了用户可以点击的各个图像区域。
shape属性有四个值，分别是：rect（代表一个矩形区域）、circle（代表一个圆形区域）、poly（代表一个多边形）、default（默认区域，覆盖整个图片，不需要coords值）。
coords属性顺序对应以上四个值：coords由四个用逗号隔开的整数组成（图像左边缘距矩形左侧的距离，图像上边缘距矩形上侧的距离，图像左边缘距矩形右侧的距离，图像上边缘距矩形下侧的距离）、coords由三个用逗号隔开的整数组成（图像左边缘到圆心的距离，图像上边缘到圆心的距离，圆的半径）、coords至少由六个用逗号隔开的整数组成，每一对数字代表多边形的一个顶点。
href属性指定了该区域的目标URL。
alt属性用来指定在图片无法显示的情况下的替代文本（设置了href属性时才使用）。
type属性规定目标URL的MIME类型（设置了href属性时才使用）。
media属性规定目标URL优化的媒体/设备，可以设置多个值，具体值可参考2.4.小节同名属性（设置了href属性时才使用）。
hreflang属性规定区域中目标URL的语言（设置了href属性时才使用）。
target属性规定在何处打开href属性指定的目标URL，其值与前述同名属性相同。
rel属性规定当前文档和链接文档之间的关系，其值有：alternate（链接到文档的替代版本）、author（指向文档作者）、bookmark（用作书签的永久URL）、help（指向帮助文档的链接）、license（指向文档版权信息的链接）、next（集合中的下一个文档）、nofollow（指向未经认可的文档的链接）、noreferrer（规定如果用户点击超链接，浏览器不应发送 HTTP 引用标头）、prefetch（规定应缓存目标文档）、prev（集合中的上一个文档）、search（指向文档搜索工具的链接）、tag（当前文档的关键字）。
| 元素类型 | 短语元素 |
| 局部属性 | href、alt、shape、coords、type、media、hreflang、target、rel |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | <map>元素 |
9.3.<iframe>元素
注意：该元素用来在当前的html文档中嵌入另一张文档。
name属性用来规定该元素的名称。
width属性用来指定窗框的宽度，height属性用来指定窗框的高度。
src属性用来指定在该元素窗框中显示的内容的URL。
srcdoc属性用来规定显示在框架中的HTML内容必须是有效的HTML语法。
sandbox属性用来对html文档进行一些限制。它有以下一些值：allow-same-origin（允许该元素内容被视为与包含文档有相同的来源）、allow-top-navigation（允许链接指向顶层的浏览上下文）、allow-forms（启用表脚）、allow-scripts（启用脚本）、""（禁用脚本、表单、插件与指向其他浏览上下文的链接）。
seamless属性规定了该元素内容看上去像是包含文档的一部分（无边框或滚动条）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>iframe element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<section>
<img src="image/logo/calc(1).png" usemap="#calc" alt="calc"/>
<p>点击图片上的+、-、*、/运算符号跳转至相应页面</p>
</section>
<map id="calc">
<area href="addition.html" target="myframe" shape="rect" coords="3,3,48,48" alt="plus"/><!--target属性值为<iframe>元素name属性值，使新窗口跳转至该浏览上下文的窗口-->
<area href="subtraction.html" target="myframe" shape="rect" coords="51,3,100,48" alt="sub"/>
<area href="multiplication.html" target="myframe" shape="rect" coords="3,51,48,100" alt="mul"/>
<area href="division.html" target="myframe" shape="rect" coords="51,51,100,100" alt="div"/><!--其余地方可以将coords属性设置为default-->
</map>
<iframe name="myframe" width="300" height="100"></iframe><!--建立浏览上下文，允许在当前html文档里嵌入另外的html文档-->
</body>
</html>
| 元素类型 | 短语元素 |
| 局部属性 | name、width、height、src、srcdoc、sandbox、seamless |
| 内容 | 字符数据 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
9.4.<embed>元素、<object>元素与<param>元素
注意：<embed>元素与<object>元素可以通过插件嵌入内容，<param>元素用来定义将要传递给插件的参数，每个需要定义的参数都需要使用一个<param>元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>embed&object¶m element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<embed src="https://www.bilibili.com/video/BV1ej411y7Bj?t=3.8" width="1000" height="800"/>
<object width="1000" height="800" data="https://www.bilibili.com/video/BV1ej411y7Bj?t=3.8"><!--<object>元素可以提供一些额外的特性-->
<param name="allowFullScreen" value="false"/>
<p>Sorry,we can't find the video resource.</p><!--用作备用内容，当载入视频不成功时，浏览器会忽略<param>元素，显示后面的备用内容-->
</object>
</body>
</html>9.4.1.<embed>元素
注意：该元素用来定义嵌入的内容，比如插件。
src属性用来指定嵌入内容的URL。
width属性用来设置嵌入内容的宽度，height属性用来设置嵌入内容的高度。
type属性用来指定嵌入内容的MIME类型。
| 元素类型 | 短语元素 |
| 局部属性 | src、width、height、type |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | 可以包含短语元素的任何元素 |
9.4.2.<object>元素
注意：该元素用来定义一个嵌入的对象。比如图像、分区响应图、浏览上下文、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
width属性用来设置嵌入内容的宽度，height属性用来设置嵌入内容的高度。
type属性用来指定嵌入内容的MIME类型。
name属性用来指定该元素的名称。
data属性指定对象要使用的资源的URL。
usemap属性指定与对象一起使用的图像映射的名称，该属性值可与<map>元素name值关联，与前述用法相同。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
| 元素类型 | 包含短语元素时为短语元素，包含流元素时视作流元素 |
| 局部属性 | data、width、height、type、name、usemap、form |
| 内容 | 空白或<param>元素（或留作备用的短语元素和流元素） |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素、流元素的任何元素 |
9.4.3.<param>元素
注意：该元素用来为包含它的<object>元素或者<applet>元素提供参数。
name属性用来定义参数的名称。
value属性用来指定该参数的值。
| 元素类型 | - |
| 局部属性 | name、value |
| 内容 | - |
| 标签用法 | 虚元素形式 |
| 父元素 | <object>元素 |
9.5.<progress>元素
注意：该元素用来表现某项任务逐渐完成的过程。
value属性表示当前任务的进度，该值位于0与max值之间，当未设置max值时，该范围是0~1。
max属性用来指定最大值。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>progress element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<progress id="myprogress" value="30" max="100"></progress><!--用进度条显示进程-->
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="100">100%</button>
</p>
<script>
var buttons=document.getElementsByTagName('BUTTON');
var progress=document.getElementById('myprogress');
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(e){
progress.value=e.target.value;
}
}
</script>
</body>
</html>| 元素类型 | 短语元素 |
| 局部属性 | value、max、form |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
9.6.<meter>元素
注意：该元素用来表示某个范围之内的值中的任意一个，即已知范围或分数值内的标量测量。该元素不应用于进度条。
value属性指定当前的值，必须存在这个值。
min属性指定了该范围的最小值，max属性指定了该范围的最大值。
low属性指定了低值的界限，低于该值都被视作过低。
high属性指定了高值的界限，高于该值都被视作过高。
optimum属性指定了被视作最佳的值。
form属性指定该元素绑定的表单，其值应当为<form>元素的id值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="author" content="midshar.top"/>
<meta name="description" content="This is my webpage"/>
<title>meter element</title>
<link rel="shortcut icon" type="image/x-icon" href="mylogo.ico"/>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
</head>
<body>
<meter id="mymeter" value="30" min="10" max="100" low="40" high="80" optimum="50"></meter><!--min与max属性分别表示最低与最高范围，low、high与optimum分别表示低界限、最高界限与最优值-->
<p>
<button type="button" value="30">30</button>
<button type="button" value="60">60</button>
<button type="button" value="100">100</button>
</p>
<script>
var buttons=document.getElementsByTagName('BUTTON');
var progress=document.getElementById('mymeter');
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(e){
progress.value=e.target.value;
}
}
</script>
</body>
</html>| 元素类型 | 短语元素 |
| 局部属性 | value、max、min、low、high、optimum、form |
| 内容 | 短语内容 |
| 标签用法 | 开始标签和结束标签 |
| 父元素 | 可以包含短语元素的任何元素 |
扫一扫
1686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
