前言：
1、在B-S模式下，server服务端和客户端之间 使用http协议（规定
客户端应该怎么请求服务端，服务端应该怎么响应）通信；
2、传输过程
浏览器 向服务端发起 post/get请求
服务端响应浏览器的请求，发送html格式的网页代码给浏览器；
客户端的浏览器接受到html网页代码后，渲染出效果给用户看。
browser端和server端通过socket，循环这个请求和响应的过程，以此建立服务端于用户之间的交互；
所以我们学习的前端内容：
都是围绕着使用 html/CSS/js写一个漂亮的网页，当用户的浏览器 请求时我们时，响应这个漂亮的页面给用户的浏览器，再由浏览器出渲染出效果呈现给用户；
html是什么？
超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
浏览器接收服务端发送来的html， 按从左到右 从上到下的 顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
静态网页文件扩展名：.html 或 .htm
html的结构：
- <!DOCTYPE html> 声明该html页面，使用的编写规范；
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体内容
html标签的格式
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
html的基本标签
标签分类：
块级标签：独占一行
内联标签：根据内容大小而定
重点 div标签：没有任何标记效果，是一张白纸。
<!DOCTYPE>标签
<!DOCTYPE> 此标签可告知浏览器 该HTML文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
<head>内常用标签（描述和网页相关的内容）
1、<meta>标签
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
(1)name=keywords参数值/name=description参数值
name=keywords: 定义在百度收索 该网站时需要使用的关键词
name=description: 定义在百度搜索 到该网站后，该网站下面显示的 网页描述信息
(2)http-equiv="refresh"/http-equiv="refresh"属性
http-equiv="refresh":设置该网页刷新（跳转到其他网站）
http-equiv="content-Type":设置该网页的字符编码
2、title标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="鲜花绿植" > <!--定义在百度收索 该网站时需要使用的关键词 -->
<meta name="description" content="北京佳木园林公司曾经是..." ><!--定义在百度收索到该网站后，下面显示的描述信息-->
<meta http-equiv="refresh" content="3 https://www.bbb170.com" > <!--可以设置跳转到其他网站-->
<meta http-equiv="content-type" charset="utf-8"> <!--设置网页的编码格式 -->
<title>张根</title> <!--设置浏览器打开该网页后，最顶部标题的名字 -->
</head>
<body> </body>
</html>
<body>内常用标签（描述网页真正要渲染的内容）
基本标签（块级标签和内联标签）
'''
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符：
< >；"；©® '''
<div>和<span>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
图形标签: <img>
'''
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) '''
超链接标签(锚标签): <a> </a> 该标签可以发生 get请求到服务端，很重要
什么是超级链接？
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上
的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
'''
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
'''
列表标签
'''
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)] <ol>: 有序列表
<li>:列表中的每一项. <dl> 定义列表 <dt> 列表标题
<dd> 列表项 '''
表格标签: <table>
表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table>
<tr>
<td>标题</td>
<td>标题</td>
</tr> <tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
属性：
'''
<tr>: table row
<th>: table head cell
<td>: table data cell
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
'''
练习：
--------------------------------------------------------------------------------------------------------------------------------------------------------------
表单标签 <form>
用于在前端 引导用户输入数据，把收集的数据组织成字典形式，传输到服务端。
表单标签内可以嵌套的标签：input系列标签，。
from标签属性：
<form action="发送服务的路径 " method="post" 请求的方式>
<input type(属性)=‘text’ > (input 是 自闭合标签 ) （<form>（开始标签）+</form>（结束标签）=闭合标签）
</form>
1、from之input 输入框标签：
name属性是键； 输入内容是与之对应的值；
nane属性必须定义，注意checkbox类型;必须手动设置value属性；radio类型：必须共用1个name键；
发往服务端的数据类型：name:key， checkbox类型的input：name:[key1,key2,key3]
input标签系列的类型：
test类型:文本输入框
passwd类型：密码输入框
checkbox类型：多选框
radio类型：互斥框（只能选择1个value）
--------提交表单-------------------------
button类型： 一般配合js使用
submit类型：注意表单提交类型的input标签里面的value属性设置的是 提交按钮显示的字,而其他类型设置的是 键中的值
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>张根</title>
</head>
<body> <form>
<p>请输入用户名：<input type="text" name="username" ></p>
<p>请输入密码：<input type="password" name="passwd" ></p>
<p>文学：<input type="checkbox" name="爱好" value="somking"> 历史<input type="checkbox" value="fuck"></in></p> <p>性别 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> 其他 <input type="radio" name="sex"> </p>
<p><input type="submit" value="sub"> </p>
<p><input type="button" value="button"> </p>
</form>
</body>
</html>
2、from之select 下拉框标签
select特性：
select下拉框标签由 select标签+option标签+optgroup组成，select里面设置name键，option里面设置value值；
select标签的属性：
name:设置键值对的键
size：默认选择个数
multiple:multiple 设置同时多选
option标签属性：
value属性：设置键值对的值
selected属性：设置这个下拉框 默认选中的选项
optgroup标签属性：
把多个option组织到1组，label="组名”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>张根</title>
</head>
<body>
<from>
<select name="china" >
<optgroup label="唐县.齐家佐乡"></optgroup>
<option value="hb">管家佐村</option>
<option value="hn">齐家佐村</option>
<option value="zj">马家峪村</option> </select>
3、from之textarea标签：多行文本输入框
name属性：键
rows:控制文本输入框占的行数
cols:控制文本输入框占的列数
<from>
<select name="china" >
<optgroup label="唐县.齐家佐乡"></optgroup>
<option value="hb">管家佐村</option>
<option value="hn">齐家佐村</option>
<option value="zj">马家峪村</option>
</select> <textarea name="jianjie" rows="4" cols="30">
伟
人
故
乡
</textarea>
</from>
4、from之label>标签
用来和input标绑定，绑定后，点击输入框的范围里 其他区域 也可以输入内容了，让用户体验更好点。
说明：
1、 label 元素不会向用户呈现任何特殊效果。
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
5、from之fieldset标签
用来和input标绑定，绑定后，把输入框 围起来。
''' <fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset> '''
6、susubmi和botton的区别
submit 默认有提交表单的功能
botton：(按钮)需要绑定事件