一、什么是HTML
HTML：超文本标记语言
超文本：指页面内容包括图片，链接，视频等非文本信息。
标记语言：指标记（标签）构成的语言。
二、静态网页和动态网页的区别，z
静态网页和动态网页区分的一个很重要的指标就是：程序是否在服务端运行。在服务端运行的程序，网页都是动态的，反之是静态的.也就是说，直接运行在客户端的网页，程序都是静态网页
静态网页
1、静态网页是放在服务器上的不能随便修改，想要修改静态页面必须修改页面后覆盖在服务器上的才可以。
2、静态页面通常都有一个固定的URL，在服务器上都有一个对应的文件。常以html, htm结尾，不含？
3、静态页面无法连接数据库
4、现在的页面很多都使用了js,导致浏览器打开页面时候就占用了大量的内存，服务器是没有压力但是压力转移到客户端。
动态网页
1、动态页面一般是根据服务器生成的，不同的人访问相同的页面显示的内容是不一样的。
2、动态页面的功能更加丰富，可以实现用户的登录，注册，交互等
3、 动态页面以数据库为基础
三、标签
由于历史的原因，不同浏览器的渲染方式各不相同，甚至相同浏览器的不同版本都不一样，所以就会出现很多兼容性的问题。出现这种现象的原因就是缺乏一个统一的标准，后面W3C标准应运而生，后面的浏览器就都按这标准去渲染。但是历史遗留问题依旧存在，就是很多电脑装的都是老的浏览器版本，为了保证老浏览器能正常渲染这些新的网页，所以这就必须在网页中声名渲染方式。
后面新的网页只要写上<!DOCTYPE html>标签就是按标准方式去渲染。
四、head标签
meta标签
meta标签有两个属性，http-eqiv和name
1、name主要是声名一些网页的相关介绍，和seo ，访客查看。
<meta name="keywords" content="深圳大学，深大，深圳继续教育学院">
<meta name="description" content="深圳大学梦开始的地方">
2、http-eqiv http文件头，传递一些有用的信息帮助浏览器更好的渲染页面。
<meta http-equiv="Refresh" content="2;https://www.baidu.com">
非meta标签
#五、body标签 ##基本标签 ```段落标签
,加粗标签
表示斜体
在文字中间加一条删除线
上下角标
换行
不进行任何操作，一个是块元素，一个是内联元素
```
##块标签和内联标签
1.块标签的特点：
+ 每个块标签都独占一行
+ 默认宽度是整个屏幕，除非自己设置width
+ 块标签内可以包含内联标签和块标签
`常见的块标签有：,
,
,,,,,`
2.内联标签的特点：
- 内联元素不独占一行，可以和后面的内联元素并排显示
- 宽度就是它本身文字或图片的宽度，不可设置
- 内联元素只能容纳文字或者其他内联元素
常见的内联标签有：<b>,<a>,<img>,<strong>,<span>
特殊符号
≶>©®"
≶>©®
<img>图片标签
src :图片的路径
alt : 当图片加载不出来时，显示的内容
title: 鼠标悬浮在上面时显示的内容
width:宽度
height:高度
超链接标签（锚标签）a
href:加要跳转的路径，也可为本页面的某个标签
target:_blank 在新的窗口中打开新页面
<a href="#abc">回到顶部</a>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
六、列表标签
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自定义列表：
<dl>
<dt>标题</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
</dl>
七、表单
1、表单属性
表单用于接受用户的输入，并将数据发送到服务器处理。
action:指明将表单提交到哪
method:指明提交的方式，也有两种提交方式，get,post 默认是使用 get
- get:提交键值对，数据存储在访问的链接后面，安全性相对差，而且传输的数据量有限
- post：提交的内容不放在地址栏，安全性高，传输的内容大小没太大限制。
input标签
type属性：
- text:文本框
- password 密码框
- button 按键
- reset 重置
- submit 提交
- checkbox 多选框
- radio 单选框
- file 文件
name 属性：表单提交时候的键
values 属性：表单提交时候的值
checked: radio和CheckBox默认被选中
readonly：只读
disabled:对所有input都好使
select标签
name：表单提交时候的键
size：显示的个数
option：下拉框中的每个选项，value 值，selected 默认选中
textarea 标签
name:键
rows:行数
cols:列数
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息表</title>
<style>
#div1{
width: 250px;
height: 350px;
border: 2px solid green;
position: absolute;
left: 50%;
top:50%;
margin-left: -125px;
margin-top: -175px;
align-self:center;
}
#div2{
width: 220px;
height:300px;
position: relative;
left:20px;
}
#p1{
position: relative;
left: 50px;
}
</style>
</head>
<body>
<div id = 'div1'>
<div2 id = 'div2'>
<form action="#">
<p>姓名：<input type="text"></p>
<p>男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"></p>
<p>
爱好: 唱歌<input type="checkbox" name="hobbit">
喝酒 <input type="checkbox" name="hobbit">
烫头 <input type="checkbox"name="hobbit">
</p>
<p>
居住城市：
<select name="city" id="abc">
<option value="sz">深圳</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</p>
简介:<textarea name="description" id="aaa" cols="30" rows="5"></textarea>
<p id = 'p1'><input type="reset"> <input type="submit"></p>
</form>
</div2>
</div>
</body>
</html>
- ,
- 内联元素不独占一行，可以和后面的内联元素并排显示
- 宽度就是它本身文字或图片的宽度，不可设置
- 内联元素只能容纳文字或者其他内联元素
常见的内联标签有：<b>,<a>,<img>,<strong>,<span> - get:提交键值对，数据存储在访问的链接后面，安全性相对差，而且传输的数据量有限
- post：提交的内容不放在地址栏，安全性高，传输的内容大小没太大限制。
- text:文本框
- password 密码框
- button 按键
- reset 重置
- submit 提交
- checkbox 多选框
- radio 单选框
- file 文件
name 属性：表单提交时候的键
values 属性：表单提交时候的值
checked: radio和CheckBox默认被选中
readonly：只读
disabled:对所有input都好使
- ,,`
2.内联标签的特点：
特殊符号
≶>©®"
≶>©®
<img>图片标签
src :图片的路径
alt : 当图片加载不出来时，显示的内容
title: 鼠标悬浮在上面时显示的内容
width:宽度
height:高度
超链接标签（锚标签）a
href:加要跳转的路径，也可为本页面的某个标签
target:_blank 在新的窗口中打开新页面
<a href="#abc">回到顶部</a>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
六、列表标签
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自定义列表：
<dl>
<dt>标题</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
</dl>
七、表单
1、表单属性
表单用于接受用户的输入，并将数据发送到服务器处理。
action:指明将表单提交到哪
method:指明提交的方式，也有两种提交方式，get,post 默认是使用 get
input标签
type属性：
select标签
name：表单提交时候的键
size：显示的个数
option：下拉框中的每个选项，value 值，selected 默认选中
textarea 标签
name:键
rows:行数
cols:列数
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息表</title>
<style>
#div1{
width: 250px;
height: 350px;
border: 2px solid green;
position: absolute;
left: 50%;
top:50%;
margin-left: -125px;
margin-top: -175px;
align-self:center;
}
#div2{
width: 220px;
height:300px;
position: relative;
left:20px;
}
#p1{
position: relative;
left: 50px;
}
</style>
</head>
<body>
<div id = 'div1'>
<div2 id = 'div2'>
<form action="#">
<p>姓名：<input type="text"></p>
<p>男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"></p>
<p>
爱好: 唱歌<input type="checkbox" name="hobbit">
喝酒 <input type="checkbox" name="hobbit">
烫头 <input type="checkbox"name="hobbit">
</p>
<p>
居住城市：
<select name="city" id="abc">
<option value="sz">深圳</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</p>
简介:<textarea name="description" id="aaa" cols="30" rows="5"></textarea>
<p id = 'p1'><input type="reset"> <input type="submit"></p>
</form>
</div2>
</div>
</body>
</html>