前端基础之HTML
1.Web服务本质
浏览器中敲入回车发生了几件事？
1.浏览器朝服务端发送请求
2.服务端接收请求
4.浏览器接收响应，根据特定的规则渲染页面展示给用户看
详细过程
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
2.HTTP协议
什么是HTTP协议？
HTTP协议是超文本传输协议
规定了浏览器与服务端之间消息传输的数据格式
四大特性
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态（服务端不保存用户的状态，也就相当于客户端访问之后没有记录）
4.无连接（请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了）
请求数据格式
1.请求首行(标识HTTP协议版本,当前请求方式)
2.请求头（许多k,v键值对）
3.换行符（/r /n,此处应空着）
4.请求体（携带一些敏感信息，如密码）
响应数据格式
1.响应首行
2.响应头
3.换行符（/r/n，此处应空着）
4.响应体(返回给浏览器页面的数据 通常响应体都是html页面)
响应状态码
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2XX:服务端成功响应 你想要的数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)
4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
5XX:服务器内部错误(500)
请求方式
1.get请求
朝服务端要资源（比如浏览器窗口输入www.baidu.com）
2.post请求
朝服务端提交数据（比如用户登录 提交用户名和密码）
URL:统一资源定位符（也就是网址）
3.HTML是什么
HTML是一种超文本标记语言，是一种用于创建网页的标记语言
网页能正常显示出来，必须遵循html标记语法，所以浏览器显示出来的页面，内部都是html代码
它不是一种编程语言，HTML使用标签来描述网页
4.HTML注释
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下html的注释都会按照下面这个方式来写
<!--导航条样式开始-->
<!--导航条样式结束-->
5.HTML文档结构
最基本的html文档
<!DOCTYPE html> <html lang="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析> <head> <meta charset="UTF-8"> <!--meta 为body里内容的编码的方式--> <title>Title</title> <!--网页的标题--> </head> <body> </body> </html>
-
<!DOCTYPE html>声明为HTML5文档。
-
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
-
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
-
<title>、</title>定义了网页标题，在浏览器标题栏显示。
-
<body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
1.标签分类
双标签(<h1></h1> <a></a>)
单标签(自闭和标签 <img/>)
块级标签
div p h
块儿级标签可以修改长宽
块儿级标签内部可以嵌套任意的块级标签
但是p标签虽然是块儿级标签 ,但是他不能够嵌套其他块儿级标签,包括自身
所以：只要是块儿级标签 都可以嵌套行内标签
p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
行内标签(自身文本多大就占多大)
span b s i u
div和span通常都是用来构建网页布局的
2.head常用标签
<title></title>:显示网页标题 <style></style>:定义内部样式，内部支持写css代码 <script></script>:定义JS代码或引入外部JS文件 <link/>:专门用来引入外部的css文件或网站图标 <meta/>:定义网页原信息
3.body常用标签
基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <!--换行--><br> <!--水平线--><hr>
4.特殊字符
空格: >：> <:< &:& ¥:¥ 版权:© 注册:®
5.img标签
<img src="图片的路径(url)" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
6.a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接
href后面存放url的时候 点击跳转到该url 如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
targe:
_self:在原本的窗口打开
_blank:创建一个新窗口打开
_top:覆盖上一条记录
_parent:覆盖所有的记录
且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色
锚点功能(回到顶部) href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
每一个标签都应该有三个比较重要的属性
1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
任何标签都支持自定义属性!!!
7.列表标签
<p>无序标签</p> <ul type="square"> <li>01</li> <li>02</li> <li>03</li> </ul> </ul> <p>有序标签</p> <ol type="I" start="2"> <li>a</li> <li>b</li> <li>c</li> </ol>
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
8.表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。 表格的基本结构：
<table border="20" cellpadding="10" cellspacing="10"> <thead> <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>老鱼</td> <td>123</td> <td>新垣结衣</td> </tr> <tr> <td>野猪</td> <td>123</td> <td>玩泥巴</td> </tr> <tr> <td>星总</td> <td>123</td> <td>隔壁老王</td> </tr> </tbody> </table>
tr表示一行
th与td都是文本
thead内使用th
tbody内使用td
属性:
-
border: 表格边框.
-
cellpadding: 内边距
-
cellspacing: 外边距.
-
width: 像素 百分比.（最好通过css来设置长宽）
-
rowspan: 竖直方向
-
colspan:水平方向
三、表单
能够接受用户输入（输入/选择/上传）并将其发送给后端
1.input标签
type中输入：
txet:普通文本
password:密文
date：日期
submit：触发提交动作
button:普通按钮，没有实际意义，但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件
| 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" /> |
<h1>时尚注册页面</h1> <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"></label></p> <p><label for="d2">password:<input type="password" id="d2"></label></p> <p><label for="d3">birthday:<input type="date" id="d3"></label></p> <p>性别： <input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </p> <p>爱好： <input type="checkbox" name="hobby">篮球 <input type="checkbox" name="hobby">足球 <input type="checkbox" name="hobby">排球 </p> <p>隐身： <input type="hidden"> </p>
2.select标签
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")
<p>省市： <select name="" id=""> <option value="">上海</option> <option value="">深圳</option> <option value="">广州</option> </select> </p> <p>偶像： <select name="" id="" multiple> <option value="">胡歌</option> <option value="">彭于晏</option> <option value="">张国荣</option> <option value="">梁朝伟</option> <option value="">罗志祥</option> <option value="">黄渤</option> <option value="">张艺兴</option> <option value="">迪丽热巴</option> </select> </p> <p>省市1： <select name="" id=""> <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>
3.textarea标签
<p>个人简介： <textarea name="" id="" cols="30" rows="10"></textarea> </p>
