前端之HTML初识
手写服务端，启用浏览器（客户端连接服务端）
server.py 文件 #服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
with open('a.txt','rb') as f:
res = f.read()
conn.send(res)
conn.close()
a.txt 文件 # 与server文件在同一个盘符
<h1>welcome to web!</h1>
<a href="https://pro.jd.com">click me</a>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1567501575&di=657a542ad90db39e70cf56a98f3c510a&src=http://img1.cache.netease.com/catchpic/1/13/13FA5A6A2B6601644B841F2B482372A5.png"/>
<img src="https://ss3.baidu.com/-rVXeDTa2gU2
在浏览器窗口输入本机回环地址（127.0.0.1:8080）并回车会将a.txt中的代码对应的内容渲染到网页上
Web服务的本质:
浏览器中敲入网址回车发送了几件事?
1.浏览器朝服务端发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
HTTP协议（HyperText Transfer Protocol）
超文本传输协议
规定了浏览器与服务端之间消息传输的数据格式
四大特性:
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态(服务端无法保存用户的状态,)
4.无连接(请求一次响应一次 之后立马断开连接)
websocket 相当于是HTTP协议的一个大的补丁 它支持长连接
请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
\r \n
请求体(携带的是一些敏感信息比如 密码,身份证号...)
响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器页面的数据 通常响应体都是html页面)
响应状态码
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX:服务端已经成功接收到数据正在处理 可以继续提交额外的数据
2XX:服务端成功响应相应数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动跳到登录页面 301 302)
4XX:请求错误(请求不合法不符合内部规定服务端拒绝访问403，请求资源不存在404)
5XX:服务器内部错误(500)
注意：每个公司都可以自定义自己的状态吗，不需要完全依照上面的规定。
请求方式
1.get请求
朝服务端要资源(比如浏览器窗口输入www.baidu.com)
2.post请求
朝服务端提交数据(比如用户登录 提交用户名和密码)
URL:统一资源定位符(Uniform Resource Locator)，也被称为网页地址，是因特网上标准的资源的地址。
HMTL（HyperText Mark Language）
超文本标记语言
要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循html标记语法
也就意味着所有能够被浏览器显示出来的页面 内部都是html代码
浏览器只认识html css js
web本质
浏览器
服务器
文件(后缀名是.html结尾的文件,也就意味着 只要看到.html结尾文件 那么它就是一个前端页面文件)
文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据
HTML注释
写网页的一套标准
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
HMTL文档结构
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>
html页面打开方式
1.找到文件路径 选择浏览器打开
2.pycharm快捷方式直接打开
标签的分类
标签的分类1:
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>) br hr
标签的分类2
1.块儿级标签(独占浏览器一行)
div p h
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签
但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身
可以嵌套行内标签
总结:
只要是块儿级标签 都可以嵌套行内标签
p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
2.行内标签(自身文本多大就占多大)
span b s i u a img
div和span通常都是用来构建网页布局的
head内常用标签
title用来显示网页标题
style用来控制样式的 内部支持写css代码
script内部支持写js代码 也支持导入外界的js文件
link专门用来引入外部的css文件
meta:
keywords content(定义搜索关键字)
description content（定义搜索关键字下的描述信息）
body内常用标签
body内常用标签
基本标签
h1~h6（标题标签）：<h1>标题1</h1> 自动将文字信息加粗加黑
p(段落标签):<p>段落标签</p>
i(斜体)：<i>斜体</i>
u（下划线）：<u>下划线</u>
s(删除线)：<s>删除</s>
br(换行)：<br>
hr（水平线）：<hr>
符号：
内容 对应代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
常用标签
div
span
p(段落标签)
img
src存放的是图片的路径(该路径可以是本地的也可以是网上的)
1.也可以放url(会自动请求该url获取相应数据)
2.也可以直接放图片的二进制数据 会自动转换成图片
alt当图片加载不出来的时候 显示的提示信息
title当鼠标悬浮在图片上 提示的信息
height,width 当你只指定一个参数的时候 另外一个会等比例缩放
a标签
href：
1）后面存放url的时候 点击跳转到该url
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
target：
_self当前页面跳转（默认）
_blank新建页面跳转
2)锚点功能(a标签的id值)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
列表标签:
ul:无序列表 type参数
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
ol:有序列表 type参数
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl:标题标签
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签(*****)
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>奋斗</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
tr表示一行
th和td都是文本
建议在thead内用th
tbody内用td
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
标签三个重要的属性
1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
补充 任何标签都支持自定义属性!!!
form(表单标签)
能够接收用户输入(输入 选择 上传)并将其发送给后端
action:控制数据提交的目的地
1.不写的情况下 默认提交到当前页面所在的路径
2.写全路径(https://www.baidu.com)
3.路径后缀(/index/)
method:控制数据的提交方式，默认是get请求
enctype:控制前端向后端提交数据的编码格式
<lable> <label/> 标签通常是配合input一起使用的，input框外部套label标签，input标签就不会漂黄了，而且 <label for="id值（input框）">，绑关系之后，点击label任意的内容都能聚焦到对应的id值的input框；
input标签 获取用户的输入框
type：
text:普通文本
placeholder:留白（可以在input输入框加入默认的内容，输入时可以修改）
password:密文 不展示明文
date:日期
submit:触发提交动作
button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作*-+\
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件
type还可以指定一个参数 disabled（禁用模式）或者readonly（只读模式）
select标签
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")
textarea标签
获取用户输入的大段文本
form表单默认是get请求需要通过method参数，将get请求换成post提交
form表单触发提交动作的两种情况:
1.input标签type指定成submit
2.直接写button标签
总结：获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性，就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value；
<input type="text" id="d1" name="username" value="默认值">
name就相当于是字典的key
value就是字典的值
获取都的用户输入都会被放入value属性中
form表单传文件的时候 需要指定enctype参数（***）
form表单在浏览器端向后端提交数据演示（这里用flask后端框架）
# 1.首先先启动服务端，浏览器端输入用户数据，commit提交（这里注册1是commit按钮）
from flask import Flask,request
app=Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form)
print(request.files)
file_obj = request.files.get("avatar") # 获取客服端传来的文件
file_obj.save('xxx.pdf') # 将客户端传来的文件保存到服务端本地
return '收到了' # 客户端提交数据返回给客户端页面的数据
app.run()
# 2.启动HMTL界面
# form表单.hmtl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册界面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
里面加上novalidate参数,表示
<p>
<!--写上label标签，input不会飘黄，另外有一个好处是，写上之后再登录界面上直接点击input框前面文字描述，光标就能直接弹进input框内-->
<label for="d1">
<!--值disabled位置可以写readonly表示只读-->
<!--username:<input type="text" id = 'd1' name ='username' readonly>-->
<!--username:<input type="text" id = 'd1' name ='username' disabled>-->
username:<input type="text" id = 'd1' name ='username' >
</label>
</p>
<p>
<!--不指定type为password，默认输入的是明文密码，加上password密码以密文显示-->
<label for="d2">password:<input type="password" id = 'd2' name ='password' checked="checked"></label>
</p>
<p>
<!--与上面写法一样，直接将input写在label外部，-->
<label for="d3"></label>
birthday: <input type="date" id="d3" name = 'birth'>
</p>
<p>性别：
<label for="">
<input type="radio" name = 'gender' checked value="male">男
<input type="radio" name = 'gender'>女
</label>
</p>
<p>爱好：
<label for="">
<input type="checkbox" name = 'hobby' value="basketball">篮球
<input type="checkbox" name = 'hobby' value="basketball">足球
<input type="checkbox" name = 'hobby' checked value="yumaoqiu">羽毛球
</label>
</p>
<p>前女友：
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">cang</option>
<option value="">sijiali</option>
</select>
</p>
<p>
<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>
<optgroup label="安徽">
<option value="">阜阳</option>
<option value="">黄山</option>
<option value="">淮北</option>
</optgroup>
</select>
</p>
<p>file
<input type="file" name ="avatar">
</p>
<p>个人简历：
<!-- cols和rows可以调节文本框的大小-->
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="hidden">
</p>
<input type="submit" value="注册1">
<input type="reset" value="注册2">
<input type="button" value="注册3">
<button>button标签</button>
</form>
</body>
3.在浏览器页面用户输入信息并点击“注册1”按钮网后端提交数据
4.后端收到客户端的数据及文件
前端之HTML初识的更多相关文章
- 前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- 前端基础----html初识、常用标签
一.HTML初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) ...
- 新手前端笔记之--初识html标签
接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...
- [Web 前端] 021 js 初识 Javascript
1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...
- layui经典模块化前端UI框架初识
layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...
- 2020年12月-第02阶段-前端基础-CSS初识
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- 前端基础之初识 HTML
HTML HTML(Hypertext Markup Language)即超文本标记语言,是WWW的描述语言.设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便 ...
随机推荐
- 强化学习应用于游戏Tic-Tac-Toe
Tic-Tac-Toe游戏为3*3格子里轮流下棋,一方先有3子成直线的为赢家. 参考代码如下,我只删除了几个没用的地方: ####################################### ...
- 应用安全 - 工具|平台 - CDN - 使用|命令 - 汇总
简介 用途 使用缓存适应高并发请求 功能 ()抗DDOS ()隐藏真实IP 全球DNS地址分布:http://www.ab173.com/dns/dns_world.php全球IP地址段分布:http ...
- 【Python开发】Python中的class继承
继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...
- Redis高级主题
Redis高级主题 持久化 Redis 支持持久化, 其持久化数据有两种方式. 两种可以同时使用. 如果同时使用, Reids 在重启时将使用 AOF 方式来还原数据. RDB 按照一定策略定时同 ...
- WinForm笔记1：TextBox编辑时和DataGridView 单元格编辑时 的事件及其顺序
TextBox 编辑框 When you change the focus by using the mouse or by calling the Focus method, focus event ...
- MyBatis 安装和配置
在这里我们使用 MyBatis 开发一个简单的 Java 项目(默认你已安装JDK和MySQL及会使用Maven的基本操作),可以与上一篇通过底层操作数据进行比较 1.新建表 students,插入数 ...
- ABC050D/ARC066D Xor Sum
题目链接 题目大意 可表为 $(a \xor b, a + b)$ 的二元组有多少个? $a, b$ 满足下列约束条件: ① $a, b$ 是非负整数: ② $a + b \le N$,$N$ 是给定 ...
- 厉害了，ES 如何做到几十亿数据检索 3 秒返回！
一.前言 数据平台已迭代三个版本,从头开始遇到很多常见的难题,终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的 实现参考,少走些弯路,在此篇幅中偏重于ES的优化,关于HBase,Hadoop ...
- Ubuntu19.04系统SSH连接CentOS7虚拟机
一.为CentOS7配置静态IP 注意查看宿主机(Ubuntu19.04)所在局域网段,当前为172.18.25.108 修改当前系统下virtual box的网络设置 [控制]-->[设置]- ...
- springboot的一些注解
springboot注解以及一些晦涩难理解的点介绍 @Validated 用于注入数值校验的注解(JSR303数据校验) @PropertySource 用于加载指定的配置文件,例如@Property ...