前端基础之HTML
一、什么是前端
任何与用户直接打交道的操作界面都可以称之为前端 比如：电脑界面、手机界面、平板界面
什么是后端：就是不直接与用户打交道
二、web服务器的本质
浏览器中输入网址回车发生了几件事：
1.浏览器朝服务器发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应 根据特定的规则渲染页面展示给用户（就是通过后面说到的HTML语法）
三、HTTP协议（重点！！！）
HTTP协议：超文本传输协议，规定了浏览器与服务端之间消息传输的数据格式
四大特性：
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态（服务端无法保存用户的状态）
4.无连接（请求来一次我响应一次，之后立马断开连接，两者之间就不再有任何关联了）
请求数据格式：
请求首行（标识HTTP协议版本，当前请求方式） 请求头（一大堆k,v键值对） /r/n 请求体（携带的是一些敏感信息比如：密码、身份证号...）
响应数据格式:
响应首行（标识HTTP协议版本，响应状态码） 响应头（一大堆k,v键值对） /r/n 响应体（返回给浏览器页面的数据，通常响应体都是html页面）
响应状态码：
用一串简单的数字来表示一些复杂的状态或者提示信息 1XX:服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据 2xx:服务端成功响应你想要的数据（请求成功200） 3xx:重定向（当你在访问一个需要登录之后才能访问的页面，你会发现窗口会自动调到登录页面） 301 302 4xx:请求错误（请求资源不存在报404，请求不合法不符合内部规定权限不够报403） 5xx:服务器内部错误（500）
请求方式：
1.get请求 朝服务器要资源（比如浏览器窗口输入网址）
2.post请求 朝服务器提交数据（比如用户登录，提交用户名和密码）
URL:统一资源定位符（就是网址）
四、web本质
浏览器
服务器
文件（后缀名是.html结尾的文件，也就意味着只要看到.html结尾文件，那么它就是一个前端页面文件。文件的后缀名仅仅是给人看的，计算机无所谓，因为是二进制数据）
五、HTML
HTML:超文本标记语言
要想让你的页面能够正常被浏览器显示出来，你所写的页面就必须遵循html标记语法
也就意味着所有能够被浏览器显示出来的页面，内部都是html代码，浏览器只认识html,css,js
HTML文档结构
最基本的HTML文档：
<html> <head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body>:body内的标签 就是浏览器展示给用户看的内容 </html>
HTML注释
<!--单行注释--> <!-- 多行注释 多行注释 --> 一般情况下 html的注释都会按照下面的方式书写 <!--导航条样式开始--> <!--导航条样式结束-->
注释是代码之母
六、HTML标签
标签的分类1：
1.双标签（<h1></h1>,<a></a>）
2.单标签（自闭和标签 <img/>）
标签的分类2：
1.块级标签（独占浏览器一行） （div,p,h）
- 块级标签可以修改长度
- 块级标签内部可以嵌套任意块级标签
但是p标签虽然是块级标签，但是内部不能再写其他块级标签，包括自身，只可以嵌套行内标签
总结：只要是块级标签都可以嵌套行内标签（但是p标签除外）
2.行内标签（自身文本多大就占多大） （span,b,s,i,u）
head内常用标签
<title></title>用来显示网页标题
<style></style>定义内部样式表，内部也支持写css代码
<script ></script >内部支持写js代码，也支持导入外界的js文件
<link></link>用来引入外部的css文件
<meta/> 定义网页原信息
meta标签介绍：
name属性：主要用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜素引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #keywords关键字，在搜索引擎中输入这些就会显示网页 <meta name="description" content="老男孩教育Python学院"> #描述信息
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>
特殊字符
空格 > > < < & & ¥ ¥ © © 注册 ®
常用标签
div,span,p
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src存放的是图片的路径（该路径可以是本地的也可以是网上的）
1.也可以放url(会自动请求该url获取相应的数据)
2.也可以直接放图片的二进制数据，会自动转换成图片
alt当图片加载不出来的时候，显示的提示信息
title当鼠标浮在图上提示的消息
height,width当你只指定一个参数的时候，另一个会等比例缩放
a标签 超链接标签
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
herf后面存放url的时候，点击跳转到该url，如果该链接没有被点过，那么默认是蓝色的，只要点过一次，之后都是紫色
target 默认是_self当前页面跳转
_blank新建页面跳转
锚点功能（回到顶部） herf还可以写另一个a标签的id值，点击就会跳到id值对应的a标签
点击回到中间，就会跳到中间
<a href="" id="d2" class="c1">中间</a> <div style="height: 1000px;background-color: green"></div> <a href="#d2">回到中间</a>
每一个标签都应该有三个比较重要的属性：
1.id值 该值就类似于人的身份证号，在一个html文件中id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style（不是必备）支持在标签内直接写css代码，属于行内样式，优先级最高（但是不建议在标签内直接写css代码）
列表标签 ul,ol
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
- disc(实心圆点，默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
- 1数字列表，默认值
- A大写字母
- a小写字母
- I大写罗马
- i小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签（******）
<table>
<thead></thead>
<tbody></tbody>
</table>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="20" cellpadding="10" cellspacing="10"> <thead> #表头 <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> #表体 <tr> <td colspan="2">tank</td> #colspan表示的水平方向占几格 <td rowspan="2">生蚝</td> #rowspan表示的竖直方向占几格 </tr> <tr> <td>egon</td> <td>123</td> </tr> <tr> <td>jerry</td> <td>123</td> <td>大保健</td> </tr> </tbody> </table> </body> </html>
tr表示一行
th和td都是文本，建议在thead内使用th(字体更粗)，tbody内使用td
colspan表示的水平方向
rowspan表示的竖直方向
form表单标签(******)
能够接收用户输入（输入、选择、上传）并将其发送给后端
表单包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、label标签
表单属性：
1.action控制数据提交的目的地
1.不写的情况下，默认提交到当前页面所在的路径
2.写全路径（https://www.baidu.com）
3.路径后缀(/index/)
2.form表单默认是get请求，你需要通过method参数换成post提交
3.form表单中要想触发提交动作，只有两种情况可以：
1.input标签type指定成submit
2.直接写button标签
4.获取用户输入（输入，选择，上传。。。）的标签，都必须有一个name属性，这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value。
<input type="text" id="d1" name="username" value="默认值"> name就相当于是字典的key value就是字典的值 获取都的用户输入都会被放入value属性中
5.form表单传文件的时候，需要指定enctype参数
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" /> |
text:普通文本
password:密文 不展示明文
date:日期
submit:触发提交动作
button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件
select标签
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
textarea标签
获取用户输入的大段文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
form表单注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册页面</h2> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p> <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p> <p> <label for="d3">birthday:</label> <input type="date" id="d3" name="birth"> </p> <p>性别: <input type="radio" name="gender" checked value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>爱好: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" checked value="doublecolorball">双色球 </p> <p>省市: <select name="province" id=""> <option value="sh">上海市</option> <option value="bj">北京市</option> <option value="sz">深圳市</option> </select> </p> <!--<p>伴侣:--> <!-- <select name="" id="" multiple>--> <!-- <option value="" selected>新垣结衣</option>--> <!-- <option value="" selected>斯嘉丽</option>--> <!-- <option value="">明老师</option>--> <!-- </select>--> <!--</p>--> <!--<p>省市1:--> <!-- <select name="" id="">--> <!-- <optgroup label="上海">--> <!-- <option value="">嘉定区</option>--> <!-- <option value="" selected>浦东新区</option>--> <!-- <option value="">静安区</option>--> <!-- </optgroup>--> <!-- <optgroup label="北京">--> <!-- <option value="">朝阳区</option>--> <!-- <option value="">海淀区</option>--> <!-- <option value="">昌平区</option>--> <!-- </optgroup>--> <!-- <optgroup label="安徽">--> <!-- <option value="">芜湖市</option>--> <!-- <option value="">合肥市</option>--> <!-- <option value="">安庆市</option>--> <!-- </optgroup>--> <!-- </select>--> <!--</p>--> <p>头像: <input type="file" name="avatar"> </p> <p>个人简介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <!--<p>隐身--> <!-- <input type="hidden">--> <!-- --> <!--</p>--> <input type="submit" value="注册1"> <input type="button" value="注册2"> <input type="reset" value="注册3"> <button>button标签</button> </form> </body> </html>
