HTML语言学习记录

HTML前言
HTML元素理念
HTML属性理念
HTML头部元素
HTML基本元素
HTML5新增元素
1. fieldset元素

HTML：基础

关键词：HTML

HTML前言

什么是HTML？

HTML，为HyperTest Markup Language的缩写，意为超文本标记语言。其是一种用于创建网页的标准标记语言。
HTML由一系列元素组成，可以用于描述网页的结构。
HTML使用各种元素使得浏览器展示内容，并使用元素标记内容片段。
作为HTML文件，必须以一个声明开始。
这个声明表示文档类型，帮助浏览器正确展示网页内容。其只需在每个文档开头出现一次，它也不注重大小写。一般的HTML5文件以<!DOCTYPE html>开始。
HTML文件应该以<html>开始并以</html>结束。
HTML文件的可视部分应该在<body>和</body>之间。
HTML整体是大小写不敏感，但为了格式与美观，一般有统一的标准。
HTML使用进行注释。

HTML5

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

响应式Web设计

响应式Web设计，Responsive Web Design，能够以可变尺寸传递网页。
可以使用Bootstrap创建响应式设计。

HTML标准字符集

为了正确显示HTML页面，在<meta>标签中设置编码。如：

1	<meta charset="UTF-8" />

字符集有很多，如ASCII码，UTF-8码，ISO-8859-1码，推荐用UTF-8码。
在使用某些字符时，存在歧义，使用实体代码或编号表示。
更多字符

HTML统一资源定位器与路径

统一资源定位器和路径不完全相同。
URL，Uniform Resource Locator，统一资源定位器，也被称为网址。
URL 只能使用 ASCII 字符集来通过因特网进行发送。URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
网址具有一定的语法规则：scheme://host.domain:port/path/filename
scheme定义因特网服务类型，常见为http和https。
host定义域主机，http默认主机是www。
domain定义因特网域名。
:port定义主机上的端口号。
path定义服务器上的路径，省略默认根目录。
filename定义文档、资源的名称。
路径描述了网站文件夹结构中某个文件的位置，使用相对路径是个好习惯。

XHTML

XHTML是指可扩展超文本标记语言，是更严格更纯净的HTML版本。
其与HTML4.01几乎相同。

HTML元素理念

定义

HTML 元素指的是从开始标签（<xxx>）到结束标签（</xxx>）的所有代码。其包含开始标签，内容和结束标签。

语法

HTML元素以开始标签起始。
HTML元素以结束标签终止。
元素的内容是开始标签与结束标签之间的内容。
某些HTML元素具有空内容。
没有内容的 HTML 元素被称为空元素。空元素在开始标签中进行关闭（以开始标签的结束而结束，即无结束标签）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br>在所有浏览器中都是有效的，但使用<br />其实是更长远的保障。
大多数HTML元素可拥有属性。

元素实例

如<html>和</html>元素（<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。），<body>和</body>元素（body元素包含文档的所有内容），HTML标题，HTML段落，HTML链接，HTML图像等。

元素嵌套

大多数HTML元素可以嵌套（即包含其他HTML元素）如：

<html>
<body>
<!-- 标签<p>表示段落元素 -->
<p>This is a paragraph.</p> 
</body>
</html>

HTML属性理念

属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是在 HTML 元素的开始标签中规定。
属性总是以名称或值对的形式出现
HTML全局属性

HTML头部元素

<head>元素

定义关于文档的信息。
<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签或<frameset>标签之前。
<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及<style>。
属性
profile，可以设置URL，一个由空格分隔的URL列表，这些URL包含有关页面的元数据信息。
文档的头部经常会包含一些<meta>标签，用来告诉浏览器关于文档的附加信息。在将来，创作者可能会利用预先定义好的标准文档的元数据配置文件（metadata profile），以便更好地描述它们的文档。profile属性提供了与当前文档相关联的配置文件的 URL。

<title>元素

定义文档标题，定义浏览器工具栏中的标题，定义页面被收藏时显示的标题，定义显示在搜索引擎结果中的页面标题。
title元素在所有 HTML/XHTML文档中都是必需的。
属性

dir，可以设置值，规定元素中内容的文本方向。

lang，可以设置代码，规定元素中内容的语言代码。

xml:lang，可以设置代码，规定XHTML文档中元素内容的语言代码。

<base>元素

定义页面上所有链接的默认地址或默认目标（target）。
其必须位于head元素内部。
属性

href，可以设置URL，规定页面中所有相对链接的基准URL。即设置默认地址。

target，可以设置值，规定在何处打开页面中的所有链接。值包括“_blank”，“_parent”，“_self”，“_top”，和框架名。

<link>元素

定义文档与外部资源之间的关系。
<link>标签最常用于连接样式表。
属性

charset，可以设置字符编码方式，在HTML5不支持。

href，可以设置URL，规定被链接文档的位置。

hreflang，可以设置语言代码，规定被链接文档中文本的语言。

media，可以设置媒体查询，规定被链接文档将被显示在什么设备上。

referrerpolicy，可以设置值，规定在获取资源时使用的引荐来源信息。值包括“no-referrer”，“no-referrer-when-downgrade”，“origin”，“origin-when-cross-origin”，“unsafe-url”。

rel，可以设置值，规定当前文档与被链接文档之间的关系。值包括“alternate”，“author”，“help”，“icon”，“licence”，“next”，“pingback”，“prefetch”，“prev”，“search”，“sidebar”，“stylesheet”，“tag”。

rev，可以设置反向关系，在HTML5中不支持。

sizes，可以设置值，规定被链接资源的尺寸，仅适用rel="icon"。值包括“heightxwidth”，“any”。

target，可以设置目标，在HTML5中不支持。

type，可以设置MIME类型，规定被链接文档的MIME类型。

<style>元素

定义文档的样式信息。如：

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

属性

type，只能设置text/css，规定样式表的MIME类型。

media，可以设置值，为样式表规定不同的媒介类型。值包括“screen”，“tty”，“tv”，“projection”，“handheld”，“print”，“braille”，“aural”，“all”。

<meta>元素

定义关于HTML文档的元数据。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
<meta>无结束标签。
属性

charset，可以设置字符，规定HTML文档的字符编码。

content，可以设置文本，定义与http-equiv或name相关的元信息。

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和name属性或http-equiv属性一起使用。

http-equiv，可以设置值，把content属性关联到HTTP头部。值包括“content-security-policy”，“content-type”，“default-style”，“refresh”。

name，可以设置值，把content属性关联到一个名称。值包括“application-name”，“author”，“description”，“generator”，“keywords”，“viewport”。

scheme，可以设置一些文本，定义用于解释content属性值的格式。scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head>标签的 profile 属性指定的概况文件中进行了定义。

<script>元素

定义客户端脚本。比如JavaScript。
属性

async，规定异步执行脚本（仅适用于外部脚本）。

charset，可以设置编码，规定在外部脚本文件中使用的字符编码。

crossorigin，可以设置值，将请求模式设置为HTTP CORS请求。值包括“anonymous”，“use-credentials”。

defer，规定是否对脚本执行进行延迟，直到页面加载为止。

language，规定脚本语言，不赞成使用，用type代替。

referrerpolicy，可以设置值，规定外部脚本文件的URL。值包括“no-referrer”，“no-referrer-when-downgrade”，“origin”，“origin-when-cross-origin”，“same-origin”，“strict-origin”，“strict-origin-when-cross-origin”，“unsafe-url”。

src，可以设置URL，规定外部脚本文件的URL。

xml:space，规定是否保留代码中的空白。

type，可以设置MIME类型，指示脚本的MIME类型。

HTML基本元素

HTML标题

标题（Heading）是通过<h1>~<h6>等标签进行定义的。<h1>定义最大的标题。<h6>定义最小的标题。
具有“align”属性，其值有“left”、“center”、“right”和“justify”，规定了标题中文本的排列。
<hr />标签在 HTML 页面中创建水平线。hr元素可用于分隔内容。

HTML段落

段落是通过<p>标签定义的。
具有“align”属性，其值有“left”、“center”、“right”和“justify”，规定了段落中文本的排列。
<br />标签可以在段落中进行换行。

HTML格式化类标签

文本格式化标签

<b>和</b>加粗字体
<strong>和</strong>加重语气
<big>和</big>加大字体
<small>和</small>小字体
<em>和</em>着重文字
<i>和</i> 斜体字
<sup>和</sup>上标
<sub>和</sub>下标
<del>和</del>删除字
<ins>和</ins>下划线

“计算机输出”标签

<code>和</code>计算机代码字体
<kbd>和</kbd>键盘码字体
<samp>和</samp>计算机代码样本字体
<tt>和</tt>打字机代码字体
<var>和</var>定义变量字体
<pre>和</pre>预格式文本字体

引用和术语定义

<abbr>和</abbr>定义缩写，鼠标悬浮显示内容
<acronym>和</acronym>定义首字母缩写，鼠标悬浮显示内容。
<address>和</address>定义地址
<bdo>和</bdo>定义文字方向，具有dir属性，值为“rtl”(right-to-left)和“ltr”(left-to-right)
<blockquote>和</blockquote>定义长引用
<q>和</q>定义短引用
<cite>和</cite>定义引用、引证；<dfn>和</dfn>定义项目。

HTML链接

链接或者超链接，可以是一个字、一个词、一幅画像，可以点击跳转到新的内容。
链接是通过<a>定义的。
开始标签和结束标签之间的文字被作为超级链接来显示。超级链接可以是文本、图片或者其他HTML元素。
<a>标签具有href属性和name属性，href属性用于创建指向另一个文档的链接，name属性用于创建文档内的书签。用法如下。

<!DOCTYPE html>
<html>
    <body>
        <a name = "flag">这是一句话</a>
        <br />
        <a href="http://cn.bing.com/" >A link to Bing</a>
        <br />
        <a href = "#flag">跳转到顶部句子</a>
    </body>
</html>

<a>标签具有target属性，其用于定义被链接的文档在何处显示。如<a href="http://cn.bing.com/" target="_blank">A Link</a>中的target="_blank"表示在新的窗口打开文档。

HTML图像

在 HTML 中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
页面上显示图像需要使用源属性（src，source），源属性的值是图像的URL地址。如：<img src="xxx/image.jpg">，则image这个jpg文件需要在源属性的值的地址上。
替换文本属性（Alt），用来为图像定义一串预备的可替换的文本。替换文本属性的值是人为定义的。即当图片无法显示时，展示alt属性的值的文字。如：<img src="xxx/a.jpg" alt="test">，当a.jpg无法显示时，显示test。
img标签中可以使用align属性进行图像与文本对齐。此处align的值可选“bottom”、“middle”和“top”，默认bottom对齐。
img标签中可以使用align属性进行文本和图像位置设定。此处align的值可选“left”、“right”，分别用于图像固定段落的左端和右端。
img标签中可以使用width和height属性进行更改图像的大小。如：<img src="xxx/a.jpg" width="200" height="200">
可以将<a>标签和<img>结合，制作能跳转链接的图片。如：<a href="http://cn.bing.cn"><img src="xxx/a.jpg"></a>
img标签中还有以下属性

属性	值	描述
border	像素值	定义图像周围的边框
hspace	像素值	定义图像左侧和右侧的空白
ismap	URL	将图像定义为服务器端图像映射
loading	eager/lazy	规定浏览器是立即加载图像还是推迟加载屏幕外图像
longdesc	URL	指向包含长的图像描述文档的URL
referrerpolicy	no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/unsafe-url	规定获取图像时要使用的引荐来源信息
usemap	URL	将图像定义为客户器端图像映射
vspace	像素值	定义图像顶部和底部的空白

在body标签中使用background属性可以使用图像作为背景。但如果图像小于页面，图像会进行重复。
使用<map>标签和<area>标签制作图像映射。

<img src="xxx/a.jpg" usemap="#amap">
<!--map标签中有属性name和id，与img标签usemap对应-->
<!--map标签中id属性时必须且唯一的，name属性时可选的-->
<map name="amap" id="amap">
<!--area标签中有shape属性、coords属性等-->
    <area shape="circle" coords="180,139,14" href="xxx" alt="1">
    <area shape="circle" coords="129,161,10" href="xxx" alt="2">
    <area shape="rect" coords="0,0,110,260" href="xxx" alt="3">

</map>

area标签的其他属性如下：

属性	值	描述
coords	坐标值	定义可点击区域的坐标和大小
download	文件名	指定用户点击超链接时下载目标
href	URL	此区域目标URL
hreflang	language_code	规定区域中URL的语言
media	media query	规定目标URL优化的媒体、设备
referrerpolicy	no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin-when-cross-origin/unsafe-url	规定用户单击超链接时发送引荐来源信息
rel	alternate/author/bookmark/help/licence/next/nofollow/noreferrer/prefatch/prev/search/tag	规定区域中目标URL的语言
nohref	nohref	从图像映射排除某个区域
shape	default/rect/circ/poly	定义区域形状
target	_blank/_parent/_self/_top	规定在何处打开href属性指定目标的URL
type	media_type	规定目标URL的Internet媒体类型

HTML表格元素

表格由<table>标签定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。
字母 tr 指一行（table row）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头用<th>标签表示。
为了避免空单元边框（添加border属性）不显示，在空单元格中添加一个空格占位符（ ），就可以将边框显示出来。
表格标签：

标签	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格主体
`<tfoot>`	定义表格页脚
`<col>`	用于表格列的属性
`<colgroup>`	定义表格列的组

table标签

属性

align，可以设置值，规定表格相对周围元素的对齐方式。值包括“left”，“right”，“center”。不赞成使用，用样式代替。

bgcolor，可以设置rgb值或十六进制颜色或颜色名，规定表格的背景颜色。不赞成使用，用样式代替。

border，可以设置像素值，规定表格边框的宽度。

cellpadding，可以通过设置百分比或像素值，规定单元边沿与其内容之间的空白。

cellspacing，可以通过设置百分比或像素值，规定单元格之间的空白。

frame，可以通过设置值，规定外侧边框的哪个部分时可见的。值包括“void”，“above”，“below”，“hsides”，“lhs”，“rhs”，“vsides”，“box”，“border”。

rules，可以通过设置值，规定内侧边框的哪个部分时可见的。值包括“none”，“groups”，“rows”，“cols”，“all”。

summary，可以通过设置文本，规定表格的摘要。

width，可以通过设置百分比或像素值，规定表格的宽度。

caption标签

caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
属性

其属性有align，可以设置值，规定标题的对齐方式。值包括“left”，“right”，“top”，“bottom”。不赞成使用，用样式代替。

th标签与td标签

定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性。
属性

abbr，可以通过设置文本，规定单元格中内容的缩写版本。

align，可以通过设置值，规定单元格内容的水平对齐方式。值包括“left”，“right”，“center”，“justify”，“char”。

axis，可以设置分类名字，对单元格进行分类。

bgcolor，可以设置rgb值或十六进制颜色或颜色名，规定表格的背景颜色。不赞成使用，用样式代替。

char，可以设置字符，规定根据哪个字符进行内容的对齐。

charoff，可以设置数字，规定对齐字符的偏移量。

colspan，可以设置数字，规定单元格可跨越的列数。

headers，可以设置属性类型，由空格分隔的表头单元格ID列标，为数据单元格提供表头信息。

nowrap，可以设置值，规定单元格中是否折行。不推荐使用，用样式代替。

rowspan，可以设置数字，规定单元格可横跨的行数。

scope，可以设置值，定义将表头数据与单元数据相关联的方法。值包括“col”，“clogroup”，“row”，“rowgroup”。

valign，可以设置值，规定单元格内容的垂直排列方式。值包括“top”，“middle”，“bottom”，“baseline”。

width，可以设置百分比或像素值，规定表格单元格的宽度。不推荐使用，用样式代替。

height，可以设置百分比或像素值，规定表格单元格的高度。不推荐使用，用样式代替。

tr标签

属性

align，可以通过设置值，规定表格行内容对齐方式。值包括“left”，“right”，“center”，“justify”，“char”。

bgcolor，可以设置rgb值或十六进制颜色或颜色名，规定表格的背景颜色。不赞成使用，用样式代替。

char，可以设置字符，规定根据哪个字符进行内容的对齐。

charoff，可以设置数字，规定对齐字符的偏移量。

valign，可以设置值，规定单元格内容的垂直排列方式。值包括“top”，“middle”，“bottom”，“baseline”。

thead标签、tbody标签和tfoot标签

<thead>标签定义表格的表头。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
如果使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody。必须在 table 元素内部使用这些标签。
属性

align，可以通过设置值，规定元素中内容对齐方式。值包括“left”，“right”，“center”，“justify”，“char”。

char，可以设置字符，规定根据哪个字符进行内容的对齐。

charoff，可以设置数字，规定对齐字符的偏移量。

valign，可以设置值，规定单元格内容的垂直排列方式。值包括“top”，“middle”，“bottom”，“baseline”。

col标签

<col>标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col>标签很有用，这样就不需要对各个单元和各行重复应用样式了。
只能在 table 或 colgroup 元素中使用<col>标签。
无结束标签。
为<col>标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
属性

align，可以通过设置值，规定与col元素相关的内容的水平对齐方式。值包括“left”，“right”，“center”，“justify”，“char”。

char，可以设置字符，规定根据哪个字符进行内容的对齐。

charoff，可以设置数字，规定对齐字符的偏移量。

span，可以设置数字，规定col元素应该跨越的列数。

valign，可以设置值，规定单元格内容的垂直排列方式。值包括“top”，“middle”，“bottom”，“baseline”。

width，可以设置百分比或像素值或相关长度，规定col元素的宽度。

colgroup标签

<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup>标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup>标签只能在 table 元素中使用。
属性

align，可以通过设置值，定义在列组合中内容的水平对齐方式。值包括“left”，“right”，“center”，“justify”，“char”。

char，可以设置字符，规定根据哪个字符进行内容的对齐。

charoff，可以设置数字，规定对齐字符的偏移量。

span，可以设置数字，规定列组应该跨越的列数。

valign，可以设置值，定义在列组合中内容的垂直排列方式。值包括“top”，“middle”，“bottom”，“baseline”。

width，可以设置百分比或像素值或相关长度，规定列组合的宽度。

HTML列表元素

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于<ul>标签（unordered_list）。每个列表项始于<li>标签（list）。

<ul>
    <li>a</li>
    <li>b</li>
</ul>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

有序列表始于<ol>标签（ordered_list）。每个列表项始于<li>标签（list）。

<ol>
    <li>a</li>
    <li>b</li>
</ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。

<dl>
    <dt>Coffee</dt>
        <dd>Black hot drink</dd>
    <dt>Milk</dt>
        <dd>White cold drink</dd>
</dl>

列表标签

ol标签

定义有序列表。
属性

compact，不赞成使用。

reversed，设置列表顺序为降序。

start，可以设置数字，规定有序列表的起始值。

type，可以设置值，规定在列表中使用的标记类型。值包括“1”，“A”，“a”，“I”，“i”。

ul标签

定义无序列表。
属性

compact，不赞成使用。

type，可以设置值，规定在列表中使用的标记类型。值包括“disc”，“square”，“circle”。

li标签

定义列表项目。
用于<ol>标签或<ul>标签中。
属性

type，不赞成使用，值如上5+3，共8种。

value，不赞成使用，规定项目的数字。

dl标签、dt标签和dd标签

<dl>标签定义定义列表。
<dt>标签定义定义项目。
<dd>标签定义定义描述。

<html>
<body>
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

已废弃，使用<ul>标签代替。

HTML块

大多数 HTML 元素被定义为块级元素（block level element）或内联元素（inline element）。
块级元素在浏览器显示时，通常会以新行来开始（和结束）而内联元素在显示时通常不会以新行开始。

div元素

<div>用于定义文档中的分区或节（division/section）。
HTML<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。浏览器通常会在 div 元素前后放置一个换行符。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。如：

<!--使用div分块，并用class标识和更改颜色为蓝色-->
 <div class="xxx" style="color:blue">
  <h2>xxxxxx</h2>
  <p>xxxxxx</p>
 </div>

align属性，可以设置值，规定div元素中的内容的对齐方式。不赞成使用，用样式取代。
值包括“left”、“right”、“center”、“justify”。

span元素
<span>用于组合文档中的行内元素。
HTML<span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。如：

1 2	<!--在html中标识class，并使用span组合--> <p class="tip"><span>强调：</span>... ... ...</p>

/*在CSS文件中统一设置span的格式*/
p.tip span {
    font-weight:bold;
    color:#ff9955;
    }

使用<span>来组合行内元素，以便通过样式来格式化它们。

HTML类标签

使用class标识分类，进行内容格式化。如：

<!DOCTYPE html>
<html>
  <head>
  <!--CSS样式-->
  <style>
  .cities {
      background-color:black;
      color:white;
      margin:20px;
      padding:20px;
  } 
  span.place {
      background-color:blue;
      color:white;
      margin:20px;
      padding:20px;
  }    
  </style>
  </head>

  <body>
  <!--使用class名整体格式化-->
  <div class="cities">
  <h2>London</h2>
  <p>
  London is the capital city of England. 
  It is the most populous city in the United Kingdom, 
  with a metropolitan area of over 13 million inhabitants.
  </p>
  </div> 

  <h1>A <span class="place">place</span>in London</h1>
  </body>
</html>

HTML内联框架

iframe可以在网页内显示网页。
语法：<iframe src="URL"><iframe>
属性

align，可以设置值，规定如何根据周围的元素对齐此框架。不赞成使用，值包括“left”，“right”，“top”，“middle”，“bottom”。

frameborder，可以设置0或1，规定是否显示框架周围的边框。

height，可以设置百分比或像素值，规定iframe的高度。

width，可以设置百分比或像素值，规定iframe的宽度。

longdesc，可以设置URL，规定一个页面，该页面包含了有关iframe的描述。

marginheight，可以设置像素值，定义iframe的顶部和底部的边距。

marginwidth，可以设置像素值，定义iframe的左边和右边的边距。

name，可以设置文本，规定iframe的名称。

referrerpolicy，可以设置值，规定iframe的引荐信息。值包括“no-referrer”，“no-referrer-when-downgrade”，“origin”，“origin-when-cross-origin”，“same-origin”，“strict-origin-when-cross-origin”，“unsafe-url”。

sandbox，可以设置值，启用一系列对<iframe>中内容的额外限制。值包括“”，“allow-forms”，“allow-same-origin”，“allow-scripts”，“allow-top-navigation”。

scrolling，可以设置值，规定是否在iframe中显示滚动条。值包括“yes”，“no”，“auto”。

seamless，规定<iframe>看上去像是包含文档的一部分。

src，可以设置URL，规定iframe中显示的文档的URL。

srcdoc，可以设置HTML代码，规定在<iframe>中显示的页面的HTML内容。

HTML布局类标签

HTML5语义元素

<header>

定义文档或节的页眉。应该被用作介绍性内容的容器。

<main>

规定文档的主内容。

<mark>

定义重要或强调的文本。

<time>

定义日期/时间。

<nav>

定义导航链接的容器。

<section>

定义文档中的节。

<article>

定义独立的自包含文章。应用场景：论坛、博客、新闻……

<aside>

定义内容之外的内容，如侧栏。aside内容应该与周围内容相关。

<footer>

定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

<details>

定义额外的细节。

<figure>

规定自包含内容，比如图示、图表、照片、代码清单等。通过 HTML5，图片和标题能够被组合在<figure>元素中。

<figcaption>

定义<figure>元素的标题。

<summary>

定义details元素的标题。

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
但使用框架开发人员必须同时跟踪更多的HTML文档，并且很难打印整张页面。

<frameset>，定义如何将窗口分割为框架。每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积。
<frame>，定义了放置在每个框架中的 HTML 文档。
为不支持框架的浏览器添加<noframes>标签。
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize=“noresize”。为不支持框架的浏览器添加<noframes>标签。不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。如

<html>

<frameset cols="25%,50%,25%">
  <frame src="/xxx/frame_a.html">
  <frame src="/xxx/frame_b.html">
  <frame src="/xxx/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

HTML表单

HTML表单用于搜集不同类型的用户输入。
<form>元素定义HTML表单。
表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等等。

form元素属性

action属性

action 属性定义提交表单时要执行的操作。通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
值为URL。
如果省略 action 属性，则将 action 设置为当前页面。

target属性
target 属性规定提交表单后在何处显示响应。
值包括“_blank”（新窗口），“_self”（当前窗口），“_parent”（父框架），“_top”（窗口的body中），框架名。默认为“_self”。

method属性
属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。
表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。提交表单数据时，默认的 HTTP 方法是 GET。
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。GET 最适合少量数据的提交。浏览器会设定容量限制。
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

注意事项
GET
以名称/值对的形式将表单数据追加到 URL。
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）。
URL 的长度受到限制（2048 个字符）。
对于用户希望将结果添加为书签的表单提交很有用。
GET 适用于非安全数据，例如 Google 中的查询字符串。
POST
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）。
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签。
如果表单数据包含敏感信息或个人信息，请务必使用 POST！

autocomplete属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
值为on或off。

novalidate属性
novalidate 属性是一个布尔属性。它规定提交时不应验证表单数据。
值为自身。

accept-charset属性
accept-charset 属性规定服务器用哪种字符集处理表单数据。
常用值有：UTF-8 - Unicode 字符编码，ISO-8859-1 - 拉丁字母表的字符编码，gb2312 - 简体中文字符集。

enctype属性
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
表单数据会默认编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
值包括“application/x-www-form-urlencoded”（编码所有），“multipart/form-data”（不对字符编码），“text/plain”（部分编码）。

name属性
name属性规定表单名称，提供了一种在脚本中引用表单的方法。
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
值为自定义名称。

rel属性
rel 属性规定当前文档和被链接文档之间的关系。
值包括“external”（规定引用的文档不是当前站点的一部分），“help”（链接到帮助文档），“license”（链接到文档的版权信息），“next”（集合中的下一个文档），“nofollow” （链接到未经认可的文档，例如付费链接）（Google 使用 “nofollow” 来指定 Google 搜索蜘蛛不应跟踪该链接），“noopener”， “noreferrer”（规定如果用户点击该超链接，则浏览器不应发送 HTTP 推荐标头），“opener”， “prev”（集合中的上一个文档），“search”（链接到文档的搜索工具）。

input元素输入类型

文本输入

<input type="text">定义用于文本输入的单行输入字段。
表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

密码输入
<input type="password">定义密码字段。
password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

单选按钮输入
<input type="radio">定义单选按钮。
通常单选应该有选项，如下是一个单选：

<form>
<input type="radio" name="sex" value="male" checked/>男
<br />
<input type="radio" name="sex" value="female" checked/>女
</form>

复选框输入

<input type="checkbox">定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。

按钮输入
<input type="button>定义按钮。

提交按钮
<input type="submit">定义用于向表单处理程序提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。有关处理表单输入的知识，参考ASP或PHP语言。
表单处理程序在表单的 action 属性中指定：

<!--将表单数据提交到xxx.asp页面-->
<form action="../xxx/xxx.asp">
Name:<br />
<input type="text" name="Name">
<input type="submit" value="提交">
</form>

提交按钮中的value属性值是显示在按钮上的内容。

HTML5新增输入类型
color
<input type="color">用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中。
date
<input type="date">用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中。
datetime
<input type="datetime">允许用户选择日期和时间（有时区）。根据浏览器支持，日期选择器会出现输入字段中。
datetime-local
<input type="datetime-local">允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中。
email
<input type="email">用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。
month
<input type="month">允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中。
number
<input type="number">用于应该包含数字值的输入字段。能够对数字做出限制。
range
<input type="range">用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。
search
<input type="search">用于搜索字段（搜索字段的表现类似常规文本字段）。
tel
<input type="tel">用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。
time
<input type="time">允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。
url
<input type="url">用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 “.com” 以匹配 url 输入。
week
<input type="week">允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中。
image
<input type="image">获取点击图像时的x和y坐标。

input元素属性

value，值为自定义字段，规定输入字段的初始值。
readonly，不需要值，规定输入字段只读不可修改。
disabled，不需要值，规定输入字段禁用，不可用不可点击不会被提交。
size，值为字符数，规定输入字段框的尺寸。
maxlength，值为数字，规定输入字段允许的最大长度。
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。
autocomplete，值为on或off，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。
autocomplete 属性适用于<form>以及如下<input>类型：text、search、url、tel、email、password、datepickers、range 以及 color。
autofocus，布尔属性，如果设置，则规定当页面加载时，<input>元素应该自动获得焦点。
form，规定<input>元素所属的一个或多个表单。如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
即表单外使用<input>标签。

<form action="xxx.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>

 Last name: <input type="text" name="lname" form="form1">

formaction，规定当提交表单时处理该输入控件文件的URL。
formaction 属性覆盖<form>元素的 action 属性。
formaction 属性适用于type="submit"以及type="image"。
formenctype，规定表单数据提交服务器时编码规则。
formenctype 属性覆盖<form>元素的 enctype 属性。
formenctype 属性适用于type="submit"以及type="image"。
formmethod，定义用以向action URL发送表单数据的HTTP方法。
formmethod 属性覆盖<form>元素的 method 属性。
formmethod 属性适用于type="submit"以及type="image"。
formnovalidate，布尔属性，设置时，规定提交表单时不对<input>元素进行验证。
formnovalidate 属性覆盖<form>元素的 novalidate 属性。
formnovalidate 属性可用于type="submit"。
formtarget，规定名称或关键词指示提交表单后何处显示接收到的响应。
formtarget 属性会覆盖<form>元素的 target 属性。
formtarget 属性可与type="submit"和type="image"使用。
height和width，规定<input>元素的高度和宽度。
height 和 width 属性仅用于<input type="image">。
list，引用的<datalist>元素中包含了<input>元素的预定义选项。
min和max，规定<input>元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple，布尔属性，设置时，规定允许用户在<input>元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。
pattern，规定用于检查<input>元素值的正则表达式。
pattern 属性适用于以下输入类型：text、search、url、tel、email、password。
placeholder，规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
required，布尔属性，设置时，规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、file。
step，规定<input>元素的合法数字间隔。
step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

<select>元素
定义下拉列表
<option>元素定义待选择的选项。列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

textarea元素

定义多行输入字段（文本域）。

button元素

定义可点击的按钮。

HTML媒体

Web 上的多媒体指的是音效、音乐、视频和动画。
插件（Plug-in）是扩展浏览器标准功能的计算机程序。

HTML对象

object元素

<object>元素定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。

embed元素
<embed>元素也可定义了 HTML 文档中的嵌入式对象，也可用于在 HTML 中包含 HTML。
Web 浏览器长期以来一直支持<embed>元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。
<embed>元素没有结束标记。它无法包含替代文本。

HTML音频

使用<embed>元素嵌入MP3文件。
<embed>标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
使用<object>元素嵌入MP3文件。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
使用HTML5<audio>元素播放音频。
<audio>标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
必须把音频文件转换为不同的格式。
<audio>元素在老式浏览器中不起作用。

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

最好的HTML解决方法是<audio>标签与<embed>标签混用。
使用JS和播放器播放音频。

audio标签属性
autoplay，设置该属性时，音频就绪后马上播放。
controls，设置该属性时，显示控件。
loop，出现该属性时，音频循环播放。
muted，出现该属性时，规定音频静音。
preload，出现该属性时，在页面加载时加载音频，预备播放。
src，值为URL，播放音频的URL。

HTML视频

使用<embed>标签。
HTML4 无法识别<embed>标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
使用<object>标签。
如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
使用<video>标签。
<video> ，是 HTML 5 中的新标签，作用是在 HTML 页面中嵌入视频元素。
您必须把视频转换为很多不同的格式。
<video>元素在老式浏览器中无效。
<video>元素无法通过 HTML 4 和 XHTML 验证
最好的HTML解决方法：HTML5+<object>+<embed>。

video标签属性
autoplay，设置该属性时，视频就绪后马上播放。
controls，设置该属性时，显示控件。
height，值为像素值，设置播放器高度。
width，值为像素值，设置播放器宽度。
loop，出现该属性时，视频循环播放。
muted，出现该属性时，规定视频静音。
poster，值为URL，规定视频下载时现实的图像，或播放按钮前显示的图像。
preload，出现该属性时，在页面加载时加载视频，预备播放。
src，值为URL，播放音频的URL。

HTML5新增元素

<datalist>
<datalist>元素为<input>元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的 list 属性必须引用<datalist>元素的 id 属性
<keygen>
<output>

fieldset元素
<fieldset>元素组合表单中的相关数据。
<legend>元素为<fieldset>元素定义标题。

<form>
    <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
    <br><br>
    <input type="submit" value="Submit"></fieldset>
</form>

HTML id属性

HTML id 属性用于HTML 元素指定唯一的id。一个 HTML文档中不能存在多个有相同 id 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。如：

<!DOCTYPE html>
<html>
  <head>
  <style>
  #London {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
  }
  </style>
  </head>

  <body>
  <h1 id="London">My City</h1>
  </body>
</html>

id对大小写敏感，且至少包含一个字符，不能为空白字符（空格、制表符等）。
id还可以用于实现书签。

<!--先用id创建书签-->
<h2 id="C4">第四章</h2>

<!--接着使用链接元素跳转-->
<a href="#C4">跳转到第四章</a>
<!--或者跳转到另一页的书签-->
<a href="test.html#C4">跳转到第四章</a>

CSS和JS可以使用id属性选取元素或设置样式。
Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用。

2023-06-18 该篇文章被 Fingsinz 打上标签: HTML 归为分类: 笔记

HTML前言

什么是HTML？

HTML5

响应式Web设计

HTML标准字符集

HTML统一资源定位器与路径

XHTML

HTML元素理念

定义

语法

元素实例

元素嵌套

HTML属性理念

HTML头部元素

HTML基本元素

HTML标题

HTML段落

HTML格式化类标签

文本格式化标签

“计算机输出”标签

引用和术语定义

HTML链接

HTML图像

HTML表格元素

table标签

caption标签

th标签与td标签

tr标签

thead标签、tbody标签和tfoot标签

col标签

colgroup标签

HTML列表元素

无序列表

有序列表

定义列表

列表标签

ol标签

ul标签

li标签

dl标签、dt标签和dd标签

dir标签和menu标签

HTML块

div元素

span元素

HTML类标签

HTML内联框架

HTML布局类标签

HTML5语义元素

框架

标签

HTML表单

form元素属性

action属性

target属性

method属性

注意事项

autocomplete属性

novalidate属性

accept-charset属性

enctype属性

name属性

rel属性

input元素输入类型

文本输入

密码输入

单选按钮输入

复选框输入

按钮输入

提交按钮

HTML5新增输入类型

input元素属性

<select>元素

textarea元素

button元素

HTML媒体

HTML对象

object元素

embed元素

HTML音频

audio标签属性

`<select>`元素