1.什么是HTML？
1、HTML指的是超文本标记语言，HTML的英文全称是 Hypertext Marked Language。
2、用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。
3、使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
2.HTML的主要构架。
| 名称 | 形式 | 定义 |
| !DOCTYPE | <!DOCTYPE html> | doctype是页面的头信息，用来描述该页面遵循的HTML标准，<!doctype html>表示该页面遵循h5的标准。 |
| html | <html>内容</html> | html标签是页面的根标签，表示页面的根。HTML有两个子标签 head和body。 |
| head | <head>内容</head> | head标签是构架中的头，主要用来包裹页面不可见部分，主要做页面是属性设置。head的子标签有title。 |
| body | <body>内容</body> | body标签是构架中身体部分，用来表示页面的内容部分。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<title>这个是页面的标题</title> <!--不可见-->
</head>
<body>
这个是页面的内容部分
</body>
</html>3.常见的部分标签。
一部分。
| 名称 | 形式 | 定义 |
| meta | <meta charset="utf-8"> | charset是meta标签的属性，用来定义网页输出使用utf-8格式。 |
| title | <title>写标题</title> | title标签是head标签的子标签，用来写网页标题，网页显示写的标题不可见。 |
| p | <p>内容</p> | p标签是段落标签，两个及以上可以使用，有空格行。 |
| div | <div>内容</div> | div标签是标准块标签，两个及以上可以使用，无空格行。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
这是第一段。
这是第二段。
<p>
这是第一段。
</p>
<p>
这是第二段。
</p>
<div>
这是第一段。
</div>
<div>
这是第二段。
</div>
</body>
</html>网页显示：
二部分。
| 名称 | 形式 | 定义 |
| span | <span>内容</span> | span标签是标准行内标签，不改变包裹的内容。 |
| br/ | <br/> | br标签是换行标签，换行后没有空格行。 |
| b或strong | <b>内容</b> <strong>内容</strong> | b和strong标签是加粗标签，用来加粗显示包裹的内容。 |
| i或em | <i>内容</i> <em>内容</em> | i和em标签是加斜标签，用来加斜显示包裹的内容。 |
| u | <u>内容</u> | u标签是下划线标签，用来给包裹的内容加上下划线。 |
| del | <del>内容</del> | del标签是删除线标签，用来给包裹的内容加上删除线。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<p>
白鸽在天上盘旋着,当时正是一番最好的秋天的阳光,<span>鸽群</span>从天空滑过时,满空中泛着迷人的<b>白光</b>。这些<i>小家伙</i>,居然在见了<u>陌生人</u>之后,产生了<del>表演的欲望</del>,在空中潇洒而优美地展翅,滑翔或做集体性的俯冲,拔高与穿梭——选自《纸月》。<br/>白鸽在天上盘旋着,当时正是一番最好的秋天的阳光,鸽群从天空滑过时,满空中泛着迷人的<strong>白光</strong>。这些<em>小家伙</em>,居然在见了陌生人之后,产生了表演的欲望,在空中潇洒而优美地展翅,滑翔或做集体性的俯冲,拔高与穿梭——选自《纸月》。
</p>
</body>
</html>网页显示：
三部分。
| 名称 | 形式 | 定义 |
| hn | <hn>内容</hn> n属于1~6 | hn标签是标题大学标签，1~6表示6种不同大小的字体。 |
| pre | <pre></pre> | pre标签是一个自定义布局标签，可以自由布局内部内容。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
<h4>这是一个h4标题</h4>
<h5>这是一个h5标题</h5>
<h6>这是一个h6标题</h6>
<pre>
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义 布局内容
这是一个自定义布局 内容
</pre>
</body>
</html>网页显示：
四部分。
| 名称 | 形式 | 定义 |
| article | <article style="height:100px;border:1px solid red;">内容</article> | article标签是文章标签，style是属性，height:100px是高度为100像素 border:1px solid red是边界为1像素且边界成红色显示 |
| header | <header style="height:100px;border:1px solid red;">内容</header> | 与article同理 |
| section | <section style="height:100px;border:1px solid red;">内容</section> | 与article同理 |
| footer | <footer style="height:100px;border:1px solid red;">内容</footer> | 与article同理 |
| aside | <aside style="height:100px;border:1px solid red;">内容</aside> | 与article同理 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<article style="height:100px;border:1px solid red;">
这是文章标签
</article>
<header style="height:100px;border:1px solid red;">
这是头部标签
</header>
<section style="height:100px;border:1px solid red;">
这是正文标签
</section>
<footer style="height:100px;border:1px solid red;">
这是尾部标签
</footer>
<aside style="height:100px;border:1px solid red;">
这是侧列内容
</aside>
</body>
</html>网页显示：
4.多媒体标签。
| 名称 | 形式 | 定义 |
| img | <img src="指定图片路径" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/> | img标签是图片标签，src属性是用来指定要展示的图片的路径，可以是网页链接，也可以是指定的电脑位置，建议使用相对路径。width属性的宽度设置。title属性是表示图片的标题。alt属性表示当图片不可见的时候，会出现的文字描述。 |
| video | <video src="指定视频路径" height="500" controls autoplay></video> | video标签是视频标签，src属性是用来指定要播放的视频的路径。height属性是设置高度。controls autopaly是指不用惦记播放按钮，打开网页则直接播放。 |
| audio | <audio src="指定语音路径" controls autoplay="autoplay"></audio> | audio标签是语音标签，src属性是用来指定要播放的语音的路径。autoplay属性表示自动播放。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/>
<hr/>
<img src="img/a.jpg" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/>
</body>
</html>网页显示：
5.列表标签。
| 名称 | 形式 | 定义 |
| ol与li | <ol><li>内容</li></ol> | ol标签是有序列表标签，li标签是它的子标签。内部可嵌套。 |
| ul与li | <ul><li>内容</li></ul> | ul标签是无序列表标签，li标签是它的子标签。内部可嵌套。 |
| dl与dt dl与dd | <dl><dt>内容</dt></dl> <dl><dd>内容</dd></dd> | dl标签是无序列表标签，dt和dd标签是它的子标签。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--
HTML提供三种常用的列表标签
1、有序列表
2、无序列表
3、数据列表
-->
<div>
<h4>实时热点</h4>
<h1>有序列表</h1>
<ol>
<li>第一层列表</li>
<li>
第一层列表
<ol>
<li>第二层列表</li>
<li>第二层列表</li>
</ol>
</li>
<li>第一层列表</li>
</ol>
<hr />
<h1>无序列表</h1>
<ul>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>
这个是无序列表
<ul>
<li>子项</li>
<li>子项</li>
</ul>
</li>
</ul>
</div>
<hr />
<h2>数据列表</h2>
<dl>
<dt>国内热点新闻</dt>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
</dl>
</body>
</html>网页显示：
布局优化1：由上图网页显示可以看出布局不够完整，可以使用style标签中的属性type="text\css"。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--
HTML提供三种常用的列表标签
1、有序列表
2、无序列表
3、数据列表
-->
<div>
<h4>实时热点</h4>
<h1>有序列表</h1>
<ol>
<li>第一层列表</li>
<li>
第一层列表
<ol>
<li>第二层列表</li>
<li>第二层列表</li>
</ol>
</li>
<li>第一层列表</li>
</ol>
<hr />
<h1>无序列表</h1>
<ul>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>
这个是无序列表
<ul>
<li>子项</li>
<li>子项</li>
</ul>
</li>
</ul>
</div>
<hr />
<h2>数据列表</h2>
<dl>
<dt>国内热点新闻</dt>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
</dl>
</body>
</html>布局优化1网页显示：
布局优化2： style标签的使用，利用指定的id，通过标签选择修改，可以移动鼠标移动到网页字体上显示颜色标记，还可以改变width宽度，height高度等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
*{margin: 0;padding: 0;} -->选择所有文件进行布局
*/
/* 写css文件 */
#China {
/* 去掉li前面的点*/
border: 1px slid red;
}
/*
list-style:none;的意思是设置列表项目样式为不使用项目符号。
list-style-image: url(img/biao.png);的意思是换掉列表左边的小点
font-size: 18px;行间距为字体的两倍，这里的是行间距36px;
*/
#China>li {
list-style: none;
list-style-image: url(img/biao.png);
/*border: 1px solid red;*/
width: 400px;
height: 30px;
font-size: 18px;
color: #666;
}
/*显示设置的颜色*/
#China>li:hover {
color: red;
}
</style>
</head>
<body>
<ul id="China">
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
</ul>
</body>
</html>布局优化2网页显示：
6.超链接标签。
| 名称 | 形式 | 定义 |
| a | <a href="指定要打开的链接">内容</a> | a标签是超链接标签，主要用于页面之间的跳转和数据传递。 href属性是用来指定跳转的地址，支持网络地址和本地地址网络地址必须完整的url地址target属性用来指定页面的打开方式，默认使用_self，表示在当前选项卡打开。 当值为_blank，表示使用一个新的选项卡打开。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<h1>超链接标签</h1>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="多媒体标签" target="_self">自几写的html</a>
<a href="#">不知道跳哪儿？</a>
</body>
</html>网页显示：
7.超链接锚点标签。
超链接锚点标签是对a标签的思想加深，相信大家都使用过淘宝，淘宝有个功能就是点击到底部或者点击到达顶部则可以立刻到达，这个标签也就是实现这个功能的方法。
构架展示：
可以通过height高度设置对网页大小扩增，便于看出网页显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<!--id属性是对标签进行身份的标明，相当于人的名字一样，这里的意思就是对header标签赋予了它一个
名字top，对section标签赋予了它一个名字center，对footer标签赋予了它一个名字rear-->
<header style="height:100px;border:1px solid red;"id="top">
这是头部标签
<a href="#rear">到底部</a>
<a href="#center">到中间</a>
</header>
<section style="height:100px;border:1px solid red;"id="center">
这是正文标签
<a href="#center">到中间</a>
<a href="#rear">到底部</a>
</section>
<footer style="height:100px;border:1px solid red;"id="rear">
这是尾部标签
<a href="#top">到顶部</a>
<a href="#center">到中间</a>
</footer>
</body>
</html>8.表格标签。
| 名称 | 形式 | 定义 |
| table | <table align="center" border="1" width="800" cellpadding="0" cellspacing="0"></table> | table标签是表格标签。align="center"：居中属性。 border:属性border规定围绕表格的边框的宽度。 |
| tr | <tr></tr> | tr标签表示表格中的行。 |
| th | <th></th> | th标签是tr的子标签，表示表格中的加粗文字的列。 |
| td | <td></td> | td标签是tr的子标签，表示表格中的列。 |
| thead | <thead><th></th></thead> | thead标签是一个识别标签，用来包裹th标签的内容。 |
| tobody | <tobody><td></td></tobody> | tobody标签是一个识别标签，用来包裹td标签的内容。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<!--
border:属性border规定围绕表格的边框的宽度。
cellpadding:属性规定的是单元边沿与单元内容之间的空间。
cellspacing:属性规定[单元格]之间的空间。
table tr th td thead tobody 7
-->
<body>
<h1 align="center">用户信息</h1>
<table align="center" border="1" width="800" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>用户名称</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>用户地址</th>
<th>用户邮箱</th>
<th>用户操作</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">张三</td>
<td>男</td>
<td>16</td>
<td>广州</td>
<td>110@qq.com</td>
<td rowspan="5">无</td>
</tr>
<tr>
<td>李四</td>
<td rowspan="4">女</td>
<td>18</td>
<td>甘肃</td>
<td>120@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>共计：</td>
<td colspan="5">5人</td>
</tr>
</tbody>
</table>
</body>
</html>网页显示：
9.from表单标签。
| 形式：<form action="#" method="get"></form> |
| form：form标签，是用来包裹表单标签的。 |
| action：form标签的属性，它是用来指定提交的服务器端，一般对应url路径 。 |
| method：from标签的属性，用来规定本次提交的http协议的类型。 |
| form中的三大元素：1、input文本框 2、select下拉框 3、textarea文本域 |
| http1.1提供了8种请求方式：最常见的4种、1:get。2:post。3:delete。4:put。 |
10.get与post的相同之处和不同之处。
相同点：Get和Post都是用来获取和提交数据的一种方法，两者都可以实现与服务器的通信。
不同点：
| get | post |
| get的安全性较低，用户输入的参数直接显露在地址栏上。 | post的安全性较高，用户输入的参数不显露在地址栏上。但能被抓包获取数据。 |
| 某些浏览器对get的数据大小有限制。 | post的数据理论上面没有限制。 |
| get请求能被收藏。 | post请求不能被收藏。 |
| 服务器取值方式不一样。GET方式取值，如php可以使用$_GET来取得变量的值。 | POST方式通过$_POST来获取变量的值。 |
11.input标签的使用。
| 名称 | 形式 | 定义 |
| label | <label for="名字">内容</label> | label标签是取名标签，for是label的属性，用来定义名字。 |
| input属性 | 形式 | 定义 |
| name | name="名字" | name：名字，给予取名 |
| id | id="身份" | id：唯一性，身份，取身份，便于识别 |
| value | value="值" | value：值的意思 |
| input属性type | 形式 | 定义 |
| text | type="text" | text:文本框，默认显示输入框的文字 |
| passwork | type="password" | passwork：密码框，隐藏输入框的文字 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="username">用户名称</label>
<input type="text" id="username"/><br>
<label for="username">用户名称</label>
<input type="text" id="username" name="username" value="小明" /><br>
<label for="password">用户密码</label>
<input type="password" id="password" >
</form>
</body>
</html>网页显示：
========================================================
| input属性type | 形式 | 定义 |
| radio | type="radio" | radio：单项选择 |
| checkbox | type="checkbox" | checkbox：多项选择 |
| checked | checked | checked：默认选value中内容，与radio和checkbox配合使用 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="usrsex">用户性别</label>
<input type="radio" value="man" name="gender"/>男
<input type="radio" value="women" name="gender"/>女<br>
<label for="loved1">兴趣爱好1</label>
<input type="checkbox" name="fov" value="football"/>足球
<input type="checkbox" name="fov" value="basketball"/>篮球
<input type="checkbox" name="fov" value="LoL"/>英雄联盟
<input type="checkbox" name="fov" value="韩剧"/>韩剧<br>
<label for="loved2">兴趣爱好2</label>
<input type="checkbox" name="fov" value="football"/>足球
<input type="checkbox" name="fov" value="basketball" checked />篮球
<input type="checkbox" name="fov" value="LoL"/>英雄联盟
<input type="checkbox" name="fov" value="韩剧"/>韩剧
</form>
</body>
</html>网页显示：
========================================================
| input属性type | 形式 | 定义 |
| type="email" | email：邮箱的填写 | |
| url | type="url" | 统一资源定位符 |
| number | type="number" | number：号码的填写 |
| hidden | type="hidden" | 隐藏网页的相关元素 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="email">邮箱</label>
<input type="email" name="" id="" value=""/><br>
<label for="url">统一资源定位符</label>
<input type="url" name="" id="" value=""/><br>
<label for="number">手机号码</label>
<input type="number" name="" id="" value=""/><br>
<label for="hidden">隐藏网页的相关元素</label>
<input type="hidden" name="" id="" value=""/>
</form>
</body>
</html>网页显示：
========================================================
| input属性type | 形式 | 定义 |
| color | type="color" | color：选择颜色 |
| file | type="file" | file：文件选择域 |
| datetime—local | type="datetime-local" | datetime-local：选择本地日期时间 |
| date | type="date" | date：选择日期 |
| time | type="time" | time：选择时间 |
| range | type="range" | range:设置一个滑轮，可用min设置最小值，max设置最大值，value设置初始值 |
| reset | type="reset" | reset：重置所有已经填写的文字 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="usravatar">用户头像</label>
<input type="file" name="avatar"/><br>
<label for="color">颜色选择</label>
<input type="color" name="color" id="selectcolor" value="颜色选择"/><br>
<label for="datetime">日期时间</label>
<input type="datetime-local" name="time" id="selecttime" value="时间"/><br>
<label for="date">日期</label>
<input type="date" name="" id="" value=""/><br>
<label for="time">时间</label>
<input type="time" name="" id="" value=""/><br>
<label for="range">滑轮输入</label>0
<input type="range" name="" id="" value="" max="100" min="0" value="50"/>100<br>
<input type="reset" value="重置">
</form>
</body>
</html>网页显示：
========================================================
| input属性type | 形式 | 定义 |
| submit | type="submit" | submit：提交输入数据 |
| button | type="button" | button：不会提交数据，只是保存 |
| image | <input type="image" src="img/Authorized.jpg" width="250" height="70"> | image:提交，选择图片用来代替文字点击按钮，比如登录两个文字用图片来代替。src属性代表导入图片指定位置，width属性调节图片的宽。height调节图片的高。 |
| 名称 | 形式 | 定义 |
| button | <button>内容</button> | button标签是提交标签，使用文字代表提交按钮。也是提交数据。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<input type="submit" name="" value="登录"><br>
<input type="button" name="" value="保存"><br>
<input type="image" src="img/Authorized.jpg" width="250"
height="70"><br>
<button>保存按钮</button>
</form>
</body>
</html>网页显示：
========================================================
| input属性autofocus | 形式 | 定义 |
| no | autocomplete="no" | 自动记录输入过的值 |
| off | autocomplete="off" | 取消自动记录输入过的值 |
| input属性 | 形式 | 定义 |
| readonly | readonly | readonly:默认固定value文字，不可修改 |
| disabled | disabled | disabled:黑化选项，不可再点击修改 |
| required | required | required：必须填写内容提示 |
| placeholder | placeholder="内容" | 内容为打开网页时显示的一句话，点击输入时就没了 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<input type="text" id="username" autocomplete="no"><br>
<input type="text" id="username" value="小明" readonly><br>
<input type="text" id="username" value="小明" disabled><br>
<input type="text" id="username" placeholder="请输入你的名字！"><br>
</form>
</body>
</html>网页显示：
12.下拉框select标签和文本域textarea标签的使用。
| 名称 | 形式 | 定义 |
| select | <select><option></option></select> | select标签是下拉框标签。 |
| option | <option>内容</option> | option标签是select标签的子标签。 |
| textarea | <textarea rows="10" cols="30">内</textarea> | textarea 标签是文本框标签，属性rows调节宽度，cols调节长度。 |
构架展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<select name="address" id="address">
<option>请选择您的户籍所在地</option>
<option value="西安">西安</option>
<option value="广州">广州</option>
<option value="">兰州</option>
<option value="">深圳</option>
<option>银川</option>
</select><br>
<label for="addr">文本域：</label><br>
<textarea rows="10" cols="30">这里是文本域输入和拉框内容</textarea>
</form>
</body>
</html>网页显示：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
