使用静态网页开发技术发布的资源
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频，视频，HTML，CSS，JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器内置了静态资源的解析引擎，可以展示静态资源。
使用动态网页及时发布的资源
特点：
所有用户访问，得到的结果可能不太一样。
如：jsp/servlet，php，asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，将动态资源转换成静态资源，再发送给浏览器。
HTML：用于搭建基础网页，展示页面的内容。
CSS：用于美化页面，布局页面
Javascript：控制页面的元素，让页面有一些动态的效果。
Hyper Text Marup Language 超文本标记语言
超文本：超文本使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：由标签构成的语言。<标签名称> 如：html,xml
标记语言不是编程语言
1.html文档后缀名 .html 或者 .htm
2.标签分为：
1.围堵标签：又开始标签和结束标签。如：
2.自闭和标签：开始标签和结束标签在一起。 如：
3.标签可以嵌套：如：
<a><b></b></a>
4.在开始标签中可以定义属性。属性是由键值对儿构成，值选用引号（单引，双引都可）引起来。
5.html标签不缺分大小写，但是建议用小写。
<html>
<head>
<title>title</title>
</head>
<body>
<font color = 'red'>你好！中国。<font><br>
<font color = 'green'>你好！中国。<font>
</body>
</html>
构成html最基本的标签
html：html文档的根标签。整个网页是从<html>这里开始的，然后到</html>结束。
head：头标签。定义一些特殊内容，这些内容往往都是”不可见内容“（在浏览器不可见）。
<head>内部标签 说明
<title> 定义网页的标题
<meta> 定义网页的基本信息（供搜索引擎）
<style> 定义CSS样式
<link> 链接外部CSS文本或脚本文件
<script> 定义脚本语言
<base> 定义页面所有链接的基础定位（用得很少）
title：标题标签 定义网页标题
body：体标签 代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）
<!DOCTYPE html>：html5中定义该文档是html文档
和文本有关的标签
注释：<!-- 注释 -->
<h1>to<h6>：标题标签 h1~h6:字体由大变小
<p>:段落标签
<br>：换行
<hr>：展示一条水平线
属性：
color：颜色
width：宽度
size：高度
align：对齐方式
center：居中
left：左对齐
right：右对齐
<b>：字体加粗
<i>：字体斜体
<center>：文本居中
<font>：字体标签
属性：
color：颜色
size：大小
face：字体
属性：
color：
1.英文单词：red、green、blue
2.rgb(值1,值2,值3)：值的范围：0~255 如： rgb(0,0,255)
3.#值1值2值3：值的范围：00~FF之间。如：#FF00FF
width：
1.数值：width='20',数值的单位，默认是px(像素)
2.数值%：占比相对于父元素的比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签(标题)</title>
</head>
<!-- 注释 -->
<!-- br 换行 -->
白日依山尽，<br/> <!-- 或者<br>都可以 -->
黄河入海流。<br/>
<!-- 标题标签(h1~h6) -->
中国旅游网<br/>
<h1>中国旅游网h1</h1>
<h2>中国旅游网h2</h2>
<h3>中国旅游网h3</h3>
<h4>中国旅游网h4</h4>
<h5>中国旅游网h5</h5>
<h6>中国旅游网h6</h6>
<!-- 段落标签 p -->
<p>1.电视一直闪</p>
<p>2.联络方式都还没删</p>
<p>3你待我的好</p>
<p>4.我却错手毁掉</p>
<!-- hr 显示一条水平线 --> <!-- align 规定<hr>的对其方式 -->
<hr color="red" width="200" size="10" align="left"/>
<hr>
<!-- 加粗 b -->
白日依山尽<br/>
<b>白日依山尽</b>
<hr>
<!-- 斜体 i -->
白日依山尽<br>
<i>白日依山尽</i>
<br>
<!-- 颜色 color -->
<font color="red" size="5" face="楷体">好好学习</font><br>
<font color="#FF00FF" size="5" face="楷体">天天向上</font><br>
<!-- 宽度 width -->
<font color="red" width="5" size="10" align="left">人人为我</font><br>
<!-- 居中 -->
<center>
<font color="red" size="5" face="楷体">好好学习</font><br>
</center>
<br><br><br><br><br>
</body>
</html>
<img src=“路径” …/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- 展示一张图片 img -->
<img src="image/reba1.jpg" align="center" alt="美女" width="720" height="500"/>
<!--
相对路径
以 . 开头的路径
./ :代表当前目录 ./image/reba1.jpg
../ :代表上一级目录
-->
<img src="./image/reba2.jpg" align="left" alt="美女" width="500" height="600"/>
</body>
</html>
有序列表：ol、li
无序列表：ul、li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 ol -->
早上起床干什么1
<ol type="a" start="2">
<li>睁眼</li>
<li>看手机</li>
<li>洗澡</li>
<li>穿衣服</li>
</ol>
<hr> <!--分隔线-->
<!-- 无序列表 ul -->
晚上睡觉干什么
<ul type="disc"> <!--type="disc" 代表实心圆-->
<li>看手机</li>
<li>脱衣服</li>
<li>洗澡</li>
<li>闭眼</li>
</ul>
<ul type="square"> <!--type="square" 代表实心正方形-->
<li>看手机</li>
<li>脱衣服</li>
<li>洗澡</li>
<li>闭眼</li>
</ul>
<ul type="circle"> <!--type="circle" 代表空心圆-->
<li>看手机</li>
<li>脱衣服</li>
<li>洗澡</li>
<li>闭眼</li>
</ul>
</body>
</html>
<a>：定义一个超链接
属性：
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!-- 超链接 a （默认当前页面跳转，不保留跳转前的页面）-->
<a href="https://blog.csdn.net/weixin_51539416?spm=1011.2124.3001.5343">超链接跳转</a>
<br>
<!--超链接跳转 打开一个新的页面并且不保留跳转之前的页面-->
<a href="https://blog.csdn.net/weixin_51539416?spm=1011.2124.3001.5343" target="_self">超链接跳转</a>
<br>
<!--超链接跳转 打开一个新的页面同时保留跳转前的页面-->
<a href="https://blog.csdn.net/weixin_51539416?spm=1011.2124.3001.5343" target="_blank">超链接跳转</a>
<a href="./3_图片标签.html">列表标签</a><br>
<!--语法：mailto:...-->
<a href="mailto:zp19980731@163.com">联系我们</a>
<br>
<!--将超链接跳转绑定到一个图片上-->
<a href="https://blog.csdn.net/weixin_51539416?spm=1011.2124.3001.5343" target="_blank"><img src="./image/reba1.jpg"></a>
</body>
</html>
div：每一个div占满一行。块级标签
span：文本信息在一行展示，行内标签，内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--
div：每一个div占满一整行。称为块级标签
span：文本信息在一行展示，行内标签 内联标签
-->
<span>中国红</span>
<span>中国龙</span>
<hr>
<div>洹水安阳名不虚</div>
<div>三千年前是帝都</div>
</body>
</html>
html5为了提高程序可读性，提供了一些标签
1.<header> ：页眉
2.<footer> ：页脚
table：定义表格
with：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，单元格的线会合成一条
align：对齐方式
tr：定义行
td：定义单元格
th：定义表头单元格
caption：表格标题
thead：表格的头部分
tbody：表格的体部分
tfoot：表格的脚部分
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这三者必须要有。
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
说明：
<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
表格完整的结构
表格完整结构应该包括表格标题（caption）、表头（tbody）和表脚（tfoot）4部分。表格语义化之后，使得代码更清晰和更利于后期维护。
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
说明：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body> <!--table 表格--> <!--width 宽度-->
<!--border 边框--> <!--cellspacing 表格线与线之间的距离--><!--bgcolor 表格的背景色-->
<table border="1" width="50%" cellspacing="0" cellpadding="0" bgcolor="#adff2f" align="center">
<tr> <!--tr 定义行--> <!--cellpadding 定义内容和单元格之间的距离--><!--align 对齐方式-->
<!--<td>编号</td>
<td>姓名</td>
<td>成绩</td>-->
<th>编号</th> <!--th 定义表头的单元格-->
<th>姓名</th>
<th>成绩</th>
</tr>
<tr><!--tr 定义行-->
<td>1</td> <!--td 定义单元格-->
<td>张三</td>
<td>100</td>
</tr>
<tr><!--tr 定义行-->
<td>2</td><!--td 定义单元格-->
<td>李四</td>
<td>89</td>
</tr>
<tr><!--tr 定义行-->
<td>3</td><!--td 定义单元格-->
<td>王五</td>
<td>50</td>
</tr>
</table>
<hr><!--分隔线-->
<!--table 表格--> <!--width 宽度-->
<!--border 边框--> <!--cellspacing 表格线与线之间的距离--><!--bgcolor 表格的背景色-->
<table border="1" width="50%" cellspacing="0" cellpadding="0" bgcolor="red" align="center">
<thead> <!--thead 表示表格的头部分--><!--cellpadding 定义内容和单元格之间的距离--><!--align 对齐方式-->
<caption>学生信息表</caption> <!--caption 表格的标题-->
<tr> <!--tr 定义行-->
<!--<td>编号</td>
<td>姓名</td>
<td>成绩</td>-->
<th>编号</th> <!--th 定义表头的单元格-->
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody><!--tbody 表示表格的体部分-->
<tr bgcolor="aqua" align="center"> <!--字体居中定义行的背景色--><!--tr 定义行-->
<td>1</td><!--td 定义单元格-->
<td>张三</td>
<td>100</td>
</tr>
<tr><!--tr 定义行-->
<td>2</td><!--td 定义单元格-->
<td>李四</td>
<td>89</td>
</tr>
</tbody>
<tfoot><!--tfoot 表示表格的脚部分-->
<tr><!--tr 定义行-->
<td>3</td><!--td 定义单元格-->
<td>王五</td>
<td>50</td>
</tr>
</tfoot>
</table>
<hr><!--分隔线-->
<!--table 表格--> <!--width 宽度-->
<!--border 边框--> <!--cellspacing 表格线与线之间的距离--><!--bgcolor 表格的背景色-->
<table border="1" width="50%" cellspacing="0" cellpadding="0" bgcolor="#8a2be2" align="center">
<tr> <!--tr 定义行-->
<!--<td>编号</td>
<td>姓名</td>
<td>成绩</td>-->
<th rowspan="2">编号</th> <!--rowspan 上下格合并-->
<th>姓名</th><!--th 定义表头的单元格-->
<th>成绩</th>
</tr>
<!--tr 定义行-->
<tr bgcolor="aqua" align="center"> <!--字体居中定义行的背景色-->
<td>张三</td><!--td 定义单元格-->
<td>100</td>
</tr>
<tr><!--tr 定义行-->
<td>李四</td><!--td 定义单元格-->
<td colspan="2">89</td> <!--colspan 左右格合并-->
</tr>
</table>
</body>
</html>
表单：用于采集用户输入的数据。用于和服务器进行交互。
大部分表单都是用input标签完成的。
语法：
<input type="表单类型"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
from：用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
属性：
action:指定提交数据的url
method:指定提交方式
分类：一共7种，2种比较常见
get:
1.请求参数会在地址栏中显示
2.请求参数大小是有限制的。
3.不太安全
post:
1.请求参数不会再地址栏中显示。会封装在请求体中
2.请求参数的大小没有限制
3.较为安全
表单项中的数据要想被提交：必须指定其name属性
-->
<form action="#" method="post">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签_表单项标签</title>
</head>
<body>
<!--
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框
password：密码输入框
radio：单选框
注意：1.要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样。
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
checkbox：复选框
注意：1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域用于提交一些信息
按钮：
submit：提交按钮。可以提交表单
button：
lable：指定指定输入项的文字描述
注意：
lable的for属性一般会和 input 的 id 属性值 对应。如果对应了，则点击lable区域，会让input框获取焦点
select：下拉列表
子元素：option,指定列表项
textarea：文本域
cols：指定列数，就是指定每一行有多少字数
rows：默认多少行（行不够了自动扩容）
-->
<form action="success" method="get">
<label for="username">用户名</label> ：<input type="text" name="username" placeholder="请输入用户名" id="username"><br><!--placeholder 灰色默认值，发生变化后会清空-->
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="man" checked="checked">男 <!-- checked="checked" 指定默认值-->
<input type="radio" name="gender" value="women">女 <!--如果想要实现单选 name属性必须一样-->
<br>
爱好：<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="game" checked="checked">游戏
<input type="checkbox" name="hobby" value="work">工作<br>
文件上传:<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="隐藏域"><br>
取色器：<input type="color" name="color"><br>
生日1：<input type="date" name="birthday"><br>
生日2：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="email" name="email"><br>
年龄：<input type="number" name="age"><br>
省份：<select name="province省份">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select><br>
自我描述：
<textarea cols="20" rows="5" name="textarea文本域自我描述"></textarea>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="img/html&css.jpg"><!--图片提交按钮-->
</form>
</body>
</html>
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。
（1）id属性
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。
（２）class属性
顾名思义，就是“类”。它采用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。
如果你要为两个或两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个class。一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
对于id和class，我们总结一下：
对于页面关键结构建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作；也建议加上id，以便搜索引擎识别页面结构。
id：对应唯一的一个元素 CSS的元素选择机制，以 #id 的方式指定应用样式的元素。
class：对应一类元素
<!DOCTYPE html>
<html>
<head>
<style>
#foo {
color: red;
}
.baz {
color: bule;
}
</style>
</head>
<body>
<h4 id="foo">Heading a</h4>
<h4 class="baz">Heading b</h4>
<h4 class="baz">Heading c</h4>
</body>
</html>