前端之HTML标签
#前端基础
1.HTML 网页的骨架，没有任何的样式
标签
2.CSS 美化网页，给网页骨架添加样式
选择器、属性
3.JavaScript 给网页添加动画
BOM&DOM
在浏览器地址栏中输入网址，回车会发生什么事？
1.浏览器向服务端发起请求
2.服务端接收客户端的请求
3.服务端处理客户端的请求，并且返回给浏览器
4.浏览器根据特定的规则渲染页面
一. HTTP协议
"""
超文本传输协议，用来规定服务端和客户端之间的数据传输格式
"""
#四大特征
1.基于请求响应
2.基于TCP/IP协议之上的应用层协议
3.无状态
不能保存用户的信息
4.短链接/无连接
#请求数据格式
请求首行（请求方式，路径，版本号）
请求头（一大堆k,v键值对）
\r\n
请求体（get请求没有请求体，post请求有请求体）
#get请求参数传递格式：
?k=v&k1=v1&k2=v2...
#响应数据格式
响应首行 （响应方式）
响应头 （一大堆kv键值对）
\r\n
响应体
#响应状态码
1xx: 数据提交成功，正在处理，你还可以进行提交
2xx：200 OK 请求成功
3xx：重定向
4xx：404 请求资源不存在， 403:请求的资源没有权限
5xx：500：服务器内部错误
#请求方式
1.get请求
跟服务器要数据
2.post请求
提交数据，比如登录
二. HTML标签格式
2.1 什么是HTML
"""
1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
2.网页文件的扩展名：.html或.htm
"""
2.2 HTML文档结构
<!DOCTYPE html> # 告诉浏览器这个文件是html文件
<html lang="en"> # language，english
<head> # head标签中的代码不是用来给用户看的
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> # body中的内容写什么就显示什么
</body>
</html>
"""
1.<!DOCTYPE html>声明为HTML5文档。
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本是可见的网页主体内容。
"""
2.3 标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
"""
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
"""
三. HTML常用标签
3.1 head内常用标签
#打开html文件格式
1.在pycharm中点击右上角的浏览器图标
2.双击html文件
<script>
<title>我的第一个html文件</title>
<script>
//js代码
//alert(123)
</script>
<link rel="stylesheet" href="mycss.css"> #用来引入外部css文件
<script src="myjs.js"></script> #引入外部js文件
3.2 body内常用标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
3.2.1 特殊符号
空格
> 大于号
< 小于号
& &符号
¥ ¥符号
© ©符号
® ®符号
3.3 标签的分类
1.块儿级元素
#独占一行
<h1>~<h6>
<p></p>
<div></div>
2.行内元素
# 自身文本有多大就占多大
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<span> </span>
#***p标签不能包含块级标签，p标签也不能包含p标签
<div> 块儿级标签
<span> 行内标签
页面的布局一般先用div和span占位后再去调整样式，尤其是div使用非常的频繁
div可以看作是一块区域，也就意味着div来提前规定所有的区域
之后往该区域添加内容
而普通的文本先用span标签
3.4 img标签
<img src="图片的路径" alt="xxx" title="aaa" width="423px" height="500px">
src:
1. 外链地址
2. 本地地址
title：
鼠标悬浮时候的提示，
他是所有标签都有的
width：
图片的宽度，和高度等比例缩放， 宽高只需要写一个
alt：
当图片加载失败的时候，显示的信息
3.5 a标签
<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a>
target:
# 新开一个标签打开页面
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
href:
跳转的链接
#什么是url
url是统一资源定位器，也称为网址
#href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
#a标签的描点功能
eg:点击一个文本标题，页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<a href="" id="d2">底部</a>
<a href="" id="#d2">顶部</a>
<a href="" id="#d1">底部</a>
3.6 列表标签
3.6.1 无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
#type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
3.6.2 有序列表
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
#type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
#start属性：从数字几开始排列
3.7 表格
<table border="3" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<!-- <td rowspan="2">1</td>-->
<td>egon</td>
<td>18</td>
<td>male</td>
</tr>
<tr>
<td>2</td>
<td>tank</td>
<td>20</td>
<td>male</td>
</tr>
</tbody>
</table>
#属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
3.8 form
功能：表单用于向服务器传输数据，从而实现用户于Web服务器的交互
表单能够包含input系列标签，比如文字字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和label标签
"""
能够获取前端用户数据，基于网络发送后端服务器
"""
eg:写一个注册功能
<form action="" method="" enctype=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action：控制数据提交的后端路径，指定向哪个后端提交数据
1. 什么都不写，默认提交到当前地址
2. 全写路径，http://127.0.0.1:5000/index/
3. 只写路径后缀/index/
自动识别出当前服务端的ip和post拼接到前面
host:port/index/
method 控制请求方式
默认是get请求
也可以携带数据，但是数据是直接破解在url后面的，不安全并且大小限制
可以修改为post请求
携带的数据放在请求体里面的
enctype 控制请求方式
默认是urlencoded，只能发送普通文本，不能发送文件
如果要发送文件，必须改为formdata
发送文件必要修改的两个参数：
method="post"
enctype="...formdata"
<form action="">
<!-- 第一种书写方式:直接将input框写在label内-->
<label for="d1">
<!-- 关联id后，可以点击username提示来输入内容-->
username:<input type="text" id="d1">
</label>
<!-- 第二种书写方式：通过关联id，无需嵌套-->
<label for="d2"></label>
password:<input type="text" id="d2">
</form>
"""
label和input标签都是行内标签，可以用p标签分行
"""
3.8.1 input
<input>元素会根据不同的type属性，变化为多种形态
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
###能够触发form表单提交数据的按钮()：
1. <input type="submit" value="提交" />
2. <button>按钮<button>
##属性说明:
1. name：表单提交时的“键”，注意和id的区别
"""
<p>gender:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
</p>
"""
2. value：表单提交时对应项的值
3. type="button", "reset", "submit"时，为按钮上显示的文本年内容
4. type="text","password","hidden"时，为输入框的初始值
5. type="checkbox", "radio", "file"，为输入相关联的值
6. checked：radio和checkbox默认被选中的项
7. readonly：text和password设置只读
8. disabled：所有input均适用
3.8.2 select
<form action="" method="post">
<p>province:
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</p>
</form>
##属性说明：
1. multiple：布尔属性，设置后为多选，否则默认单选
<select name="city" id="city" multiple>
2. disabled：禁用
3. selected：默认选中该项
<option selected="selected" value="1">北京
4. value：定义提交时的选项值
3.8.3 label标签
"""
定义：<label>标签为input元素定义标注（标记）。
说明：
1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
"""
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
3.8.4 textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
#属性说明：
1. name：名称
2. rows：行数
3. cols：列数
4. disabled：禁用
