HTML初识
click 点击 hover 悬浮 blur 失去焦点 focus 获取焦点 change 内容变化 keyup 按键启动
HTML初识
△HTML:
超文本标记语言，是一种用于创建网页的标记语言，不是编程语言,没有逻辑
本质上是浏览器可识别的规则
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）
网页文件的扩展名：.html或.htm（没有区别）
我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm（没有区别）
△css：
层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言
JavaScript：
简称“JS”，是一种属于网络的脚本语言
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
△jQuery：
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码
△boodstarp(JQ+css):
bootstrap：简洁、直观、强悍的前端开发框架
它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
△B/S (前端/后端)
Web服务的本质：
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->
服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
浏览器内嵌了一个socket客户端，默认TCP链接
△浏览器自带socket客户端，自己编写的服务端也可以为浏览器服务

1
from socket import *
2
jd_server = socket()
3
4
jd_server.bind(("",8001))
5
jd_server.listen(5)
6
conn,client_add = jd_server.accept()
7
from_client_msg = conn.recv(1024)
8
print(from_client_msg.decode())
9
conn.send("nihao".encode())
10
conn.close()
11
jd_server.close()
按照HTTP协议加载浏览器能看懂的数据：

1
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
2
conn.send(b"nihao")
HTTP/1.1 200 OK:
HTTP/1.1 是一个规范
200 代表请求成功
OK 表示一切正常

1
conn.send(b"
nihao
") #用标题包裹数据，更好看一些标签一般形成一个结构写在文件里，这个文件就是HTML文件
HTTP/1.1 是一个规范

1
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
2
conn.send(b"nihao")
pycharm中创建一个html文件（英文名，不要空格）
你会发现，整个结构都直接生成好了,因为不管什么浏览器，文档结构都是这样的

html文件可以在pycharm中就能打开
△自己写一个服务器
当浏览器来连服务器时,把HTML文件发送给浏览器

1
from socket import *
2
3
s = socket()
4
s.bind(("",8881))
5
s.listen(5)
6
new_s, addr = s.accept()
7
data = new_s.recv(1024)
8
print(data.decode())
9
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")
10
11
with open("test.html","rb") as f:
12
data = f.read()
13
new_s.send(data)
14
new_s.close()
15
s.close()
16
HTML文档结构
△最基本的HTML文档：

1
<!DOCTYPE html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>:HTML文件声明，声明为HTML5文档
16
、:是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）
17
18
、:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的
19
20
21
、:之间的文本是可见的网页主体内容
22
23
注意：对于中文网页需要使用 声明编码，否则会出现乱码
24
有些浏览器会设置 GBK 为默认编码，则你需要设置为
25
△浏览器页面调试工具 F12
Elements（元素）：对浏览器看来，所有标签都是元素
标签对文本进行了标记，所以HTML叫超文本标记语言
浏览器有识别标签的机制
HTML标签格式
标签分类定义
块级/内联:判断依据为显示的web中独占至少一行的body中的标签
块级标签(行外标签,独占一行):
块级标签能够包含内联标签,和某些块级标

1
一级标题
标题标签2
换行标签
3
换行横线标签
4
5
段落标签
6
第一章内容
7
8
9
10
11
12
13
- 无序列表标签
- 茶 列表内容标签
14
15
16
17
18
- 有序列表标签
19
li>梅
20
21
22
23
- 无标识标签
- 河北省
- 邯郸
24
25
26
27
28
29
| Month | 表头加粗的内容Savings |
|---|---|
| January | 表内容$100 |
内联标签(行内标签,不独占一行):
不能包含块级标签

1
图片标签
2
跳到底部 超链接标签
3
蓝色 文档标签
全封闭标签:

1
2
一级标题
标题标签3
跳到底部 超链接标签
4
5
我的车是 蓝色 的。
段落标签 文档分区标签6
7
8
9
段落标签
10
第一章内容
11
12
13
14
15
- 无序列表标签
- 茶
16
17
18
19
20
- 有序列表标签
21
li>梅
22
23
24
25
- 无标识标签
- 河北省
- 邯郸
26
27
28
29
30
31
32
| Month | 表头加粗的内容Savings |
|---|---|
| January | 表内容$100 |
自封闭标签:

1
元信息标签
2
网头图标标签
3
换行标签
4
换行横线标签
5
图片标签head内常用标签（了解）：
标签 元信息
用处:标签位于文档的头部,提供的信息是用户不可见的,是一个自封闭标签,全封闭标签,可提供有关页面的元信息（meta-information）
有一下关键字:
charset=
ontent="3"
定义文档字符编码和更新频度的描述:

1
2
三秒刷新
3
4
自动跳转
http-equiv=
浏览器内核（渲染引擎）：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是兼容性问题出现的根本原因，大部分渲染效果差不多

1
2
3
4
IE比较个色
name="keyword" content="搜索关键字"
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类

1
name="description" content="网站描述信息"
设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息

1
触屏缩放
name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"

1
2
3
device-width：设备宽度
4
- initial-scale=1.0，初始显示缩放比例。
5 - minimum-scale=0.5，最小缩放比例。
6 - maximum-scale=1.0，最大缩放比例。
7 - user-scalable=yes，是否支持可缩放比例（触屏缩放）
网头 标签
link 标签 网头图标

1
body内常用标签标签 标题

1
2
hehe #body中没有包裹的就是普通文本显示
3一级标题
4二级标题
5三级标题,大圣
6四级标题
7五级标题
8六级标题
9
10
br标签 换行

1123
2
34
5
4
5
123
6
7
4
8
5
注意点:直接回车、空格等空白内容都被认为是一个空格
hr 标签 一行横线

1
1
2
2
3
1
4
----------------------------------
5
2
form标签 表单

1
使用
4
action属性: 指定提交路径,提交到哪里去
5
6
12
input标签 输入框

1
用户名：
2
3
4
密码:
5
6
7
8
9
10
11
12
、
13
14
15
16
textarea标签 多行文本输入框
多用于评论

1
select标签 下拉框

1
单选
2
8
9
多选
10
ctrl键多选
11
17
a 标签 超链接
锚点：页面内容进行跳转（在自己的页面跳）

1
2
3
第一章
4
第二章
5
第三章
6
7
第一章 XXX
8
#段落标签
9
第一章内容
10
不加href属性,就是普通文本显示

1
古风
加上href属性,不加值文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面

1
跳到底部
加上href属性,并且加上值

1
baidu
跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址
p标签 段落

1
2
第一章内容
3
span标签 文档分区

1
我的车是 蓝色 的。
2
如果不对 div和span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异
div标签 换行文档分区
div是一个块级元素。这意味着它的内容自动地开始一个新行
可以把文档分割为独立的、不同的部分

1
2
This is a header
3
This is a paragraph.
4
5
6
ul标签 无序列表

1
兴趣爱好:
2
- #
- 茶
- 酒
- 棋
- 作为无序列表的声明
3
4
5
6
ol标签 有序列表

1
君子:
2
- #
- 梅 #所以会使用数字进行标识
- 兰
- 竹
- 菊
- 河北省 表头
- 邯郸 内容
- 石家庄
- 山西省
- 太原
- 平遥
- 标签定义有序列表,有序列表的各个列表项有先后顺序，
3
4
5
6
7
dl标签 无标识表(缩进)

1
2
3
4
5
6
7
8
9
10
河北省
11
邯郸
12
石家庄
13
山西省
14
太原
15
平遥
tble标签 表格

1
| Month | 表头加粗的内容Savings |
|---|---|
| January | 表内容$100 |
11
12
表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
13
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
14
15
border:规定表格边框的宽度
16
17
18
写法二：
19
第二种写法:
20
| id | name | age |
|---|---|---|
| 1 | xiaoming | 20 |
| 2 | xiaoli | 18 |
46
47
48
49
img标签 图片

1
2
3
src属性:图片路径 必须写
4
alt属性:图片加载失败或者正在加载时提示的内容
5
title属性:鼠标悬浮时显示的内容
6
7
不常用,通过css来控制
8
width:设置宽度
9
height:设置高度
css
层叠样式表,作用是为标签加效果

1
基本选择器
元素选择器
标签名称{css属性:值}

1
div{width:100px;}
id选择器
id{}

1
html代码:
2
3
4
5
6
css写法:
7
#d1{
8
background-color: green;
9
width: 100px;
10
height: 100px;
11
}
类选择器
.class1{属性:值}

1
html代码:
2
3
baby
4
5
6
7
热巴
8
9
10
11
唐艺昕
12
13
14
15
css写法:
16
.c1{
17
background-color: green;
18
width: 100px;
19
height: 100px;
20
}
属性选择器

1
html代码:
2
3
baby
4
5
6
7
热巴
8
9
10
css写法:
11
[xx]{
12
/属性查找/
13
background-color: green;
14
width: 100px;
15
height: 200px;
16
}
17
18
19
[xx='ss']{
20
/属性带属性值查找/
21
background-color: green;
22
width: 100px;
23
height: 200px;
24
}
后代选择器
html代码:

1
div id="d1" class="c1" xx="ss">
2
3
baby
4
5
来源：https://www.cnblogs.com/-xct/p/12013789.html