前端HTML
HTML
文章目录
-
- HTML
-
- 一、Web服务本质
- 二、HTML简介
-
- 1. HTML是什么？
- 2. 注意: HTML不是编程语言
- 三. 两种打开HTML文件的方式
- 四. HTML注释
- 五.
- 六. HTML文档结构
- 七. 标签的分类1: 单/双标签
- 八. HTML标签格式
- 九. head内常用标签
-
- 1. 基本标签
- 2. meta标签
- 3. 总结
- 十. body内常用标签
- 十一. 特殊符号
- 十三. 常用标签
- 十四. 标签的分类2: 块级/行内
- 十五. img标签
- 十六. a标签
- 十七. 列表标签
-
- 1. 无序列表
- 2. 有序列表
- 3. 定义列表(了解）
- 十八. 表格标签
- 十九. 表单标签
-
- 1. 表单功能
- 2. 表单属性
- 3. 表单元素
- 4. 使用Flask验证表单提交数据
- 5. 总结(详细!!!)
一、Web服务本质
import socket
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, client_addr = server.accept()
data_bytes = conn.recv(1024)
print(data_bytes)
conn.send(b'http/1.1 200 OK \r\n\r\n')
# 1. 纯文本
# conn.send(b'hello world!')
# 2. 标签
# conn.send(b'hello world!
')
# 3. 使用文件方式
"""
文件内容如下:
hello world!
click me! give you some color to see see!
"""
with open('a.txt', 'rb') as f:
conn.send(f.read())
conn.close()
"""
=================== 请求首行 ===================
b'GET / HTTP/1.1\r\n
=================== 请求头 ===================
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n
=================== \r\n ===================
\r\n'
=================== 请求体. 只有收到post请求方式才有 ===================
"""
执行流程: 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
二、HTML简介
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
补充: 除了HTML可以书写前端页面之外, 还有XML也可以书写前端页面, 具有代表性的odoo框架内部的前端页面全部是用XML书写的. 还有就是公司内部会使用一种管理软件ERP, 也可以实现前端页面的书写.
1. HTML是什么？
CopyHTML是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
2. 注意: HTML不是编程语言
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。
三. 两种打开HTML文件的方式
"""
方式一: 找到文件所在的位置右键选择浏览器打开
方式二: 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
"""
四. HTML注释
注释是代码之母
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
导航条所有的html代码
左侧菜单栏的HTMl代码
五.
"""
声明必须是 HTML 文档的第一行，位于 标签之前。
这种文档声明不是 HTML 标签, 它只是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
"""
六. HTML文档结构
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级title>
head>
<body>
body>
html>
注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为
**补充: **HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码标签的分类:
七. 标签的分类1: 单/双标签
<h1>h1>
<a href="https://www.mzitu.com/">a>
<img/>
1 双标签
2 单标签(也叫自闭和标签)
八. HTML标签格式
# 介绍
"""
HTML标签是由尖括号包围的关键字，如, 等
HTML标签通常是成对出现的，比如：和，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：
、
、
等。
标签里面可以有若干属性，也可以不带属性。
"""
# 标签的语法
"""
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
"""
# 标签具有的几个重要属性
"""
id：定义标签的唯一ID，HTML文档树中唯一. 类似于标签的身份证号 在同一个html页面上id值不能重复
class：为html元素定义一个或多个类名（classname）(CSS样式类名). 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
style：规定元素的行内样式（CSS样式）
"""
# 标签既可以有默认的书写属性也可以有自定义的书写属性
"""
"""
九. head内常用标签
1. 基本标签
<title>Titletitle>
<style>
h1 {
color: greenyellow;
}
style>
<script>
alert(123)
script>
<script src="myjs.js">script>
<link rel="stylesheet" href="mycss.css">
2. meta标签
# Meta标签介绍
"""
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。
"""
# meta标签的组成
"""
meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
"""
- http-equiv 属性: 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。补充: equiv 全称 equivalent /ɪˈkwɪvələnt/ 相等的 等值 相当于
<meta http-equiv="content-Type" charset="UTF8">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name 属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
3. 总结
<title>网页标题title>
<style>style>
<link rel="stylesheet" href="url">
<script>script>
<script scr="源文件链接">script>
<meta name="keywords" content="关键字1, 关键字2, 关键字3">
<meta name="description" content="网页描述信息">
<meta http-equiv="content-type" charset="字符编码">
十. body内常用标签
<h1>一级标题h1>
<p>段落标签p>
<b>加粗b>
<i>倾斜i>
<u>下划线u>
<s>删除线s>
<br>
<hr>
十一. 特殊符号
空格
& AND符 &
> 大于号 >
< 小于号 <
¥ 羊角符 ¥
© 版权符 ©
® 商标 ®
十三. 常用标签
"""
div 块级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的, 页面的布局一般先用div和span占位之后再去调整样式, 尤其是div使用非常的频繁.
div你可以把它看成是一块区域, 也就意味着用div来提前规定所有的区域之后往该区域内部填写内容即可, 而普通的文本先用span标签.
"""
# 全称及缩写说明
"""
div Division 分隔
span Span 范围
"""
十四. 标签的分类2: 块级/行内
# 块级标签: 独占一行 h1~h6 p div
"""
块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.
块级标签内部可以嵌套任意的块级标签和行内标签. 特例: 是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签. 如果你套了 问题也不大 因为浏览器会自动帮你解除嵌套关系(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
"""
# 行内标签: 自身文本多大就占多大. i u s b span
"""
行内标签不能嵌套块级标签, 只能嵌套行内标签.
"""
# 补充: 上述的规定只是HTML书写规范 如果你不遵循 不会报错
十五. img标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
Copy# 全称及缩写说明
"""
alt alter 替用(一般是图片显示不出的提示)
src Source 源文件链接
"""
十六. a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d4">hello world</h1>
<div style="height: 1800px; background: aliceblue"></div>
<a href="" id="d2">中间</a>
<div style="height: 1800px; background: aqua"></div>
<a href="" id="d3">底部</a>
<div style="height: 1800px; background: cadetblue"></div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
<a href="#d4">回到hello world</a>
# 全称及缩写说明
"""
Anchor /ˈæŋkə(r)/
Division /dɪˈvɪʒn/
a Anchor 锚(定义超链接，用于从一张页面链接到另一张页面)
href hypertext reference 超文本引用
div Division 分隔
"""
十七. 列表标签
1. 无序列表
<ul type="disc">
<li>哈哈哈1li>
<li>哈哈哈2li>
<li>哈哈哈3li>
ul>
# type属性
"""
disc （实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none （无样式）
"""
# 全称及缩写说明
"""
ul Unordered List 不排序列表
li List Item 列表项目
"""
2. 有序列表
<ol type="1" start="2">
<li>111li>
<li>222li>
<li>333li>
ol>
# type属性
"""
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ 大写罗马
ⅰ 小写罗马
"""
# 全称及缩写说明
"""
ol Ordered List 排序列表
li List Item 列表项目
"""
3. 定义列表(了解）
<dl>
<dt>标题1dt>
<dd>内容1dd>
<dt>标题1dt>
<dd>内容1dd>
<dt>标题1dt>
<dd>内容1dd>
dl>
# 全称及缩写说明
"""
Definition /ˌdefɪˈnɪʃn/
dl Definition List 定义列表
dt Definition Term 定义术语
dd Definition Description 定义描述
"""
十八. 表格标签
username
password
hobby
others
jsaon
read
egon
DBJ
吃生蚝
tank
摸鱼
弹棉花
<table border="10">
<thead>
<tr>
<th>usernameth>
<td>passwordtd>
<th>hobbyth>
<th>othersth>
tr>
thead>
<tbody>
<tr>
<td>jasontd>
<td rowspan="3">123td>
<td colspan="2">readtd>
tr>
<tr>
<td>egontd>
<td>DBJtd>
<td>吃生蚝td>
tr>
<tr>
<td>tanktd>
<td>摸鱼td>
<td>弹棉花td>
tr>
tbody>
table>
- 创建流程
"""
colspan 当前行中的列合并(水平方向占多行)
rowspan 合并多行属性(垂直方向占多行)
"""
table[border=1]>(thead>th)+(tbody>tr>td+td)
- 属性
"""
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格
"""
十九. 表单标签
1. 表单功能
"""
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
"""
2. 表单属性
属性
描述
accept-charset
规定在被提交表单中使用的字符集（默认：页面字符集）。
action
规定向何处提交表单的地址（URL）（提交页面）。
autocomplete
规定浏览器应该自动完成表单（默认：开启）。
enctype
规定被提交数据的编码（默认：url-encoded）。
method
规定在提交表单时所用的 HTTP 方法（默认：GET）。
name
规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate
规定浏览器不验证表单。
target
规定 action 属性中地址的目标（默认：_self）。
几种重要的属性详解:
3. 表单元素
<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" placeholder="请输入用户名" name="username" value="root">
username: <input type="text" id="d1" placeholder="请输入用户名" name="username" value="root" disabled>
label>
p>
<p>
<label for="d2">password:label>
<input type="password" id="d2" name="password" placeholder="请输入用户密码" value="123">
p>
<p>
<input type="hidden" name="usernamename" value="骗子账户">
p>
<p>
<label for="d3">
birthday: <input type="date" id="d3" name="birthday">
label>
p>
<p>
gender:
<label for="d4">
<input id="d4" type="radio" name="gender" value="male" checked> 男
label>
<input type="radio" name="gender" value="female"> 女
<input type="radio" name="gender" value="other"> 其他
p>
<p>
hobby:
<input type="checkbox" name="hobby" value="read"> read
<input type="checkbox" name="hobby" value="DBJ" checked> DBJ
<input type="checkbox" name="hobby" value="JBD" checked> JBD
<input type="checkbox" name="hobby" value="HeCha"> HeCha
p>
<p>
province:
<select name="province" id="">
<option value="Shanghai">上海option>
<option value="Beijing" selected>北京option>
<option value="Shenzhen">深圳option>
select>
p>
<p>
前女友:
<select name="ex-girlfriend" id="" multiple>
<option value="xxx">xxxoption>
<option value="yyy" selected>yyyoption>
<option value="uuu" selected>uuuoption>
select>
p>
<p>
province1:
<select name="province1" id="">
<optgroup label="上海">
<option value="Pudong">浦东option>
<option value="Puxi" selected>浦西option>
<option value="PuNa" selected>浦南option>
optgroup>
<optgroup label="北京">
<option value="Tian An Men">天安门option>
<option value="The gates">地安门option>
<option value="When the door">中安门option>
optgroup>
<optgroup label="深圳">
<option value="Foxconn">富士康option>
<option value="Fuji bad">富士坏option>
<option value="Fuji in">富士中option>
optgroup>
select>
p>
<p>
文件: <input type="file" multiple name="myfile">
p>
<p>
自我介绍: <textarea name="info" id="" cols="30" rows="10" maxlength="20" placeholder="请简单的介绍自己不多余20个字!">textarea>
p>
<p>
<input type="submit" value="注 册">
<input type="button" value="按 钮">
<input type="reset" value="重 置">
<button>按 钮button>
p>
form>
4. 使用Flask验证表单提交数据
# 添加了环境变量以后在命令行中下载(这里使用清华源下载)
pip3 install https://pypi.tuna.tsinghua.edu.cn/simple Flask
Copyfrom flask import Flask
from flask import request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
'''
ImmutableMultiDict([('username', 'root'), ('password', '123'), ...])
'''
print(request.files) # 获取文件数据
'''
ImmutableMultiDict([('myfile', ),])
'''
file_obj = request.files.get("myfile") # 通过get表单标签中的file标签中定义的name属性的值myfile获取到文件对象
# print('file_obj.name:', file_obj.name) # 获取`文件名`
print('file_obj.filename:', file_obj.filename) # 获取`文件名.后缀`
if file_obj:
file_obj.save(file_obj.filename) # 保存文件对象到当前目录下(.filename以当前`文件名.后缀`保存)
return 'OK'
app.run()
5. 总结(详细!!!)
# 标签分类:
块级标签: form
行内标签: label, input, textarea, select, option, optgroup
# form种所有标签共用属性:
name 提交到后端的key.
value 提交到后端的value. 文本框标签可以不指定, 通过获取用户输入的内容就是value. 选选框类型等都需要自己指定value值.(特例: 如果是按钮类型就仅仅是显示按钮的展示文本)
disabled 禁用.
# 文本框类型共用属性: (文本框类型包括: 普通文本,密文文本, 文本域)
readonly 只读
placeholder 提示占位符
maxlength 最大输入长度
# 选框类型共用属性: (选框类型包括: 单选框, 多选框, 文件选框, 下拉选框单选框, 下拉多选框, 下拉选项组选框)
文件选框多选, 下拉多选框: multiple
单/多选框默认选中: checked
下拉系列默认选中: selected(需先为select标签指定multiple属性)
# 提示: 除了按钮没有必要指定label其他标签都可以被label包裹.
label第一种写法: 直接将input框写在label内
label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以)
# input标签:
text 普通文本
input[type=text][name]
password 密文文本
input[type=password][name]
date 提供时间日期选择
input[type=date][name][value]
提示: 当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致
submit 提交按钮. 用来触发form表单提交数据的动作
input[type=submit][value]
button 普通按钮. 本身没有任何的功能, 但是它是最有用的, 学完js之后就可以给它自定义各种功能
input[type=button][value]
reset 重置按钮. 重置
input[type=reset][value]
radio 单选框 默认选中要加checked='checked', 当标签的属性名和属性值一样的时候可以简写成checked(注意: 每个单选框都需要为指定相同的name属性的值, 才能达到单选的目的)
input[type=radio][name][value]
checkbox 多选框
input[type=checkbox][name][value]
file 获取文件.
input[type=file][name][value]
hidden 隐藏当前input框. 只是不显示在页面中, 后台还存在着.(钓鱼网站)
input[hidden][name][value]
# textarea文本域标签
textarea[name]
# button 按钮标签
button[name][value]
# select标签:
下拉单选
select[name]>option[value]
下拉多选:
select[name][multiple]>option[value]
下拉选项组单选
select[name]>(optgroup[label]>option[value])+(optgroup[label]>option[value])
下拉选项组多选
select[name][multiple]>(optgroup[label]>option[value])+(optgroup[label]>option[value])
!!!注意!!!: 触发form表单提交功能的按钮有2种: button input[type=submit]