文章目录
一、认识HTML
1、HTML骨架格式
<HTML>
<head> <!-- 用于存放：title,meta,base,style,script,link等。
注意在head标签中我们必须要设置的标签是title -->
<title></title><!-- 设置页面标题 （必须设置）-->
</head>
<body>
</body><!-- 页面的主体部分，用于存放HTML标签如：p,h,a,div,span,img等标签 -->
</HTML>
2、HTML标签分类（两种）
- 双标签
<标签名> 内容 </标签名>
<body>我是文字</body>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
- 单标签
<标签名/>
<br/>
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
3、HTML标签关系（两种）
- 嵌套关系
<head>
<title> </title>
</head>
- 并列关系
<head></head>
<body></body>
二、创建HTML
<!DOCTYPE html>
<!-- 生成一个文档类型是HTML的文件 -->
<html lang='en'>
<!-- 文档识别英文（en），中文为（zh-CN） -->
<!-- 等号左侧为属性名，等号右侧为属性值 -->
<head>
<meta charset="UTF-8"><!-- 设置当前网页的字符集 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 兼容IE浏览器 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 兼容移动端 -->
<title>Document</title><!--设置当前页面标题-->
</head>
<body>
</body>
</html>
三、HTML标签
1、无标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
无标签时的默认文字1
无标签时的默认文字2
<!-- 在HTML中不识别换行和多个空格，多个空格和换行只是会生成一个空格 -->
</body>
</html>
2、标题标签（hn）
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。
<h1>标题文本</h1>、<h2>标题文本</h2>、<h3>标题文本</h3>
<h4>标题文本</h4>、<h5>标题文本</h5>、<h6>标题文本</h6>
<!-- h系列标签特点：文本加粗，字号越小文字越大，独占一行，上下留白 -->
<!-- 普通文本（无标签）与H4标签一样大，默认为16px（像素） -->
3、段落标签（p）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>段落标签</p>
<p>段落标签1</p><p>段落标签2</p>
<!-- 特点：独占一行，上下留白 -->
</body>
</html>
4、水平线标签（hr）
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr/>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 可以对水平线标签进行宽度的设定 -->
<hr/>
<!-- 贯穿整个页面的水平线 -->
<hr width="800px"/>
<!-- 宽度为800px的水平线 -->
</body>
</html>
5、换行标签（br）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是换行前的一句话<br>我是换行后的一句话
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是换行前的一句话
<br>
<br>
<br>
<br>
<br>
<br>
<br>
我是多次换行后的一句话
<!-- 有几个br就换几行 -->
</body>
</html>
6、盒子标签（div、span）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<div>我是第一个div</div><div>我是第二个div</div>
<!-- div特点：独占一行 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>我是span</span>
<span>我是第一个span</span><span>我是第二个span</span>
<!-- 没有特点 -->
</body>
</html>
7、文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 显示效果 |
|---|---|
<b></b><strong></strong> | 文字加粗 |
<i></i><em></em> | 文字斜体 |
<i></i><em></em> | 文字加删除线 |
<i></i><em></em> | 文字加下划线 |
b i s u 只有使用没有强调的意思，strong em del ins 语义更强烈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
加粗<b>b</b>
加粗<strong>strong</strong>
斜体<i>i</i>
斜体<em>em</em>
删除线<s>s</s>
删除线<del>del</del>
下划线<u>u</u>
下划线<ins>ins</ins>
</body>
</html>
8、标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
| 序号 | 注意事项 |
|---|---|
| 1 | 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。 |
| 2 | 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 |
| 3 | 任何标签的属性都有默认值，省略该属性则取默认值。 |
| 4 | 采取 键值对的格式 key=“value” 的格式。 |
<hr width="400px" />
<!-- 属性 是 宽度（width） ， 值 是 400px -->
9、图像标签（img）
要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../picture/bg3.png" alt="图像不能显示时的替换文本" width="200px" height="200px" title="鼠标悬停时显示的内容"/>
</body>
</html>
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像路径（img标签的必需属性） |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
10、链接标签（a）
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com" target="_self">文本或图像</a>
</body>
</html>
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | URL | 跳转目标地址 |
| target | _self（默认值在自身窗口打开）和_blank（在新窗口中打开） | 目标窗口的弹出方式 |
有一下四点需要注意：
<!-- 外部链接需要添加 http://或https:// -->
<a href="https://www.baidu.com" target="_self">外部链接（百度）</a>
<a href="https://www.xiaomi.com" target="_blank">外部链接（小米）</a>
<!-- 内部链接 直接链接内部页面名称即可 -->
<a href="段落标签.html" target="_blank">内部链接（html文件）</a>
<a href="../picture/bg3.png"target="_self">内部链接（图片）</a>
<!-- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 -->
<a href="#">空链接</a>
<!-- 一定要有文字或者图像，否则不会显示 -->
1.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
1.使用<a href=”#id名>“链接文本"</a>创建链接文本。
2.使用相应的id名标注跳转目标的位置。
实例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- lorem*n可以随机生成n行假文 -->
<a href="#text1">第一段</a>
<a href="#text2">第二段</a>
<a href="#text3">第三段</a>
<a href="#text4">第四段</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="text1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga laborum delectus, repellat consequatur veniam placeat consequuntur exercitationem minus a hic officia eum facere eveniet nostrum. Labore exercitationem necessitatibus adipisci eligendi.
Inventore eos magni nesciunt ratione est nihil minima, nemo eligendi expedita unde voluptate labore rem cupiditate consequatur veritatis itaque libero cum tempore rerum, aliquam odio vero eveniet fugit voluptas. Nesciunt!
Asperiores nam voluptates, nostrum laborum minima ad inventore, obcaecati placeat animi fugiat saepe accusamus voluptatem possimus, neque recusandae! Possimus iusto architecto deleniti neque voluptates provident pariatur nulla necessitatibus explicabo consectetur.
Quo nisi quidem saepe ipsum deserunt totam. Consequuntur, deserunt unde. Nemo, nulla. Quae quibusdam error incidunt porro, deleniti repellendus, consequatur optio odio doloribus dolorem necessitatibus iste quo ea quia quod?
Ducimus laudantium quas dolorum deserunt? Corrupti odio fugit at, dolorem velit est, sapiente numquam cumque quibusdam possimus aliquid fugiat explicabo officiis? Quae animi asperiores maxime ea sapiente repellendus sunt id?
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="text2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis facere tempore natus cumque quo, exercitationem ipsa, commodi, consequatur velit consectetur hic! Explicabo vitae adipisci aperiam earum praesentium repellendus illum consequuntur?
Asperiores delectus vitae beatae cupiditate nemo quidem id voluptate explicabo sunt, rerum libero eius aliquam unde tenetur laudantium minima facilis, ratione tempore. Veniam unde eos ex adipisci reiciendis. Laborum, nesciunt.
Necessitatibus rem nam vitae id tenetur. Eaque eius odit atque dolor cupiditate repellendus consectetur expedita fugit maiores quidem! Aperiam nisi fugit consequatur temporibus optio sit? Molestias tempore impedit explicabo temporibus!
Similique tenetur praesentium veniam rem. Maxime qui, illum, quidem ut doloremque enim eum, repudiandae ex aspernatur molestiae magni porro laudantium alias cum perspiciatis. Numquam, accusamus! Molestias molestiae doloremque saepe omnis?
Quam, neque mollitia, a temporibus quod molestiae, aperiam similique quia est perspiciatis explicabo! Labore unde in perspiciatis saepe officiis, non facilis velit optio voluptates accusantium accusamus consectetur voluptas quaerat deleniti.
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="text3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam nostrum voluptatum facilis, et delectus qui cumque fuga quasi voluptate sed repellendus blanditiis laudantium. Ab exercitationem maxime blanditiis, modi ducimus dolor?
Quibusdam, consequatur itaque assumenda quam dolore officiis unde culpa alias veniam doloremque natus odit ipsam cupiditate autem optio omnis incidunt necessitatibus molestiae in, ex, exercitationem perferendis mollitia provident debitis? Ipsam?
Laudantium perferendis consequuntur, illum mollitia enim voluptatem, modi labore quo nesciunt est inventore quis dolorem minima laborum iusto architecto reiciendis, earum delectus ab recusandae porro. Animi accusantium ipsum atque porro?
Similique sunt earum accusantium explicabo fugit eveniet dolor reprehenderit harum temporibus aperiam non dolores et vel culpa qui consectetur optio voluptatum, provident incidunt ab ipsa, sequi, assumenda porro. Ratione, qui!
Non corporis totam aperiam deleniti adipisci provident, beatae illum obcaecati. Consectetur temporibus molestiae fuga provident eum porro expedita! Expedita nemo repudiandae assumenda sit facilis eius numquam necessitatibus rem dolore saepe?
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="text4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam libero dolorem commodi ex obcaecati incidunt unde modi accusantium perspiciatis. Ipsa magnam quidem obcaecati ullam! Unde alias optio atque sint accusantium?
Reiciendis tempore nulla esse incidunt sed, porro, omnis, explicabo ut quasi eligendi est voluptatibus dolorem voluptatem laudantium illum enim at sequi veniam ipsum non labore earum adipisci? Accusantium, illum fuga?
Voluptate sed molestias accusantium ullam, omnis animi necessitatibus eius, repudiandae distinctio aspernatur architecto nostrum quo, reiciendis cupiditate illum rem libero nobis quaerat quibusdam corrupti aliquid consequatur placeat fugit! Reiciendis, omnis.
Quae odio temporibus consequuntur in expedita soluta animi explicabo, nobis dolores. Molestias obcaecati omnis pariatur aperiam cumque excepturi amet ab odio saepe aspernatur! Explicabo, in nisi quod tenetur deleniti suscipit!
Numquam perferendis et corporis quibusdam doloribus. Esse, adipisci. Facilis debitis quo eum culpa quis, quaerat recusandae quae eaque optio, quisquam corporis consequatur consequuntur accusantium rerum, error repellat provident possimus cum.
</div>
</body>
</html>
11、base 标签
base 可以设置整体链接的打开状态，写在<head></head>之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base target="_self">
<!-- 统一设置没有设置跳转方式的链接标签（a），设置跳转方式的链接标签（a）不会被base影响，会根据自己的跳转方式进行跳转 -->
</head>
<body>
<a href="https://www.baidu.com" target="_blank">自身有跳转方式的外部链接标签</a>
<a href="https://www.xiaomi.com">自身没有跳转方式的外部链接标签</a>
<a href="段落标签.html" target="_blank">自身有跳转方式的内部链接标签</a>
<a href="段落标签.html">自身没有跳转方式的内部链接标签</a>
</body>
</html>
12、特殊字符标签
HTML为这些特殊字符准备了专门的替代代码（如有需要可以到百度上搜索）
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| © | 版权 | © |
| ® | 注册商标 | ® |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是空格符前的一句话 我是空格符后的一句话
<!-- 在每一个字符的代码后面需要加英文的;这样才能生效 -->
</body>
</html>
13、列表标签（三种）
1.无序列表（ul）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
</ul>
</body>
</html>
无序列表可以通过type属性改变前面的样式
<!-- ul的特点：独占一行，上下留白
li的特点：独占一行，前面有样式 ,样式默认为disc（实心小圆圈），可以通过type来更改，
可以作用在ul上使他下面的所有li进行样式改变，或者只是作用在li上，改变某一个li前面的样式-->
<ul type="square">
<li>第一个ul里面的第一个li</li>
<li>第一个ul里面的第二个li</li>
<li>第一个ul里面的第三个li</li>
<li>第一个ul里面的第四个li</li>
</ul>
<ul type="disc">
<li>1第二个ul里面的第一个li</li>
</ul>
<ul type="circle">
<li>第三个ul里面的第一个li</li>
<li>第三个ul里面的第二个li</li>
<li>第三个ul里面的第三个li</li>
<li>第三个ul里面的第四个li</li>
</ul>
<ul>
<li type="square">第四个ul里面的第一个li</li>
<!-- 实心小方块 -->
<li type="disc">第四个ul里面的第一个li</li>
<!-- 实心小圆圈 -->
<li type="circle">第四个ul里面的第一个li</li>
<!-- 空心小圆圈 -->
</ul>
注意
| 序号 | 内容 |
|---|---|
| 1 | <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 |
| 2 | <li>与</li>之间相当于一个容器，可以容纳所有元素。 |
2.有序列表（ol）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
</ol>
</body>
</html>
有序列表有两个属性，一个是type属性，另一个是start属性（只能在ol上使用，在li上无效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- type属性值有"1,a,A,i,I" start属性决定了序号从几开始（必须为数字并且开始为1，不是0） -->
<ol type="a" start="1">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ol>
<ol type="A" start="3">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ol>
<ol >
<li type="A" start="3">第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ol>
</body>
</html>
3.自定义列表（dl，dt，dd）
自定义列表的列表项前没有任何项目符号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>列表1</dt>
<dd>列表1的第一个dd</dd>
<dd>列表1的第二个dd</dd>
<dd>列表1的第三个dd</dd>
</dl>
<dl>
<dt>列表2</dt>
<dd>列表2的第一个dd</dd>
<dd>列表2的第二个dd</dd>
<dd>列表2的第三个dd</dd>
</dl>
<dl>
<dt>列表3</dt>
<dd>列表3的第一个dd</dd>
<dd>列表3的第二个dd</dd>
<dd>列表3的第三个dd</dd>
</dl>
<!-- dt为列表头 -->
</body>
</html>
14、表格标签（table、tr、td）
在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>;、<td></td>，他们是创建表格的基本标签，缺一不可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
| 序号 | 内容 |
|---|---|
| 1 | table用于定义一个表格。 |
| 2 | <tr></tr>用于定义表格中的一行，必须嵌套在<table></table>中，在<table></table>中包含几对<tr></tr>，就有几行表格 |
| 3 | <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列 |
| 4 | <tr></tr>中只能嵌套<td></td> |
| 5 | <td></td>标签，他就像一个容器，可以容纳所有元素 |
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框（默认border = ”0“） | 像素值 |
| cellspacing | 设置单元格与单元格之间的空白间距 | 像素值（默认2px） |
| cellpadding | 设置内容与单元格边框之间的空白间距 | 像素值（默认1px） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left（居左）、center（居中）、right（居右） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="100px" cellpadding="50px">
<!-- border只能作用在table上 -->
<!-- cellspacing单元格与单元格之间的空白间距(只能做用到table上)，
cellpadding内容与单元格之间的空白间距(只能做用到table上)-->
<!-- 当align作用到table上时，整个table表格在页面上居中，作用到tr上时一行单元格的内容居中，
作用到td上时，一个单元格的内容居中 -->
<tr align="center">
<!-- tr代表行，td代表列 -->
<td>第一行第一个</td>
<td>第一行第二个</td>
<td>第一行第三个</td>
</tr>
<tr align="center">
<td>第二行第一个</td>
<td>第二行第二个</td>
<td>第二行第三个</td>
</tr>
<tr align="center">
<td>第三行第一个</td>
<td>第三行第二个</td>
<td>第三行第三个</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- table统一设置整体的表格宽度和高度，
tr只能设置高度并统一改变所选行的高度，
td只能设置宽并统一改变所在列的宽度，
文字也会撑大单元格 -->
<table border="1">
<tr align="center" height="200px">
<td width="100px">第一行一个</td>
<td>第一行二个</td>
<td>第一行三个</td>
</tr>
<tr align="center" height="100px">
<td>第二行一个</td>
<td>第二行二个</td>
<td>第二行三个</td>
</tr>
<tr align="center" height="100px">
<td>第三行一个</td>
<td>第三行二个</td>
<td>第三行三个</td>
</tr>
</table>
</body>
</html>
1.表头标签（th）
表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="200px" height="200px" align="center">
<tr align="center">
<th>第一行一个</th>
<th>第一行二个</th>
<th>第一行三个</th>
</tr>
<tr align="center">
<th>第二行一个</th>
<td>第二行二个</td>
<td>第二行三个</td>
</tr>
<tr align="center">
<th>第三行一个</th>
<td>第三行二个</td>
<td>第三行三个</td>
</tr>
</table>
</body>
</html>
2.表格结构（thead、tbody）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="200px" height="200px" align="center">
<thead>
<tr align="center">
<td>第一行一个</td>
<td>第一行二个</td>
<td>第一行三个</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>第二行一个</td>
<td>第二行二个</td>
<td>第二行三个</td>
</tr>
<tr align="center">
<td>第三行一个</td>
<td>第三行二个</td>
<td>第三行三个</td>
</tr>
</tbody>
</table>
</body>
</html>
3.合并单元格（rowspan、colspan）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500px" height="500px" align="center">
<tr align="center">
<td colspan="2">第一行一个</td>
<!-- 跨列默认是向右跨列，跨几列就填数字几（最小为2），
会占据所跨单元格的位置，使其他的单元格溢出，需要删除 -->
<td>第一行二个</td>
<td>第一行三个</td>
</tr>
<tr align="center">
<td rowspan="2">第二行一个</td>
<!-- 跨行默认是向下跨行，跨几行就填数字几（最小为2），
会占据所跨单元格的位置，使其他的单元格溢出，需要删除 -->
<td>第二行二个</td>
<td>第二行三个</td>
</tr>
<tr align="center">
<td>第三行一个</td>
<td>第三行二个</td>
<td>第三行三个</td>
</tr>
</table>
</body>
</html>
合并单元格的思想：将多个内容合并的时候，就会有多余的东西，把它删除。例如：把 3个td合并成一个，那就多余了2个，需要删除。理想效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="500" height="500" border="1" align="center">
<tr align="center" >
<th colspan="2">1</th>
<th rowspan="2">2</th>
</tr>
<tr align="center">
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr align="center">
<td colspan="2">7</td>
</tr>
</table>
</body>
</html>
15、表单标签（form）
在HTML中，<form></form>标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="地址" method="提交方法" name="表单名称">
表单控件
</form>
</body>
</html>
| 序号 | 常用属性 | 说明 |
|---|---|---|
| 1 | Action | 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 |
| 2 | method | 用于设置表单数据的提交方式，其取值为get或post。 |
| 3 | name | 用于指定表单的名称，以区分同一个页面中的多个表单 。 |
input控件
| 属性 | 属性值 | 说明 |
|---|---|---|
| type | text | 单行文本输入框 |
| type | password | 密码输入框 |
| type | radio | 单选按钮 |
| type | checkbox | 复选框 |
| type | button | 普通按钮 |
| type | submit | 提交按钮 |
| type | reset | 重置按钮 |
| type | image | 图像形式的提交按钮 |
| type | file | 文本域 |
| name | 用户自定义 | 控件的名称 |
| value | 用户自定义 | input控件中的文本默认值 |
| size | int（正整数） | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的某一项 |
| maxlength | int（正整数） | 控件允许输入的最多字符数 |
1.文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
<!-- 文本输入框 -->
文本输入框：<input type="text" maxlength="6" name="username" value="请输入用户名" readonly="readonly" >
</form>
</body>
</html>
| 序号 | 属性 | 说明 |
|---|---|---|
| 1 | readonly | 将输入框设置为只读状态(不能编辑) |
| 2 | disabled | 输入框未激活状态 |
| 3 | value | 设置文本输入框的默认文本 |
| 4 | maxlength | 设置文本输入框文本的最大长度 |
2.单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
<!-- 单选按钮 -->
单选按钮： <input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>未知
</form>
</body>
</html>
| 序号 | 注意 |
|---|---|
| 1 | 在使用单选按钮时，需要多个单选按钮配合使用，只有将多个单选按钮的name值设置相同时，才被视为一组，从而实现单选效果。 |
| 2 | checked="checked"属性为：设置默认选择项。对于单选按钮，checked属性只能作用在一个<input>标签上,如果所有的单选按钮都加上这个属性，默认作用在最后一个单选按钮上。 |
3.多选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
<!-- 多选按钮 -->
多选按钮：<input type="checkbox" name="地区" checked>北京
<input type="checkbox" name="地区" checked>青岛
<input type="checkbox" name="地区" checked>济南
</form>
</body>
</html>
4.label标签
用于绑定一个表单input控件, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点（按钮与文字进行绑定，不必非要点击按钮，只需要点击文字就可以进行按钮选中）。
做法：只需要将lable标签中的for属性与input标签的id属性保持一致就可以进行绑定。
<label for="areaQD">
<input type="checkbox" name="地区" id="areaQD">青岛
</label>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
复选按钮：<label for="areaBJ">
<input type="checkbox" name="地区" id="areaBJ">北京
</label>
<label for="areaQD">
<input type="checkbox" name="地区" id="areaQD">青岛
</label>
<label for="areaJN">
<input type="checkbox" name="地区" id="areaJN">济南
</label>
<br>
单选按钮：<label for="man">
<input type="radio" name="sex" id="man">男
</label>
<label for="woman">
<input type="radio" name="sex" id="woman">女
</label>
</form>
</body>
</html>
5.textarea控件（文本域）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
<textarea name="文本域" id="text" cols="10" rows="10">
我是默认输入的文本内容
</textarea>
</form>
</body>
</html>
| 序号 | 说明 |
|---|---|
| 1 | cols属性控制每行中的字符数 |
| 2 | rows属性控制显示的行数 |
| 3 | 文本域自身有控制大小的功能，所以比较鸡肋 |
6.拉下菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="列表" id="列表" multiple>
<option value="0">---qing---</option>
<option >辽宁</option>
<option >吉林</option>
<option >省外</option>
</select>
</body>
</html>
| 序号 | 说明 |
|---|---|
| 1 | <select></select>中至少应包含一对<option><option> |
| 2 | 在<option></option>中定义select = 'selected’时，可以使当前项默认被选中 |
| 3 | multiple = 'multiple’将下拉列表设置为多选项 |
| 4 | <optgroup></optgroup> 可以将下拉选择<option></option>进行分组，可以在<optgroup></optgroup>中设置label=‘分组名称’ 这个属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
单选：<select name="北方地区" id="areaB">
<optgroup label="黑龙江">
<option value="1">齐齐哈尔</option>
<option value="2">哈尔滨</option>
<option value="3">牡丹江</option>
</optgroup>
<optgroup label='北京'>
<option value="">北京</option>
</optgroup>
</select>
多选：<select name="南方地区" id="areaN" multiple>
<optgroup label="山东">
<option value="">济南</option>
<option value="">青岛</option>
<option value="">济宁</option>
<option value="">泰安</option>
</optgroup>
</select>
</form>
</body>
</html>
7.表单信息分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="first">
<fieldset>
<legend>北方地区</legend>
单选：<select name="北方地区" id="areaB">
<optgroup label="黑龙江">
<option value="1">齐齐哈尔</option>
<option value="2">哈尔滨</option>
<option value="3">牡丹江</option>
</optgroup>
<optgroup label='北京'>
<option value="">北京</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>南方地区</legend>
多选：<select name="南方地区" id="areaN" multiple>
<optgroup label="山东">
<option value="">济南</option>
<option value="">青岛</option>
<option value="">济宁</option>
<option value="">泰安</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
</html>
扫一扫
3243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
