HTML 知识点总结

2019-12-12 seo达人

一、HTML简介

HTML 俗称网页，就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的（或者与 HTML 技术相关的内容提供）。

HTML 全称为 HyperText Markup Language，被译为超文本标记语言。所谓的超文本就是不仅只有文本内容，包括链接、音频和视频、图像等内容。所谓标记语言，简单来说就是元素。也就是说，HTML 提供一系列的元素来构成一个页面中最基础的内容。

HTML 是一种描述 Web 文档结构和语义的语言，它由元素组成，每个元素可以有一些属性或文本。

当你保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。

编写HTML代码的工具：

记事本

sublime text

hbuilder

webstorm

vscode

pycharm – python代码也可以写html代码

二、第一张网页

一个页面有且只有一个根标签是html，元素一般包含和两个元素，也就是 HTML 的头部和主体内容。

<html>

<head>

<title>网页的标题</title>

</head>

<body>



<input type="text"></input>

</body>

</html>

1

2

3

4

5

6

7

8

9

HTML标签：由尖括号包围：

成对出现： <p></p> ,即开标签和闭标签.

属性：定义在开标签中，如input标签中的type属性

简写：开闭标签之间的内容是标签体，如果标签体为空，则可以简写：

注释：是注释标签

HTML文档在浏览器中被解释运行,展示的不是源码而是渲染之后的效果

三、HTML头部

< head > 元素包含了当前 HTML 页面的所有头部元素，在 < head > 元素内必须定义 < title > 元素，还可以定义 < script >、< link > 等元素。

这些 HTML 的头部元素定义了当前页面的标题、编码、使用的脚本或样式等信息。

1、title元素

< title >元素定义了当前HTML页面的标题

<title>百度一下，你就知道</title>

1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]

2、meta元素

元素提供了 HTML 页面的元数据（Metadata），元数据是存储数据的信息。

通常用于设置页面的编码、描述、关键词、作者等信息。

元素不会显示在页面中，但会被浏览器解析。

2.1 定义网页内容的编码格式

<meta charset="utf-8">

1

2.2 定义HTML页面关键字，用于搜索引擎

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

1

2.3 定义HTML页面描述

<meta name="description" content="百知教育IT培训,java培训,PHP培训,UI培训,H5培训,linux培训,大数据培训,Python人工智能,IT行业培训领跑者,高薪就业 ">

1

2.4 定义HTML页面作者

<meta name="author" content="百知教育">

1

四、HTML主体

1、body元素

标签定义文档的主体。元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。body元素中包含的内容（子标签）是用户可以看到的。

一个 HTML 文件只能存在一个标签。

2、HTML元素基本构成

2.1 元素类型

HTML 是标记语言，所谓标记就是指页面中的元素（元素也可以叫做标签）。一个完整的 HTML 页面都是由众多不同的元素组成的。

闭合元素：必须包含开始元素和结束元素，如果没有结束元素会产生意料之外的错误。

<title>百知教育Python人工智能培训</title>

<p>这是一个段落标签</p> 

1

2

空元素：也可以叫做单元素，只需要开始元素，而不需要结束元素。

<meta name="description" content="渥瑞达Web前端培训">

<br/> 

<input type="button" value="点我" /> 

1

2

3

五、HTML文本

1、标题元素

HTML 提供了 6 个标题元素，由大到小依次为 <h1> 到 <h6>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

1

2

3

4

5

6

7

8

9

10

11

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]

2、段落

元素定义段落

: 浏览器会自动地在段落的前后添加空行 ```html

这是一个段落.

1

这是另一个段落.


注意： 在html中手动换行无效<br />
<br />
3、换行<br />
元素定义的段落内容是不会自动换行的，如果换行需要使用 br 元素<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
&nbsp; &nbsp; 人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平线<br />
在浏览器中显示一条水平线（分隔线）效果。<br />
属性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 颜色 宽度 对齐方式<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
<span style="white-space:pre;"> </span>&lt;hr size="1" width="100%" color="red"/&gt;<br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修饰<br />
5.1 粗体字<br />
这是一段正常未加粗的文本内容.<br />
&lt;br&gt;<br />
&lt;b&gt;这是一段加粗之后的文本内容.&lt;/b&gt;<br />
&lt;br&gt;<br />
&lt;strong&gt;粗体--着重强调&lt;/strong&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜体字<br />
&lt;i&gt;这是一段斜体的文本内容.&lt;/i&gt;<br />
1<br />
5.3 下划线<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>证明人：&lt;u&gt;百知教育&lt;/u&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 删除线<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;del&gt;这是一段要被删除的文字&lt;/del&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下标文字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>H&lt;sub&gt;2&lt;/sub&gt;O<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上标文字<br />
32 = 9<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小号字<br />
正常文字<br />
&lt;small&gt;小号文字&lt;/small&gt;<br />
1<br />
2<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大号字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;small&gt;小号文字&lt;/small&gt;<br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span>&lt;big&gt;大号文字&lt;/big&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、图像与链接<br />
1、图像元素<br />
&nbsp;元素引入外部图像， 元素是空元素。<br />
<br />
1.1 src属性<br />
<span style="white-space:pre;"> </span>src 属性（必需），表示引入图像的 URL 地址。<br />
<br />
&lt;img src="images/img.png"&gt;<br />
1<br />
图像可以是本地地址，也可以是网络地址。<br />
<br />
&lt;img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"&gt;<br />
1<br />
1.2 图像大小<br />
width 和 height 属性用于设置图像显示的宽度和高度。<br />
<br />
&lt;img src="img.png" width="350" height="233" /&gt;<br />
1<br />
1.3 图像定位(了解)<br />
align 属性用于设置图像显示的位置。<br />
<br />
left：水平方向居左。<br />
right：水平方向居右。<br />
top：垂直方向居上。<br />
bottom：垂直方向居下。<br />
middle：居中。<br />
&lt;img src="img.png" width="350" height="233" align="right" /&gt;<br />
1<br />
1.4 alt属性<br />
&lt;img src="abcdef.png" alt="无法加载图片"/&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超链接<br />
2.1 用法<br />
href 属性（必需），表示指定跳转的 URL 地址<br />
<br />
&lt;a href="http://www.baizhiedu.com"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.2 打开方式： target 属性<br />
元素的 target 属性用于设置链接的打开方式。<br />
<br />
_blank：在新窗口打开链接。<br />
_self：在当前窗口打开链接。<br />
&lt;a href="http://www.baizhiedu.com" target="_blank"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.3 锚点<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;a name="postion"&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;!-- 定义锚点 --&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#postion"&gt;定位到postion的位置&lt;/a&gt;&nbsp; &lt;!-- 链接到锚点 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到顶部的空链接<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 页面其它内容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#"&gt;回到顶部&lt;/a&gt;&nbsp; &nbsp;&lt;!-- 回到顶部 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、无序列表<br />
1.1 定义无序列表<br />
元素定义无序列表，用于列出页面上没有特定次序的条目。<br />
&lt;ul&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type属性<br />
定义列表的项目符号的类型<br />
<br />
disc：实心圆，默认值。<br />
circle：空心圆。<br />
square：实心矩形。<br />
&lt;ul type="circle"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定义有序列表<br />
&lt;ol&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type属性<br />
1：数字值，默认值。<br />
a 或 A：小写或大写字母。<br />
i 或 I：小写或大写罗马数字。<br />
&lt;ol type="a"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重庆市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定义列表<br />
&lt;dl&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;北京&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;海淀&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;昌平&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;朝阳&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;广东&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;广州&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;深圳&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;东莞&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 &lt; table &gt; 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。<br />
<br />
&lt;table&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格属性<br />
属性名称<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>设置表格的宽度和高度<br />
align<span style="white-space:pre;"> </span>设置表格的对齐方式<br />
border<span style="white-space:pre;"> </span>设置表格的边框宽度<br />
bgcolor<span style="white-space:pre;"> </span>设置表格的背景颜色<br />
cellpadding<span style="white-space:pre;"> </span>设置内边距（单元格边框与内容之间的距离）<br />
cellspacing<span style="white-space:pre;"> </span>设置外边距（单元格之间的距离）<br />
bordercolor<span style="white-space:pre;"> </span>边框颜色<br />
&lt;table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右对齐方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直对齐方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景颜色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="center"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="right" valign="top" bgcolor="blue"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定义表格的数据单元格。<br />
属性名称<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>设置水平对齐方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>设置垂直对齐方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>设置单元格的宽和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>设置单元格的跨列和跨行数量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>单元格背景色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td align="center"&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td valign="top"&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td width="300px"&gt;第2行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td bgcolor='red'&gt;第2行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
&lt;table border="1" cellspacing="0" width="500px" height="200px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td colspan="2"&gt;第2行，第1列&lt;/td&gt;<span style="white-space:pre;"> </span>&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第3行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td rowspan="2"&gt;第3行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第4行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格标题caption<br />
元素用于定义表格的标题，必须紧随 元素之后，且只能对每个表格定义一个标题。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;表格标题&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行，第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表头thead、tbody表主体、tfoot表脚注<br />
标签定义表格的表头。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;信息&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;姓名&lt;/th&gt; &lt;!-- 定义表头单元格 会加粗显示 --&gt;&nbsp;&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;性别&lt;/th&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;/thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Tom&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;boy&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Linda&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;girl&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素应该与 thead 和 tbody 元素结合起来使用。 （比较少用）<br />
<br />
九、表单<br />
1、form 元素<br />
表单用标签描述，表单内部可以有多个子标签，用来完成用户信息的收集，并发送请求给服务器。<br />
<br />
属性：action=“xxx” method=“get/post”<br />
<br />
请求地址 请求方式<br />
<br />
http://www.baidu.com?uname=abc&amp;passwd=123<br />
&lt;form action="http://www.baidu.com" method="get"&gt;<br />
<span style="white-space:pre;"> </span>username:&lt;input type="text" name="uname" id="uname115"/&gt;&lt;br/&gt;&nbsp; # abc<br />
<span style="white-space:pre;"> </span>password:&lt;input type="text" name="passwd" id="pwd115"/&gt;&lt;br/&gt;&nbsp; &nbsp;# 123<br />
<span style="white-space:pre;"> </span>&lt;input type="submit" value="提交" id="sub115"/&gt;<br />
&lt;/form&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表单元素<br />
元素有很多不同类型，根据不同的 type 属性来决定。<br />
<br />
用户名：&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type属性：<br />
类型名称<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本输入框<br />
password<span style="white-space:pre;"> </span>密码框<br />
radio<span style="white-space:pre;"> </span>单选按钮<br />
checkbox<span style="white-space:pre;"> </span>复选框<br />
button<span style="white-space:pre;"> </span>按钮<br />
submit<span style="white-space:pre;"> </span>提交按钮<br />
reset<span style="white-space:pre;"> </span>重置按钮<br />
file<span style="white-space:pre;"> </span>文件域<br />
name属性 ：标签的普通的属性，相当于别名，是每个输入控件的重要属性==请求参数名。<br />
<br />
id属性 ： 标签的唯一标识名，不能重复。<br />
<br />
value属性 ：标签的普通属性，是中药属性==请求参数值。<br />
<br />
2.1 文本框<br />
用户名：&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用户名：&lt;input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /&gt;<br />
1<br />
2.2 密码框<br />
密码：&lt;input type="password" name="pwd" value="123456" /&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 单选按钮<br />
&lt;!-- name：值必须一样，value：表示提交表单时的值 checked:默认选中--&gt;<br />
&lt;input type="radio" name="sex" value="1"&gt;男&nbsp; &nbsp; &nbsp; &nbsp;<br />
&lt;input type="radio" name="sex" value="0" checked="checked"&gt;女<br />
1<br />
2<br />
3<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 复选框<br />
&lt;input type="checkbox" name="course" value="Mysql"&gt;Mysql<br />
&lt;input type="checkbox" name="course" value="HTML"&gt;HTML<br />
&lt;input type="checkbox" name="course" value="Linux"&gt;Linux<br />
&lt;input type="checkbox" name="course" value="Django"&gt;Django<br />
1<br />
2<br />
3<br />
4<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按钮<br />
&lt;input type="button" name="btn" value="点我"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按钮<br />
&lt;input type="submit" name="sub_btn" value="提交"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按钮<br />
&lt;input type="reset" name="set_btn" value="重置"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
&lt;input type="file"&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉选框<br />
选择课程：<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表单综合实例<br />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版权（copyright）<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>&reg;<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
ile"&gt;<br />
<br />
<br />
[外链图片转存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外链图片转存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉选框<br />
选择课程：<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外链图片转存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表单综合实例<br />
[外链图片转存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符号<br />
显示结果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>实体名称<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于号<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于号<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版权（copyright）<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注册商标<span style="white-space:pre;"> </span>&reg;<br />
™<span style="white-space:pre;"> </span>商标<span style="white-space:pre;"> </span>™<br />
<br />
<br />

分享本文至：

« 如何做好数据可视化设计？ Vue 数据持久化 »

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com