前端之HTML基础知识入门
一.什么是前端
任何与用户直接打交道的操作界面都可以称之为是一个前端
例如:电脑显示界面
手机界面
Ipad界面
二.为什么要学前端
好玩喽,所见即所得
三.学前端最容易的方法是什么?
放弃就是最容易的方法
1).web服务的本质
当我们在浏览器窗口输入一个网址敲回车发生了哪些事
1.朝着指定的服务端发送请求
2.服务端接收相应的请求
3.服务端返回相应的响应
4.浏览器接收响应 按照特定的规则渲染页面展示给用户看
模拟演示:
bs架构(浏览器本质上就是一个客户端)
先写一个本地服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1', 9028))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024) # 接收客户端消息
print(data)
conn.send(b'hello word') # 返回消息
conn.close() # 关闭
# 启动运行
因此我们得出浏览器与服务端之间必须遵循某种规范,这样才能实现两者之间的通信
这就是http协议的由来
解决方案:
import socket
server = socket.socket()
server.bind(('127.0.0.1', 9028))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
# 遵循HTTP协议
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')#添加这个协议
conn.send(b'hello word')
conn.close()
import socket
server = socket.socket()
server.bind(('127.0.0.1', 9028))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
# 遵循HTTP协议
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# conn.send(b'<h1>hello word</h1>')
# 也可以将文件传输过去
with open('文档.txt', 'rb') as f:
conn.send(f.read())
conn.close()
2).HTTP协议
超文本传输协议
规定了浏览器与服务端之间数据传输的格式
3)http协议的四大特性
1.基于请求响应
一次请求对应一次响应
2.基于TCP/IP作用于应用层之上的协议
回顾:osi七层协议(由下往上):物理层->数据链路层->网络层->传输层->会话层->表示层->应用层
3.无状态
不保留客户端状态,即每一次登陆访问都是按照第一次访问
因此产生了cookie, session, token这些方法来保存状态数据
4.无连接
发送请求和获得回应后链接就消失,不会长久存在,下一次请求和回应时又会出现
长链接:链接会长时间存在(websocket,类似于http协议的大补丁,比如创建一个聊天室的项目就可以使用这个)
4)数据格式
两种格式基本相同
请求格式
请求首行(包括请求方式,协议版本等信息)
请求头 (一大堆k,v键值对)
请求体(携带的数据, 并不是所有的请求体都带有数据,有时候可以是空,取决于你的请求方式)
响应格式
响应首行(响应状态码)
响应头(一大堆k,v)键值对)
响应体(浏览器展示给用户看的数据)
补充:格式最重要的是响应头和响应体之间的那个空行,必须有
5)请求方式
1.get请求
朝服务端要资源(获取数据)
类似于在浏览器窗口输入www.baidu.com获取百度首页
2.post请求
朝服务端提交数据(提交数据)
类似与登陆注册功能
6)响应状态码
用数字来表示一大堆提示信息
1xx:这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响 应头信息，并以空行结束
例如:100(Continue)
客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被 拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请 求完成后向客户端发送一个最终响应。
2xx:这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
例如200,服务端已经返回你想要的数据
注意:2开头的状态码不一定表示一定成功获取数据,例如202,204等状态码
3xx:这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
简单理解重定向:例如你原本登陆一个网页需要查看一个内容,但是自动给你转到了登陆界面或者其它界面
4xx:这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。除非响应的是一个 HEAD 请求，否则服务器就应该返回一个解释当前错误状况的实体，以及这是临时的还是永久性的状况。
例如:404请求资源不存在,403你当前不具备请求该资源的条件
5xx:500服务端内部错误
补充:公司内部可以自定义响应状态码
四.HTML
html: 超文本标记语言(可以让你的页面被浏览器识别并华丽的显示出来)
浏览器识别的语言:html/xml, css, javascript
扩展:XML也可以书写前端页面 主要用于odoo框架中 书写企业内部管理软件（ERP）
HTML注释
注释是代码之母
单行注释:<!--单行-->
多行注释:<!--
多行注释1
多行注释2
-->
补充:可以用ctrl+?的快捷方式来注释
由于html页面结构比较复杂 内容比较多 不便于后期的维护 修改
通常在写页面的时候 习惯用下面的方式来人为的划分代码区域
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
1)html文档结构
HTML文档结构
<html>
<head></head>:head内放的内容不是给用户看的 是给浏览器去识别做相应操作的
<body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>
HTML文档打开方式
1.pycharm自动调用浏览器打开(推荐)
2.手动查找路径之后选择浏览器打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!--用pycharm创建一个新的html文本打开就会默认添加这些信息在里面-->
标签的分类1
1.双标签:有头有尾,例如<a></a>
2.自闭和标签,一个标签就包括首位,例如<link rel="stylesheet" href="">
2）head内常用标签
head内常用标签
1）.title:定义网页标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个网址</title>
</head>
<body>
<a href=""></a>
</body>
</html>
2).style:内部支持直接写css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个网址</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>人生若只如初见</h1>
</body>
</html>
3）.link:引入外部的css文件
新建一个scc文件：mycss.css
h1{
color: cyan;
}
然后在 <link rel="stylesheet" href="mycss.css">中的href中插入文件名（文件位置）即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个网址</title>
<style>
h1{
color: blue;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>人生若只如初见</h1>
</body>
</html>
4).script:
1.内部可以直接编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
alert('年少的你')
</script>
</head>
<body>
<h1>人生若只如初见</h1>
</body>
2.可以通过src属性引用外部js代码
1.先建一个js文件，例如myjs.js
内容就是：confirm('你好啊兄弟')
2.然后将其文件导入script中的src中即可引用js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="myjs.js"></script>
</head>
<body>
<h1>人生若只如初见</h1>
</body>
5）meta：定义网页原信息
name属性
keywords
description
书写小技巧：只需要写一个标签名然后用tab键就会自动补全，
emmet插件:自动补全html代码
关于meta知识补充
Meta标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="京东的描述信息，看下图">
3）body内常用标签
1.基本标签
1）h1~h6:标题标签(h$*6)tab键可以快速创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<h1>第一行</h1>
<h2>第一行</h2>
<h3>第一行</h3>
<h4>第一行</h4>
<h5>第一行</h5>
<h6>第一行</h6>
</body>
</html>
2）s:删除线：<s>第一行删除线</s>
b:加粗：<b>第二行加粗</b>
u:下划线：<u>第三行下划线</u>
i:斜体：<i>第四行斜体</i>
p:独占一行：<p>第五行独占一行</p>
br:换行：<br>
hr:分割线：<hr>
2.特殊符号标签
特殊符号
空格
<p>a大于b a > b</p>
<p>a小于b a < b</p>
<p>a&b a & b</p>
<p>人民币 ¥10000000000</p>
<p>版权标识 ©</p>
<p>注册商标 ®</p>
常用标签
div 块儿级标签
独占一行 h1~h6 p br hr div
1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签
如果嵌套了 没有问题 知识不符合html语法规范
span 行内标签
本身没有任何特殊意义
但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的
u s i b span
自身文本多大 就占多大
行内标签内部不能嵌套块儿级标签和行内标签
3.图片标签
src
1.可以写一个网站图片地址
2.还可以写本地的图片地址
3.url(自动朝该url发送get请求要数据),需要用a链接
alt
当图片加载不出来的时候 默认展示的提示信息
title
当鼠标悬浮在图片上的时候 展示的提示信息
width,height
修改一个 另外一个会自动等比例缩放
如果两个都修改图片就会失真
<img src="https://i5.meizitu.net/2019/12/07b01.jpg" alt="美女香车" title="漂亮不" width="100" height="70">
<img src="07b01.jpg" alt="美女香车"title="漂亮不" width="100" height="90">
4.链接标签
a 链接标签
href
1.放一个url
点击就会跳转到该url所对应的资源
target
控制是否在当前页跳转
默认是在当前页跳转
_self
新建页面跳转
_blank
锚点功能
href不单单可以写url 也可以写另外一个a标签id值
点击就会跳转到该id值所对应的另一个标签所在的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美女图片</title>
</head>
<body>
<a href="https://www.baidu.com" target="_self" id="" class="">跳转界面</a>
<a href="" target="_self" id="d1" class="">页首</a>
<div style="height: 800px;background-color:blue "></div>
<a href="" target="_self" id="d2" class="">中间</a>
<div style="height: 800px;background-color: yellow"></div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
</body>
</html>
补充：
标签应该具备的属性
1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签
在同一个html页面中 id值不能重复
2.class属性:类似于面向对象的继承
直接引用别的类的样式
5）列表标签
列表标签
1）无序列表(较多)
ul
li
只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
<p>无序列表</p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<ul>
2）有序列表
ol
li
<!-- type可以设置有序类型-->
<ol type="1">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
3）标题列表
dl
dt标题
dd内容
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
6）表格标签
表格标签(******)
展示网站数据的时候 一般情况下可以使用表格标签
<!--表示建立表格的标签，boders表示线宽-->
<table boders=‘5’>
<!-- 表示表头结构 -->
<thead>
<!--一个tr表示一行-->
<tr>
<!--表示加粗内容,通常表头用th-->
<th></th>
</tr>
</thead>
<!-- 表示表丹结构 -->
<tbody>
<tr>
<!-- 表示不加粗的表单内容-->
<td></td>
</tr>
</tbody>
</table>
写表格标签 先写结构 然后写数据
通常情况下表头用th,表单内容用td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表示建立表格的标签-->
<table border="5">
<!-- 表示表头结构 -->
<thead>
<!-- 表示一行-->
<tr>
<!-- 表示加粗内容,通常表头用th-->
<th>用户名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 表示不加粗的表单内容-->
<td>json</td>
<td>18</td>
<td>play</td>
</tr>
</tbody>
<tbody>
<tr>
<td>sean</td>
<td>19</td>
<td >study</td>
</tr>
</tbody>
<tbody>
<tr>
<td >tank</td>
<td>20</td>
<td>sing</td>
</tr>
</tbody>
</table>
</body>
7）表单标签
表单标签(*******)
1）form标签 <form action="" method="" enctype=""></form>
获取用户输入（输入，选择，上传文件....）并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法:
1.不写 默认就是朝当前该页面所在的地址提交数据
2.全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
method参数:
用来控制 提交方式,form表单默认提交方式是get请求,可以指定成post请求
注意:get请求能够直接在url后缀上携带参数,特点是数据全是明文,数据大小有限制,并且get请求不应该携带隐私信息
post请求是将数据放在请求体中发送给服务端,有效避免了一些问题
enctype
控制数据提交的编码格式
默认情况下form表单是不能够直接发送文件的
如果你要发送文件 必须将该参数由默认的urlencoded改为formdata
urlencoded:不支持传输文件数据
form表达想要传输文件数据有两点要求：
method：必须是post请求方式
enctype：必须是formdata
2）input标签
<label for="d1">用户名:<input type="text" id="d1" name="username"></label>
获取用户输入内容，该标签是一个行内标签
input类似于前端的变形金刚
type属性
text 普通文本
password 密文
date 日期
radio 多选一
checkbox 多选多
file：可以上传文件
input框也可以有默认值
value属性
供用户选择的input框都应该有value属性
3）label通常是配合input一起使用的
for用来填写对应的input标签id值
点击label标签内的内容 会自动让对应的input标签 聚焦，相当于你点一下input生成的方框前的那个名字也能进入方框内输入值
checked="checked" 表示默认选择哪一种
当标签的属性名和属性值相同的时候 可以只写属性名
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
4）select标签 表示下拉框，一个个选项就是一个个option标签
默认是单选的
可以加一个multiple该成多选
加selected="selected" 可以表示选项被默认选中，加了multiple可以多选
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
5）能够触发form表单提交数据的按钮
可以通过value属性来指定按钮文本内容
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button>点我</button>
reset 重置
button 普通按钮
submit 触发form表单提交动作
file 获取文件
6）textarea标签
表示获取一个文本框，可以输入文字信息
<textarea name="" id="" cols="30" rows="10"></textarea>
注意事项
1.获取用户输入的标签 都是用value属性来存放用户的输入
获取用户输入的标签都应该有name属性 就类似于字典的key
value属性就类似于字典的value
2.如何给input设置默认
可以直接给input标签加value属性
3.input框如何设置提示信息
username:<input type="text" value="jason" placeholder="用户名">
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>注册功能</p>
<form action="">
<p>
<label for="d1">用户名:<input type="text" id="d1" name="username"></label>
</p>
<!-- <p>-->
<!-- <label for="d2">用户名:</label>-->
<!-- <input type="text" id="d2"></p>-->
<p>
<label for="d2">密码:<input type="password" id="d2" name="password"></p>
<p>生日: <input type="date"></p>
<p>性别:
男<input type="radio" name="gender">
女<input type="radio" name="gender" checked>
其他<input type="radio" name="gender">
</p>
<p>爱好:
篮球<input type="checkbox" name="hobby">
足球<input type="checkbox" checked >
双色球<input type="checkbox">
肉球<input type="checkbox" checked=>
</p>
<p>省份:
<select name="province" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>前女友:
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
</p>
<p>个人简介:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>个人简历:
<input type="file">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button>点我</button>
</p>
</form>
</body>
