day 50 前端基础之HTML
1 浏览器发展史
在本章中，我们要研究的内容为前端的开发。我们在前面的章节中学习到的存贮于服务器端的统称为后端技术，而前端技术是指通过浏览器到用户端计算机的统称。因此，前端的所有知识都和“浏览器”紧密相关，在这一节中，我们将通过介绍浏览器的诞生原因及发展历史来详细地阐述浏览器的本质。
1.1 单机
单机阶段>>>>>>>数据积攒了很多，不同人想访问不同计算机上的数据>>>>>>>网络应运而生（局域网-互联网）>>>>>>>cs架构>>>>>>>bs架构
在计算机诞生的最初阶段，程序都是在单一的计算机上运行，于是数据就在一台台独立的计算机上积攒了很多，但如果不同人想访问不同计算机上的数据就会变得十分困难那。在第一章中我们曾提到过，人类设计计算机，是为了让计算机代替人类去进行一些重复的劳动，或者说“劳役”计算机，于是聪明的人类就设计出了“网络”这个概念。
1.2 局域网
我们来进行以下的设想，假如你和你同寝室的室友各自都有一台计算机，而你想将你计算机上的一些文件传输到你室友的计算机上，你或许会用一根网线将你和你室友的计算机连接起来，这样就构成了一个最简单的网络，我们将这种网络称为“局域网”或“私网”。可是，当局域网中计算机的台数一步步地增加，新的问题又产生了。不妨假想下如果全世界的网站都被放入了同一个局域网，那样相隔较远的两台计算机之间的信息传递将变得异常困难。于是，聪明的人类设计出了“互联网”。
1.3 互联网
所谓“互联网”，其本质可以简单地理解为世界各地大大小小的运营商利用一个个节点将不同规模的局域网连接在一起，这个过程我们可以称之为“私网接入“，而当一个局域网连入互联网后，它和其他局域网中的计算机，就相当于处在了同一个规模更大的网络（公网）中，传递信息的效率将获得极大提升，就好比汽车驶上了高速公路，因此，互联网在最早的时候也被称作“信息高速公路”。
1.4 C/S,B/S架构
随着互联网的推广和普及，诞生了很多基于网络的软件，其中就有我们在这一章中索要介绍的C/S，B/S架构。
C/S架构，即客户机Client（C）/服务器Server(S)架构，顾名思义，当用户想正常使用C/S架构软件时必须下载一个客户端（主要用来发送数据），且在远程有一个服务端与之响应。可是，当用户使用的程序越来越多，一个新的问题也随之一并诞生，比如用户想使用20个软件，他就必须下载20个客户端。于是，就有人提出，有没有可能设计出一种“超级客户端”，用户只要下载这个“超级客户端，就可以给多个兼容的服务端发送请求。这个“超级客户端”就是我们现在耳熟能详的“浏览器“，而对应的浏览器Browser和服务器 Server的架构也就被我们称为B/S架构。
提醒：B/S架构其实是一种特殊的C/S架构。
1.5 浏览器的本质
正如前文提到的，浏览器其实就是一个“超级客户端“，它会将请求的数据发送到不同的客户端，并将服务器返回的前端页面通过一定的操作渲染到本地，所以我们可以说浏览器的本质其实就是一种解释器。
2 前端
2.1 前端简介
2.1.1 Web服务本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
2.1.2 什么是前端
任何与用户直接打交道的操作界面都可以称之为前端，比如：电脑界面、手机界面、平板界面
什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)，不直接跟用户打交道
2.1.3 为什么学前端
因为我们是全栈开发工程师。但是前端这一块我们不会学的很详细，只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可，先打下前端的基础，为后续可能需要扩展做准备
2.1.4 前端学习历程
HTML: 网页的骨架 没有任何的样式
CSS: 给骨架添加各种样式 变得好看
JS: 控制网页的动态效果
前端框架：BOOTSTRAP、JQuery、Vue
这些框架，提前给你封装好了很多操作， 你只需要按照固定的语法调用即可
2.1.5 浏览器窗口输入网址回车发生了几件事
过程：
1 浏览器朝服务端发送请求
2 服务端接受请求(eg：请求百度首页)
3 服务端返回相应的响应(eg：返回一个百度首页)
4 浏览器接收响应，根据特定的规则渲染页面展示给用户看~
浏览器可以充当很多服务端的客户端，比如：百度 、腾讯视频、 优酷视频....
如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
1.浏览器很牛逼 ，能够自动识别不同服务端做不同处理
2.制定一个统一的标准， 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互， 那么你就必须要遵循一些规则
2.2 HTTP协议
2.2.1 概念
超文本传输协议 Hyper Text Transfer Protocol
超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循，但是你写的服务端就不能被浏览器正常访问，你就自己跟自己玩，你就自己写客户端，用户想要使用，就下载你专门的app即可
2.2.2 四大特性
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
不保存用户的信息
eg:一个人来了一千次，你都记不住，每次都当他如初见
由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无/短链接
请求来一次我响应一次，之后我们两个就没有任何链接和关系了
长链接：双方建立连接之后默认不断开， websocket
2.2.3 请求
# 请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)
# 这里不是空行，这里有一个\r\n，不要忽略
请求体(并不是所有的请求方式都有请求体。get请求方式没有请求体，post请求方式有请求体，存放的是请求提交的敏感数据)
# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg：用户登陆，输入用户名和密码之后，提交到服务端后端做身份校验
# url：统一资源定位符(大白话，网址)
2.2.4 响应
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k，v键值对)
响应体(返回给浏览器展示给用户看的数据)，响应正文，服务器返回给客户端的文本信息。空行后面的html部分为响应正文。
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在
1XX：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX：服务端成功响应了你想要的数据(200 OK请求成功)
3XX：重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX：请求错误
404：请求资源不存在
403：当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
2.3 HTML
2.3.1 HTML介绍
超文本标记语言 Hyper Text Markup Language
用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件(即网页文件)内容下载到本地，然后打开显示的过程。
而文本文件的文档结构只有空格和换行两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常非常非常的单一。
为了让显示的效果不那么单调，我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前的标记，然后按照预先编排好的结果显示出来。
站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML，HTML全称是超文本标记语言（HyperText Markup Language）。
“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落，如此我们标记一首唐诗就成了如下格式：
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
这样浏览器在接收到文本内容后，就可以按照事先规定好的记号去显示各部分的内容，本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
HTML就是书写网页的一套标准。超文本标记语言，如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法，我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)。
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。
2.3.2 HTML文档结构
最基本的HTML文档：
<!DOCTYPE html>
<html lang="zh-CN">
<head> head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body> body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</body>
</html>
<!DOCTYPE html>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
<html>、</html>称为根标签，所有的网页标签都在<html></html>中。是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>标签用于定义文档的头部，它是所有头部元素的容器。定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
- 文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
- 注意，HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
- 两种打开HTML文件的方式
-
找到文件所在的位置右键选择浏览器打开
-
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
-
3 HTML标签
3.1 HTML标签格式
3.1.1 什么是标签
一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。
什么是标签呢？
在HTML中规定标签使用英文的的尖括号即<>包起来，如<html>、<head>、<body>都是标签，
HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个/，开始标签和结束标签之间的就是标签的内容。标签里面可以有若干属性，也可以不带属性。
有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>
3.1.2 标签的语法
- <标签名 属性1=“属性值1” 属性2=“属性值2”……> 内容部分 </标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
3.1.3 几个很重要的属性
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
3.2 HTML注释
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
>>>>>>>>>>>>>>>>>>>>
HTML注释的注意事项：
1 HTML注释不支持嵌套。
2 HTML注释不能写在HTML标签中。
3.3 标签的分类1
3.3.1 双标签
<h1></h1>
<a href="https://www.mzitu.com/"></a>
3.3.2 单标签
<img/>
3.5 标签注意事项
1 记号/标签是不会显示出来的。
2 标签只是用来做记号而不负责控制样式：虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用
只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样
式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一
种解耦合的思想
3 HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
4 HTML中有部分标签是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>
4 head内常用标签
在书写HTML代码的时候，你只需要写标签名，然后tab就能自动补全
4.1 分类
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息 |
4.2 非meta相关标签
1、标题
<title>百度一下，你就知道</title>
<title>Title</title> 网页标题
2、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">
3定义内部样式
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
4引入外部样式文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
5定义JavaScript代码或引入JavaScript文件
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
4.3 meta相关标签
<meta>相关标签：<meta>是HTML的元素，在网页头部<head>标签内定义，可提供与网页有关的结构化元数据，即网页的元信息(meta-information)。网页上并不会显示这些元信息，但计算机可以识别他们
Meta标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1 name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
2 http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
指定字符集
<meta charset="gbk">
页面描述
<meta name="Description" content="具体描述。。。">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
3关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
3秒后跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
三秒刷新
<meta http-equiv="refresh" content="3">
5 body内常用标签
5.1 HTML语义化
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的
虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情，而且在布局的时候多使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。
提醒：对于那些只用来修改样式的标签将会被淘汰掉!
5.2 基本标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
注意1：虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的
注意2：在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于搜索引擎优化考虑，搜索引擎会使用标题将网页的结构和内容编制索引）。
5.3 标签的分类2
5.3.1 块儿级标签
# 1 块儿级标签：独占一行：h1~h6、p、div
1 块儿级标签可以修改长宽，行内标签不可以，修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签。但是p标签虽然是块儿级标签，但是它只能嵌套行内标签 不能嵌套块儿级标签。如果你套了，问题也不大，因为浏览器会自动帮你解开(浏览器是直接面向用户的，不会轻易的报错，哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签。但是p标签只能嵌套行内标签（HTML书写规范）
5.3.2 行内标签
# 2 行内标签：自身文本多大就占多大：i、u、s、b、span
行内标签不能嵌套块儿级标签，可以嵌套行内标签
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
5.4 特殊符号
| 内容 | 对应代码 |
|---|---|
| 空格 | & nbsp; |
| > | & gt; |
| < | & lt; |
| & | & amp; |
| ¥ | & yen; |
| 版权© | & copy; |
| 注册® | & reg; |
5.5 常用标签
5.5.1 h系列标签
H系列标签标记内容为一个标题，全称headline
h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其次是h2。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
5.5.2 p标签
P标签标记内容为一个段落，全称paragraph
<body>
<h1>亚索</h1>
<p>死亡如风，常伴吾身</p>
<p>长路漫漫，唯剑作伴</p>
</body>
5.5.3 img标签
img标签为标记一个图片，全称image，具体的用法是：
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
使用img标签有以下的几点注意事项：
1 src指定的图片地址可以是网络地址，也可以是一个本地地址。本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2 图片的格式可以是png、jpg和gif
3 alt="图片加载失败时显示的内容" 为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。当图片加载不出来的时候 给图片的描述性信息
4 title = "鼠标悬停到图片上时显示的内容"，当鼠标悬浮到图片上之后，自动展示的提示信息
5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形，那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可，只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形。
height="800px"
width=""，高度和宽度当你只修改一个的时候 ，另外一个参数会等比例缩放，如果你修改了两个参数 并且没有考虑比例的问题 ，那么图片就会失真
5.5.4 a标签
a标签标记一个内容为超链接，全称anchor，也被称作锚。
超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色，如果点击过了就会是紫色（浏览器给你记忆了）
语法：
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">
需要展现给用户查看的内容/也可以是图片
</a>
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转：_self
你也可以修改为新建页面跳转：_blank
使用a标签需要注意以下几点
-a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
-a标签必须有href属性，href的值必须是http://或https://开头
- a标签还可以跳转到自己的页面
<a href="template/aaa.html">跳转到自己这个页面 </a>
- target="_blank"代表在新页面中打开，其余的值均无需记忆，如果页面中大量的a标签都需要设置target="_blank"，那么我们可以在head标签内新增一个base标签进行统一设置<base target="_blank">
- 如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
- title="鼠标悬浮显示的内容"
a标签的锚点功能：点击一个文本标题，页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
5.5.5 div标签和span标签
div：块儿级标签
span：行内标签
上述的两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位之后再去调整样式，尤其是div使用非常的频繁
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
div你可以把它看成是一块区域， 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可。
而普通的文本先用span标签
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
5.5.6 列表标签
列表标签可以标记一堆数据是一个整体或列表，html中列表标签分为三种：
5.5.6.1 无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
提示：这是列表标签中使用最多的一种，非常重要，要重点掌握
无序列表可以制作导航条、商品列表、新闻列表等
虽然ul标签很丑，但是在页面布局的时候，只要是排版一致的几行数据基本上用的都是ul标签
注意点：ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
5.5.6.2 有序列表
<ol type="1" start="5">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
5.5.6.3 标题列表
作用分析
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
- 无序列表：内容是并列的,没有先后顺序
- 有序列表：内容是有先后顺序的
- 自定义（标题）列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
自定义列表也是一个组合标签：dl>dt+dd
dl: defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
5.5.7 表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的。
基本结构：
<table>
<thead>
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody>
</table>
属性
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
---------------------------------------------
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 垂直方向占多行
# 原生的表格标签很丑，但是后续我们一般都是使用框架封装好的，很好看
5.5.8 表单标签
5.5.8.1 介绍
表单的功能
表单用于向服务器传输数据，从而实现用户与Web服务器的交互，能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站
很重要的内容。表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反
馈一个输入完成的信息。
表单属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
5.5.8.2 表单内标签
5.5.8.2.1 input
元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
注意：
radio：单选，默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox：多选
<input type="checkbox" checked>
file：获取文件，也可以一次性获取多个
<input type="file" multiple>
hidden：隐藏当前input框，用于做钓鱼网站
能够触发form表单提交数据的按钮有哪些
1、<input type="submit" value="注册">
2、<button>点我</button>
属性说明:
name：表单提交时的“键”，注意和id的区别。
所有获取用户输入的标签，都应该有name属性，name就类似于字典的key，用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
5.5.8.2.2 select
select 标签默认是单选，可以加mutiple参数变多选，默认选中selected
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
5.5.8.2.3 textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
5.5.8.2.4 label
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
5.5.8.3 一个注册功能
5.5.8.3.1 注意事项
点击查看代码
# 写一个注册功能
在该form标签内部书写的获取用户的数据都会被form标签提交到后端
<body>
<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" name="username" value="默认值" readonly>
</label>
</p>
</form>
</body>
action: 控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 ，默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com， 朝百度服务端提交
3.只写路径后缀action='/index/' ，自动识别出当前服务端的ip和port拼接到前面，host:port/index/
--------------------------------------------------------------------------
<input>一般都会与<label>合用，效果是鼠标点在文字上也会进入输入框内
第一种 直接讲input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种 通过id链接即可，无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
input不跟label关联也没有问题，abel 和 input都是行内标签
5.5.8.3.2 表单具体代码
点击查看代码
<!DOCTYPE html>
<html lang="en">
>>>>>>>>>>>>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
>>>>>>>>>>>>
<body>
<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" name="username" value="默认值" readonly>
</label>
</p>
--------------------------------------------------------
<p>
<label for="d2">
password:<input type="password" id="d2" name="password">
</label>
</p>
--------------------------------------------------------
<input type="hidden" name="usernamename" value="骗子账户">
--------------------------------------------------------
<p>birthday:
<input type="date">
</p>
--------------------------------------------------------
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
--------------------------------------------------------
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
--------------------------------------------------------
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
--------------------------------------------------------
<p>前女友:
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
</p>
--------------------------------------------------------
<p>province1:
<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="">111</option>
<option value="">222</option>
<option value="">333</option>
</optgroup>
</select>
</p>
--------------------------------------------------------
<p>文件:
<input type="file" multiple name="myfile">
</p>
--------------------------------------------------------
<p>自我介绍:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
--------------------------------------------------------
<input type="submit" value="注册">
<!--当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
</form>
</body>
</html>
5.5.8.4 表单总结
点击查看代码
# 作用：能够获取用户数据并且发送到后端
格式：<form action='' method='' enctype=''></form>
----------------------------------------------------
参数讲解：
action：控制数据的提交路径
1.不写默认朝当前页面所在的地址提交
2.写全路径
3.只写后缀 /index/ ，能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑)
----------------------------------------------------
method：控制请求方式
默认是get请求
也可以携带数据，但是数据是直接破解在url后面的，不安全并且大小有限制
url?username=jason&password=123
可以修改为post请求
携带的数据放在请求体里面的
----------------------------------------------------
enctype：控制数据的编码方式
默认是urlencoded，只能发送普通的文本， 不能发送文件
如果你要发送文件，必须改为， formdata
发送文件必须要修改的两个参数
method = 'post'
enctype='...formdata'
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
表单常用两个标签：
----------------------------------------------------
input标签：获取用户数据的(输入 、选择、 上传...)
格式：<input type=''></input>
type可以书写的类型
text 普通文本
password 展示密文
date 日期
radio 单选
想实现默认选择时，可以用checked(属性名和属性值一样的时候就可以简写)
checkbox 多选
默认选择可以用checked
file 获取文件
了解:可以加multiple 支持传多个文件
submit 触发form表单提交动作
button 什么功能都没有 就是一个普通的按钮
reset 重置按钮
----------------------------------------------------
select标签 ，下拉框，默认是单选，可以加multiple成多选
一个个下拉框选项是一个个的option标签
option标签默认选中可以加selected
<select>
<option value=''>111</option>
<option value=''>222</option>
<option value='' selected>333</option>
</select>
----------------------------------------------------
textarea标签，获取大段文本内容
----------------------------------------------------
label标签 给input加上对于的注释信息，不写其实也没有关系
input写在lable里面
label的for关联input的id值 可以不嵌套
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
获取用户数据的标签都应该都name属性，因为你需要给后端发送数据并且需要标明数据到底表示什么
name：字典的key
value：字典的value(用户数据)
需要用户选择的标签，你需要自己加上value值
radio
checkbox
option
ps:如果你给获取用户输入的标签加了value值，那么就类似于默认值
ps:hidden、disable、readonly、placeholder
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
# 触发form表单提交数据的两种方式
type=submit
button按钮
浙公网安备 33010602011771号