HTML基础
Posted 酒茶白开水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础相关的知识，希望对你有一定的参考价值。
代码下载
简介
什么是html
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
<html> 与 </html> 之间的文本描述网页，<body> 与 </body> 之间的文本是可见的页面内容，<h(1~6)> 与 </h(1~6)> 之间的文本被显示为标题，<p> 与 </p> 之间的文本被显示为段落：
<html>
<body bgcolor="#faebd7">
<h2>简介</h2>
<p>第一个段落</p>
</body>
</html>
基础
HTML 标题（Heading）是通过<h1> - <h6>等标签进行定义的。HTML 段落是通过<p>标签进行定义的。HTML 链接是通过<a>标签进行定义的，在 href 属性中指定链接的地址。HTML 图像是通过<img>标签进行定义的，图像的名称和尺寸是以属性的形式提供的：
<h2>基础</h2>
<p>段落</p>
<!--用户无法查看图像，alt 属性可以为图像提供替代的信息。-->
链接：<a href="https://www.baidu.com">百度</a><br>
图像：<img src="timg.jpg" alt="胡列娜" width="638" height="338" align="top">
元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素），HTML 文档由嵌套的 HTML 元素构成。
<html> 元素定义了整个 HTML 文档。<body> 元素定义了 HTML 文档的主体。<p> 元素定义了 HTML 文档中的一个段落。
没有内容的 HTML元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br>标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br>在所有浏览器中都是有效的，但使用<br />其实是更长远的保障：
<h2>元素</h2>
<p>第一行<br/>第二行</p>
属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在 HTML 元素的开始标签中规定。
链接的地址在 href 属性中指定，
标题的对齐方式在 align 属性中指定：
<h2>属性</h2>
链接的地址在 href 属性中指定：<a href="https://www.baidu.com">百度</a><br/>
标题的对齐方式在 align 属性中指定：<h3 align="center">标题居中</h3>
主体的背景色在 bgcolor 属性中指定，表格的边框在 border 属性中指定。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
标题
标题（Heading）是通过<h1> - <h6>等标签进行定义的。<h1> 定义最大的标题，<h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行。默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推：
<h2>标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容：
<p>hr标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容：</p>
<hr />
注释：
<p>注释：</p>
<!--我是注释-->
常用标签：
| 标签 | 描述 |
|---|---|
<html> | 定义 HTML 文档 |
<body | 定义文档的主体 |
<h1> 到 <h6> | 定义 HTML 标题 |
<hr> | 定义水平线 |
<!--> | 定义注释 |
段落
段落是通过<p>标签定义的。浏览器会自动地在段落的前后添加空行（<p> 是块级元素）。使用空的段落标记<p></p>去插入一个空行是个坏习惯。用<br />标签代替它！
在不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签，<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
<h2>段落</h2>
<p>
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少？<br>
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。
</p>
常用标签：
| 标签 | 描述 |
|---|---|
<p> | 定义段落 |
<br /> | 插入单个折行（换行） |
样式
style 属性用于改变 HTML 元素的样式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
- background-color 属性为元素定义了背景颜色
- font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
- text-align 属性规定了元素中文本的水平对齐方式
style 属性淘汰了许多旧的标签和属性：
- 标签：
<center>定义居中的内容、<font>和<basefont>定义 HTML 字体、<s>和<strike>定义删除线文本、<u>定义下划线文本 - 属性：face定义字体、align定义文本的对齐方式、bgcolor定义背景颜色、color定义文本颜色
<h2>样式：</h2>
<p style="font-family: Verdana; color: red; font-size: 14px; align-content: center; background-color: cyan; text-align: left">
stype样式实现<br/>
字体：Verdana，颜色：红，字号：14px，背景色：青， 对齐方式：居左
</p>
<p align="center">
<font face="Times"; color="#00ffff"; size="3">
<center><u>旧的标签属性实现</u><br/>
<s>字体：Times，颜色：青，大小：3，背景色：古白， 对齐方式：居中</s>
</center>
</font>
</p>
文本格式化
文本格式化标签：
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本 |
| big | 定义大号字 |
| em | 定义着重文字 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字 |
| del | 定义删除字 |
| s | 不赞成使用，使用 del 代替 |
| strike | 不赞成使用，使用 del 代替 |
| u | 不赞成使用，使用样式（style）代替 |
<p>
<b>粗体字</b>
<big>大号字</big>
<em>着重字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气字</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入字</ins>
<del>删除字</del>
</p>
计算机输出标签：
| 标签 | 描述 |
|---|---|
| code | 定义计算机代码 |
| kdb | 定义键盘码 |
| samp | 定义计算机代码样本 |
| tt | 定义打字机代码 |
| var | 定义变量 |
| pre | 定义预格式文本 |
| listling | 不赞成使用，使用<pre>代替 |
| plaintext | 不赞成使用，使用<pre>代替 |
| xmp | 不赞成使用，使用<pre>代替 |
<p>
计算机输出标签，常用于显示计算机/编程代码<br/>
<code>
代码
</code>
<kbd>
键盘码
</kbd>
<samp>
计算机代码样本
</samp>
<tt>
打字机代码
</tt>
<var>
变量
</var>
<pre>
预格式文本保留了空格和换行，很适合显示计算机代码：
for (int i = 0, i < 5, i++)
printf("%s", i);
</pre>
</p>
预格式文本保留了空格和换行，很适合显示计算机代码。
引用和术语定义：
| 标签 | 描述 |
|---|---|
| abbr | 定义缩写 |
| acronym | 定义首字母缩写 |
| address | 定义地址 |
| bdo | 定义文字方向 |
| blockquote | 定义长的引用 |
| q | 定义短的引用语 |
| cite | 定义引用、引证 |
| dfn | 定义一个定义项目 |
<p>
引用和术语定义：<br/>
<abbr title="application">app</abbr>
<acronym title="World Wide Web">www</acronym><br/>
把鼠标移至缩略词语上时，title 可用于展示表达的完整版本<br/>
<bdo dir="rtl">从右往左</bdo><br/>
<blockquote>
块引用
</blockquote>
<q>短引用</q>
blockquote 元素浏览器会插入换行和外边距，而 q 元素除了加上引号不会有任何特殊的呈现
</p>
- 把鼠标移至缩略词语上时，title 可用于展示表达的完整版本
- blockquote 元素浏览器会插入换行和外边距，而 q 元素会加上引号
引用
<q>、<blockquote>，<abbr>，<bdo>同上
<dfn> 的用法，按照 HTML5 标准中的描述，有点复杂：
- 设置了 元素的 title 属性，则定义项目
- 元素包含具有标题的 元素，则 title 定义项目
- 文本内容即是项目，并且父元素包含定义
<p>
<dfn title="World Health Organization">WHO</dfn> 成立于1948年。<br/>
<dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于1948年。<br/>
<dfn>WHO</dfn> 成立于1948年。
</p>
<address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<cite> 元素定义著作的标题，浏览器通常会以斜体显示 元素。
计算机代码元素
同上
注释
注释标签<!--与-->用于在 HTML 插入注释，可以利用注释在 HTML 中放置通知和提醒信息，注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误。
条件注释，条件注释定义只有 Internet Explorer 执行的 HTML 标签：
<h2>注释：</h2>
<p>条件注释</p><br/>
<!--[if IE 8]>
<p>IE 8才执行</p>
<![endif]-->
CSS
格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
- 外部样式表，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。
<html>
<head>
<link rel="stylesheet" href="myFirstStyle.css" type="text/css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
- 内部样式表，当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过
<style>标签定义内部样式表。
<html>
<head>
<style type="text/css">
body background-color: antiquewhite
p margin-left: 30px
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
- 内联样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
<p style="color: black; background-color: red; margin-left: 10px">内联样式</p>
常用标签：
| 标签 | 描述 |
|---|---|
| style | 定义样式 |
| link | 定义资源引用 |
| div | 定义文档中的节或区域（块级） |
| span | 定义文档中的行内的小块或区域 |
| font | 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
| basefont | 定义基准字体。不赞成使用。请使用样式。 |
| center | 对文本进行水平居中。不赞成使用。请使用样式。 |
链接
HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
使用 标签在 HTML 中创建链接，有两种使用 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
使用 Target 属性，可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：
<a href="https://www.baidu.com" target="_blank">百度（新窗口打开）</a>
name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
锚的名称可以是任何你喜欢的名字。可以使用 id 属性来替代 name 属性，命名锚同样有效。
首先在 HTML 文档中对锚进行命名（创建一个书签）：
<h1><a name="top" id="base">HTML基础</a></h1>
<h2><a name="bottom"></a>标题20</h2>
然后在同一个文档中创建指向该锚的链接：
<a href="#top">回到页首（使用name）</a><br/>
<a href="#base">回到页首（使用id）</a><br/>
也可以在其他页面中创建指向该锚的链接：
<a href="anchorsHTML.html#bottom">回到目录页尾</a>
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
<a href="https://www.baidu.com/" target="_top">百度</a>
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
发送电子邮件：
<a href="mailto:xxx@163.com?subject=回家%20吃饭">发送邮件</a><br/>
<a href="mailto:xxx@qq.com?cc=aaaa@qq.com&bcc=bbb@qq.com&subject=回家%20吃饭">发送邮件</a>
图像
在 HTML 中，图像由<img>标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
width、height属性设置宽、高，src设置图像来源，gif动图和普通图像一样使用：
<p>为插入的网络图像设置宽高：</p><br/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606077666289&di=91a5b7a003fe39ecbc8b0e21240dd140&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11578844823%2F0.jpg" alt="胡列娜" width="540" height="360"><br/>
<p>插入另一个文件夹的gif动态图像（插入普通图像的语法没有区别）：</p><br/>
<img src="source/timg.gif" alt="唐三和小舞"><br/>
background属性设置背景图像。gif 和 jpg 图像均可用作 HTML 背景。图像小于页面，图像会平铺：
<html>
<body background="source/huliena.jpeg">
<p style="color: red">gif 和 jpg 图像均可用作 HTML 背景。<br/>
图像小于页面，图像会平铺。</p>
</body>
</html>
align属性设置图像对齐方式：
<p>默认图像对齐方式为底部对齐:<img src="baidu.jpg" alt="百度" width="50" height="37"></p><br/>
<p>居中对齐:<img src="baidu.jpg" alt="百度" width="50" height="37" align="center"></p><br/>
<p>顶部对齐:<img src="baidu.jpg" alt="百度" width="50" height="37" align="top"></p><br/>
带有图像的一个段落。图像的 align 属性设置为 “left”。图像将浮动到文本的左侧：
<html>
<body>
<p><img src="source/huliena.jpeg" alt="胡列娜" align="left" width="810" height="540">带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。</p><br/>
</body>
</html>
带有图像的一个段落。图像的 align 属性设置为 “right”。图像将浮动到文本的右侧：
<html>
<body>
<p><img src="source/huliena.jpeg" alt="胡列娜" align="right" width="810" height="540">带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。</p><br/>
</body>
</html>
alt属性设置图像替代文本，图像无法显示，将显示 “alt” 属性中的文本：
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。无法显示图像，将显示 "alt" 属性中的文本：<img src="/source/huliena.jpeg" alt="胡列娜"></p><br/>
<p>图像链接：<a href="https://www.baidu.com"><img src="baidu.jpg" alt="百度" width="50" height="37"></a></p><br/>
图像链接：
<p>图像链接：<a href="https://www.baidu.com"><img src="baidu.jpg" alt="百度" width="50" height="37"></a></p><br/>
图像映射：
<p>
点击图像上的星球：<br/>
<img src="source/eg_planets.jpg" alt="星球" border="0" usemap="#planetmap" align="center">
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0, 0, 110, 260" href="https://www.w3school.com.cn/example/html/sun.html" alt="太阳" target="_parent">
<area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/example/html/mercur.html" alt="水星" target="_parent">
<area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/example/html/venus.html" alt="金星" target="_parent">
</map>
img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>
ismap 属性将图像定义为服务器端图像映射。点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器：
<p>
当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端：<br/>
<a href="https://www.baidu.com/">
<img src="baidu.jpg" alt="胡列娜" width="100" height="74" ismap>
</a>
</p>
常用标签：
| 标签 | 描述 |
|---|---|
| img | 定义图像 |
| map | 定义图像地图 |
| area | 定义图像地图中的可点击区域 |
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
</tr>
</table>
border属性定义表格边框，如果不定义边框属性，表格将不显示边框：
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>20</td>
</tr>
</table>
表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：
<table border="2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>15</td>
</tr>
</table>
<table border="10">
<tr>
<th>姓名</td>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<th>年龄</th>
<td>10</td>
<td>15</td>
</tr>
</table>
如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来：
<table border="1">
<tr>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<table border="1">
<tr>
<td> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
表格标签：
| 表格 | 描述 |
|---|---|
<table> | 定义表格 |
<caption> | 定义表格标题 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
<col> | 定义用于表格列的属性 |
<colgroup> | 定义表格列的组 |
caption标签定义标题，cellpadding属性表示边距，cellspacing属性表示间距，background属性表示背景图，bgcolor属性表示背景色，colspan属性表示跨列，rowspan表示属性跨行：
<p>caption标签定义标题，cellpadding属性表示边距，cellspacing属性表示间距，background属性表示背景图，bgcolor属性表示背景色，colspan属性表示跨列，rowspan表示属性跨行：</p>
<table border="5" cellspacing="20" bgcolor="red">
<caption>标题</caption>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p></p>
<table border="5" cellpadding="10" background="source/page.jpeg">
<tr>
<th colspan="2">1</th>
<th>2</th>
</tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</table>
表格中可以包含段落、表格、列表等：
<p>表格中可以包含段落、表格、列表等：</p>
<table border="5">
<tr>
<td>
<p>第一段</p>
<p>第二段</p>
</td>
<td>
<table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>列表
<ul>
<li>一</li>
<li>二</li>
</ul>
</td>
<td>第四个单元格</td>
</tr>
</table>
width属性表示宽，align属性表示对齐方式：
<p>width属性表示宽，属性表示对齐方式：</p>
<table border="5" width="200">
<tr>
<td align="left">1</td>
<td align="center">2</td>
<td align="right">3</td>
</tr>
</table>
frame属性表示边框：
<p>frame属性表示边框：</p>
<table frame="box">
<tr>
<td>1</td>
</tr>
</table>
<br/>
<table frame="above">
<tr>
<td>2</td>
</tr>
</table>
<br/>
<table frame="below">
<tr>
<td>3</td>
</tr>
</table>
<br/>
<table frame="hsides">
<tr>
<td>4</td>
</tr>
</table>
<br/>
<table frame="vsides">
<tr>
<td>5</td>
</tr>
</table>
列表
HTML 支持有序、无序和定义列表。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 ul 标签。每个列表项始于 li。type标签表示列表类型（disc、circle、square分别为小圆点、小圆圈、小方框）：
<ul type="disc">
<li>
<ul type="circle">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
</li>
<li>
<ul type="square">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
</li>
</ul>
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。type标签表示列表类型（1、a、A、i、I分别为数字列表、小写字母列表、大写字母列表、小写罗马数字列表、大写罗马数字列表）：
<ol type="1">
<li>
<ol type="a">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
</li>
<li>
<ol type="A">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
</li>
<li>
<ol type="i">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
</li>
<li>
<ol type="I">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>
</li>
</ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始：
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 `dl` 标签开始。每个自定义列表项以 `dt` 开始。每个自定义列表项的定义以 `dd` 开始：</p>
<dl>
<dt>第一列</dt>
<dd>我是第一列</dd>
<dt>第二列</dt>
<dd>我是第二列</dd>
</dl>
| 标签 | 描述 |
|---|
块元素和内联元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<h1>, <p>, <ul>, <table>等是块级元素。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素是内联元素，可用作文本的容器。<b>, <td>, <a>, <img>等是内联元素。
<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
常用标签：
| 标签 | 描述 |
|---|---|
<div> | 定义文档中的分区或节（division/section） |
<span> | 定义 span，用来组合文档中的行内元素 |
类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
HTML<div> 元素是块级元素。它能够用作其他 HTML 元素的容器。设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：
<html>
<head>
<style>
.cities
background-color: black;
color: white;
margin: 20px;
padding: 20px;
</style>
</head>
<body>
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>
</body>
</html>
HTML <span> 元素是行内元素，能够用作文本的容器。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式：
<html>
<head>
<style>
span.red
color: red;
</style>
</head>
<body>
<span class="red">
<p>红色的字</p>
</span>
</body>
</html>
布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。使用四个 <div> 元素来创建多列布局：
<html>
<head>
<style>
#header
background-color: black;
color: white;
text-align: center;
padding: 5px;
#nav
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
padding: 5px;
float: left;
#section
width: 350px;
float: left;
float: left;
#footer
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br/>
Paris<br/>
Tokyo<br/>
</div>
<div id="section">
<h1>London</h1>
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>
</html>
HTML5 提供的新语义元素定义了网页的不同部分：
| header | 定义文档或节的页眉 |
|---|---|
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
<html>
<head>
<style>
header
background-color: black;
color: white;
text-align: center;
padding: 5px;
nav
line-height: 30px;
background-color: #eeeeee;
width: 100px;
float: left;
padding: 5px;
section
width: 350px;
float: left;
padding: 10px;
footer
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
</style>
</head>
<body>
<header>
<h1>
City Gallery
</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>
London
</h1>
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3School.com.cn
</footer>
</body>
</html>
<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
<html>
<head>
<style>
table.people
width: 100%;
border: bisque 1px solid;
table.people th, td
padding: 10px;
table.people th
width: 319;
</style>
</head>
<body>
<table class="people">
<tr>
<th>
<img src="timg.jpg" alt="胡列娜" width="319" height="169">
</th>
<td>
胡列娜是武魂殿被称为黄金一代的天才之一，被教皇比比东当成下一任教皇来培养，一直被菊斗罗月关暗中保护着。通过杀戮之都的历练后，胡列娜的成就超过邪月，成为黄金一代第一人，被册封为武魂殿圣女，教皇第一顺位继承人。武魂帝国立国后，胡列娜的身份随之水涨船高，成为了武魂帝国圣女，权力仅次于教皇比比东。
</td>
</tr>
</table>
</body>
</html>
响应式设计
- RWD 指的是响应式 Web 设计（Responsive Web Design）
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
<head>
<style>
.city
width: 300px;
height: 300px;
margin: 5px;
padding: 15px;
float: left;
border: 1px solid black;
</style>
</head>
<body>
<h1>响应式demo</h1>
<p>调整页面的的大小</p>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签（<frameset>）
- 框架结构标签（
<frameset>）定义如何将窗口分割为框架 - 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
Frame 标签定义了放置在每个框架中的 HTML 文档。
<html>
<frameset cols="20%, 30%, 50%">
<frame src="redHTML.html">
<frame src="greenHTML.html">
<frame src="blueHTML.html">
</frameset>
</html>
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"，noresize 属性框架是不可调整尺寸，在框架间的边框上拖动鼠标是无法移动的。。
<html>
<frameset rows="20%, 30%, 50%">
<frame src="redHTML.html" noresize="noresize">
<frame src="greenHTML.html">
<frame src="blueHTML.html">
</frameset>
</html>
为不支持框架的浏览器添加 <noframes> 标签。不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
<html>
<frameset cols="20%, 30%, 50%">
<frame src="redHTML.html">
<frame src="greenHTML.html">
<frame src="blueHTML.html">
</frameset>
<noframes>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>此浏览器无法处理框架！</p>
</body>
</noframes>
</html>
混合框架、内联框架、导航框架、跳转指定锚点等技巧查看代码实现。
Iframe
iframe 用于在网页内显示网页。
- src属性指定URL。
- height 和 width 属性用于规定 iframe 的高度和宽度，属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。
- frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框。
iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="https://www.baidu.com" target="redIframe">百度（从红色区域打开）</a>
<iframe src="redHTML.html" frameborder="1" width="100%" height="100%" name="redIframe"></iframe>
</body>
</html>
常用标签：
| 标签 | 描述 |
|---|---|
<iframe> | 定义内联的子窗口（框架） |
背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
- bgcolor属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
- background属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
<html>
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="red">
<h1>红色</h1>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body background="source/huliena.jpeg">
<p style="color: red">gif 和 jpg 图像均可用作 HTML 背景。<br/>
图像小于页面，图像会平铺。</p>
</body>
</html>
脚本
javascript 使 HTML 页面具有更强的动态和交互性。
<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容。
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>
你的浏览器不支持JavaScript
</noscript>
</body>
</html>
常用标签：
| 标签 | 描述 |
|---|---|
<script> | 定义客户端脚本 |
<noscript> | 为不支持客户端脚本的浏览器定义替代内容 |
文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到网页、图像、样式表、JavaScript
绝对文件路径是指向一个因特网文件的完整 URL。相对路径指向了相对于当前页面的文件。
使用相对路径是个好习惯（如果可能）。如果使用了相对路径，网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。
常用路径：
| 路径 | 描述 |
|---|---|
<img src="picture.jpg"> | picture.jpg 位于与当前网页相同的文件夹 |
<img src="images/picture.jpg"> | picture.jpg 位于当前文件夹的 images 文件夹中 |
<img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
<img src="../picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
头部
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表：
<style> 标签用于为 HTML 文档定义样式信息。可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
元数据（metadata）是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。name 和 content 属性的作用是描述页面的内容。
<script> 标签用于定义客户端脚本，比如 JavaScript。
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="UTF-8">
<meta http-equiv="content-language" content="zh-cn">
<meta http-equiv="refresh" content="5; url=https://www.baidu.com">
<meta name="author" content="QSP">
<meta name="date" content="2020/12/12">
<meta name="time" content="23:13:59">
<meta name="description" content="HTML head示例">
<meta name="generator" content="WebStorm 2020.2.1">
<meta name="keywords" content="HTML, head">
<base target="_blank">
<style>
img
width: 319px;
height: 169px;
</style>
<link rel="stylesheet" href="myFirstStyle.css" type="text/css">
<title>标题不会显示</title>
</head>
<body>
<h1>head</h1>
<p>meta属性标识了文本类型、编码、语言、重定向、作者、日期、时间、编辑软件、描述、关键字等</p>
<a href="https://baidu.com">百度将在新窗口中加载（没有设置target，在base中设置）</a>
<p>5秒后定向到百度</p>
<img src="timg.jpg" alt="胡列娜">
</body>
</html>
| 标签 | 描述 |
|---|---|
<head> | 定义关于文档的信息。 |
<title> | 定义文档标题。 |
<base> | 定义页面上所有链接的默认地址或默认目标。 |
<link> | 定义文档与外部资源之间的关系。 |
<meta> | 定义关于 HTML 文档的元数据。 |
<script> | 定义客户端脚本。 |
<style> | 定义文档的样式信息。 |
字符实体
HTML 中的预留字符必须被替换为字符实体。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。
使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，需要使用 字符实体。
<p><标签名>以上是关于HTML基础的主要内容，如果未能解决你的问题，请参考以下文章