HTML中标签的分类，特殊符号，常用标签div&span&img&a，class & id 标签， table 表格标签，form表单，input标签，elect标签，textarea标签，网络请求方式，验证form表单提交数据，CSS的语法结构
Ⅰ HTML中标签的分类
- HTML中的标签可以分为两种主要类型：块级标签和行内标签。
【一】块级标签（Block-level elements）
【1】介绍
- 块级标签是指一类会独自占据一行的HTML元素。
- 它们从新的一行开始，直到遇到下一个块级标签或行内标签。
- 块级标签通常用于组织和结构化页面的不同部分，并且可以包含其他块级元素和行内元素。
【2】常见的块级标签
为了方便展示标签字符前面都加了一个空格
- < div>：将内部所有的标签划分为一整块。
- < p>：用于定义段落，段落标签 每一行数据是一段。
- < h1>-
：用于定义标题的级别。
- < ul>：用于创建无序列表，ul + li ： 无序列表。
- < ol>：用于创建有序列表，ol + li ： 有序列表。
- < table>：用于定义表格，有序列表。
（1）< div >的块级展示
（2） < p >：用于定义段落
（3）无序列表和有序序列
【二】行内标签（Inline elements）
【1】介绍
- 行内标签是指在一行内显示的HTML元素，它们不会打断当前行并且只占据所需的内容宽度。
- 行内标签通常用于插入和标记文本中的小片段或注释，并且不能包含块级元素，只能包含其他行内元素。
【2】常见的行内标签
- < span>：用于对文本的某个部分进行样式化或划定特定区域。
- < a>：用于创建超链接。
- < strong>：使文本加粗显示。
- < em>：使文本斜体显示。
- < img>：用于插入图像，渲染图片资源的标签。
- < br>：用于换行。
- < i>/ < u>…….
（1）区分行级标签和块级标签简单方法
- 将两个相同标签放一块
- 换行的的是块级标签
- 不换行的是行级标签
（2）< span>展示
（3）< strong>：使文本加粗显示
【3】补充说明
- 需要注意的是，HTML5中引入了一些新的标签和元素，它们的性质可能介于块级和行内之间，被称为块级行内元素（block-level inline element）或行内块级元素（inline block-level element）
- 如 < button>、< input> 等，其具体表现取决于CSS的属性和样式。
【三】标签的分类小总结
- 块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
- 块级标签内部可以嵌套任意的块级标签和行内标签
- 但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
- 如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
- 小结
- 只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
- 行内标签不能嵌套块级标签 可以嵌套行内标签
Ⅱ HTML中特殊符号
【一】空格 & nbsp
【二】大于号 >
>
【三】小于号 & lt
<
【四】&符& amp
&
【五】￥符& yen
¥
【六】版权& copy
©
【七】商标& reg
®
【小结】
- 特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
- 版权符号：©，表示方法为& copy; 或者 & #169;。
- 注册商标符号：®，表示方法为& reg; 或者 & #174;。
- 商标符号：™，表示方法为& trade; 或者 & #8482;。
- 惊叹号：！，直接输入"!" 即可。
- 问号：？，直接输入"?" 即可。
- 减号：-，直接输入 "-" 即可。
- 加号：+，直接输入 "+" 即可。
- 百分号：%，直接输入 "%" 即可。
- 等于号：=，直接输入 "=" 即可。
- 乘号：×，表示方法为 & times; 或者 & #215;。
- 除号：÷，表示方法为& divide; 或者 & #247;。
- 分号：；，直接输入";" 即可。
- 冒号：：，直接输入":" 即可。
- 单引号：'，直接输入"'" 即可。
- 双引号："，直接输入 """ 即可。
Ⅲ 常用标签div&span&img&a
【一】div标签
- 它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
- Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
- 它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。
【二】span标签
- 它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
- Span标签通常用于对特定部分进行样式修饰或添加特殊效果
- 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
- 与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。
- 在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
- 可以把div标签看成一块区域
- 也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
- 普通的文本先用span占位
- 然后再去装饰页面
【三】img标签
- 图片标签
<img src="" alt="" title="" height="" width="">
- src
- 存放图片的路径(可以是本地也可以是网页链接)
- alt
- 当图片加载不成功时，加载出的图片描述性信息
- title
- 当鼠标悬浮在图片上面之后，自动展示图片信息
- height/width
- 高度和宽度，要用像素作为单位 px
- 当你在调整其中一个参数时，另一个参数也会等比例缩放
- 当在调整两个参数而不考虑比例时，就会造成图片的失真
【1】src 正常展示
【2】alt 删除一部分图片源地址展示
【3】当鼠标悬浮在图片上面之后，自动展示图片信息
【4】height/width
height='80'
width ='20'
【四】a标签
- 链接标签
<a href="" target="_blank"></a>
<a href="" target="_self"></a>
- href
- 指定 url 用户点击该链接就会跳转到目标链接
- 当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
- 当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
- 可以放其他标签的id值，点击即可跳转到对应的标签位置
- 指定 url 用户点击该链接就会跳转到目标链接
- target
- _self
- 默认 a 标签是在当前页面完成跳转
- _blank
- 跳转到新建的标签页
- _top
- 原地刷新打开新网址
- _self
- 原地刷新打开新网址
- _parent
- 原地刷新打开新网址
- a标签的锚点功能
- 提前定义一个a标签并给定一个标志 在另一个位置href属性指定另一个位置的标志即可完成定向跳转
- 比如点击一个文本标题，自动跳转到标题对应的区域
<a href="" id="d1">顶部</a>
<a href="" id="d2">中间</a>
<a href="" id="d3">底部</a>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
【1】href指定 url 用户点击该链接就会跳转到目标链接
【2】_blank 跳转到新建的标签页
【3】_top , _self , _parent: 原地刷新打开新网址
【4】a标签的锚点功能
- 提前定义一个a标签并给定一个标志 在另一个位置href属性指定另一个位置的标志即可完成定向跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="" id="a1">跳转地点</a>
定义跳转的地点
<a href="#a1">
跳转回顶部
</a>
</body>
</html>
- 点击之后自动跳转
【五】总结
- Div标签用于对页面进行布局和结构划分
- 而Span标签则更多地用于对文字或一小段文本进行样式控制。
- 根据需要，可以通过设置不同的class或id来给这些标签添加样式，并使用CSS来对其进行进一步的控制和美化
Ⅳ class & id 标签的两个重要属性
【一】id值
- 是类似于标签的唯一标识符，用于在同一个页面上唯一标识一个特定的元素。
- 每个id值在整个文档中都必须是唯一的，不能重复使用。
- 通过id值，我们可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。
- 类似于标签的身份证号，在同一个页面上id值不能重复
- 重复使用报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1">蒹葭苍苍</p>
<p id="p2">白露为霜</p>
</body>
</html>
【二】class值
代表的含义是一类标签 ， 在一个页面上多个标签可以有同一个class值,这些带有class值的标签会享有同一个属性
- 一个HTML标签可以具有多个class值，这样可以将多个不同的样式或行为应用于同一个标签。
- 多个class值之间使用空格分隔。
- 通过class值，我们可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。
- 类似于面向对象中类的继承，一个class可以继承多个class值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red_color{
color: red;
}
</style>
</head>
<body>
<p class="red_color"> 桃花坞里桃花庵</p>
<div class="red_color">桃花庵下桃花仙</div>
<br>
<span class="red_color">桃花仙人种桃树</span>
</body>
</html>
Ⅴ table 表格标签
【一】table定义和用法
- < table>标签定义了HTML表格
- 一个HTML表格由一个< table>元素和一个或多个< tr>、< th>和< td>元素组成
- table : 声明下面的标签快都是表格标签
- thead : 表头 , 一般在表头中定义字段的时候都建议使用 th 加粗
- tbody : 表体 , 渲染数据的时候一般都是用 td 来声明
- tr : 定义当前内部的标签是一行的数据
- th : 对字体加粗的标签
- td : 普通字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>silence</td>
<td>741</td>
</tr>
</tbody>
</table>
</body>
</html>
【二】table属性说明
- table 属性
- border : 定义当前表格的外边框样式
- cellpadding : 调整内边框与字体之间的距离
- cellspacing : 调整外边框与外边框之间的距离
- td 属性
- colspan : 指定当前单元格水平占几个单元格的位置
- rowspan : 指定当前单元格垂直占几个单元格的位置
【1】table 属性
（1）border 定义当前表格的外边框样式
<table border="1">
（2）cellpadding 调整内边框与字体之间的距离
<table cellpadding="20">
（3）cellspacing 调整内边框与外边框之间的距离
<table cellspacing="50">
【2】td 属性
（1） colspan 指定当前单元格水平占几个单元格的位置
<td colspan="2">silence</td>
（2）rowspan 指定当前单元格垂直占几个单元格的位置
<td rowspan="2">741</td>
【3】完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="20" cellspacing="50">
<thead>
<tr>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td >silence</td>
<td rowspan="2">741</td>
</tr>
<tr>
<td >mark</td>
<td>123</td>
</tr>
</tbody>
</table>
</body>
</html>
Ⅵ form表单
- 能够获取前端用户输入的数据
- 用户输入的，用户选择的，用户上传的
- 基于网络发送给后端
【一】form表单
- 表单（Form）是网页中用于收集用户输入信息的一种方式。
- 通过表单，用户可以输入各种数据
- 例如文本、数字、日期等。在HTML中，使用
【二】表单的组成
action : 比如数据提交的目标地址 http://127.0.0.1:3000
一种选择是不写 ： 在哪个网页上访问到的数据就提交到那个地址
一种选择是写 ： 提交数据的时后提交到指定的地址上
<form action="">
<input type="submit">
</form>
method:提交数据的方式
get 请求 默认的请求方式
post 请求
【1】表单域（Form Fields）
- 用于接收用户输入的数据。
- 常见的表单域包括文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。
【2】提交按钮（Submit Button）
- 用户在填写完表单后，点击提交按钮将表单数据发送到服务器进行处理。
【3】取消按钮（Cancel Button）
- 允许用户取消当前的操作并清空表单内的所有数据。
【4】标签（Labels）
- 描述表单域的作用或意义，增加表单的可读性和易用性。
【5】校验机制（Validation）
默认不写校验机制
- 用于验证用户输入的数据是否符合预期的格式或要求。
- 常见的校验包括必填项（Required Fields）、长度限制（Length Limitation）、数据格式验证（Data Format Validation）等。
【三】表单的提交
- 在HTML中，通过在< form>标签中添加各种不同类型的< input>、< select>、< textarea>等子标签，以及使用< button>标签创建提交和取消按钮，可以构建出丰富多样的表单。
- 表单的提交通常采用HTTP协议，将用户输入的数据发送到服务器进行处理。服务器端可以根据表单的数据进行后续的逻辑处理、存储或数据分析等操作。
- 总结来说，表单是网页中用于收集用户输入信息的重要组件，通过在HTML中定义表单元素和按钮，并使用HTTP协议将数据传输给服务器，可以实现各种场景下的用户交互和数据处理。
【四】表单的语法
<form action=""></form>
- 在form标签内部书写的获取用户的数据都会被form标签提交到后端
【五】表单参数
- action：控制数据提交的后端路径(给哪个服务端提交数据)
- 什么都不写
- 默认就是朝当前页面所在的url提交数据
- 写全路径
- https://www.baidu.com 朝百度服务端提交数据
- 只写路径后缀
- action = '/index/'
- 自动识别出当前服务端的IP和端口拼接到前面
- host:port/index/
- 什么都不写
【六】补充
【1】什么是URL
- 统一资源定位符（Uniform Resource Locator，简称URL）是一种用于描述Internet上信息资源的标识方法，类似于现实世界的地址。它提供了一种方式来访问万维网上的文档和其他资源。
【2】URL的组成
- 协议：指定如何传输数据，如HTTP、HTTPS、FTP等。
- 主机名：指定要访问的服务器的域名或IP地址。
- 端口：如果协议支持端口号，则指定要使用的端口号。
- 路径：指向要访问的资源的路径，通常以斜杠（/）分隔。
- 查询字符串：可以传递给服务器的一些参数，这些参数用问号（?）分隔，每个参数名和值之间用等号（=）分隔。
- 锚点：指定了页面中特定位置的ID。
【3】完整的URL示例
https://www.example.com/path/to/resource?param1=value1¶m2=value2#section1
- https是协议
- www.example.com是主机名
- path/to/resource是路径
- param1=value1¶m2=value2是查询字符串
- #section1是锚点。当浏览器解析这个URL时，它将连接到指定的服务器，向服务器发送请求，并将响应返回给用户。
[4]小结
- URL是互联网的基础，几乎所有的Web应用和服务都会使用URL。
- 理解URL的工作原理对于理解网络通信以及构建Web应用程序都是非常重要的。
Ⅶ input标签
【一】input 标签
【1】介绍
- < input>标签是 HTML 中用于创建表单输入控件的标签之一。
- 它可以用于接受用户的输入，并将这些输入数据提交到服务器进行处理。
【2】参数
- type: 指定输入框的类型，常见的类型
- text：文本输入框，用于接受单行文本。
- password：密码输入框，输入的内容会被隐藏。
- number:只能填数字
- email:只能填邮箱
- data:日期选择输入框
- checkbox：复选框，用户可以选择多个选项。
- radio：单选按钮，用户只能选择其中一个选项。
- file：文件上传框，用于选择上传的文件。
- submit：提交按钮，用于提交表单数据。
- button ：普通按钮 不会自动提交和刷新
- reset：重置按钮，用于重置表单数据。
- name: 指定输入框的名称，向后端传递数据的时候的键
- value: 向后端传递数据的时候的键对应的值 input’框内输入的值
- placeholder: 输入框内默认显示的值
- required: 设置为 true 时，表示输入框必须填写内容才能提交表单。
- readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
- disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
- size: 指定输入框的可见宽度，单位为字符数。
- maxlength: 指定输入框中可以输入的最大字符数。
- autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）
【3】type属性 指定输入框的类型，常见的类型
（1）text：文本输入框，用于接受单行文本
（2）text 纯文本类型，password 秘文类型
（3）checkbox 复选框，用户可以选择多个选项
（4）radio 单选按钮，用户只能选择其中一个选项
（5）file 文件上传框，用于选择上传的文件
（6）submit 提交按钮，用于提交表单数据
（7）button 普通按钮 不会自动提交和刷新
（8）reset 重置按钮，用于重置表单数据
【4】其他属性
- name: 指定输入框的名称，向后端传递数据的时候的键
- value: 向后端传递数据的时候的键对应的值 input’框内输入的值
- placeholder: 输入框内默认显示的值
- required: 设置为 true 时，表示输入框必须填写内容才能提交表单。
- readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
- disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
- size: 指定输入框的可见宽度，单位为字符数。
- maxlength: 指定输入框中可以输入的最大字符数。
- autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）
（1）placeholder 输入框内默认显示的值
（2）disabled 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交
（3）size 指定输入框的可见宽度，单位为字符数
（4）maxlength 指定输入框中可以输入的最大字符数
Ⅷ input标签案例
- form表单提交数据 后续会有介绍
【一】username,password分行处理
<!-- 方式一 ： 用一个p标签 包裹住 input标签 -->
<!-- <p>username : <input type="text" name="username"></p>-->
<!-- <p>password : <input type="password" name="password"></p>-->
<!--方式二 ： label 标签 -->
<!-- <label for="username">-->
<!-- username :-->
<!-- <input type="text" id="username" name="username">-->
<!-- </label>-->
<!-- <label for="password">-->
<!-- password :-->
<!-- <input type="password" id="password" name="password">-->
<!-- </label>-->
【1】label标签
- label
- 第一种：直接将 input框写在label内
<label>用户名:
<input type="text">
</label>
-
- 第二种：通过id链接即可，无需嵌套
<label for="d1">用户名:</label>
<input type="text" id="d1">
- label 和 input 不关联也没有问题
- label 和 input 都是行内标签
【2】text 纯文本类型，password 秘文类型
<p>username:<input type="text" name="username"></p>
<p>password:<input type="text" name="password"></p>
【3】data 选择日期
<p>birthday : <input type="date" name="birthday"></p>
【4】reset 重置按钮，用于重置表单数据
<p>
<input type="reset">
</p>
【5】button 普通按钮 没有效果 不会自动提交和刷新
<p>
<input type="button" value="按钮">
</p>
【6】checkbox 复选框，用户可以选择多个选项
<p>
music <input type="checkbox" name="hobby" value="music">
dance <input type="checkbox" name="hobby" value="dance">
rapper <input type="checkbox" name="hobby" value="rapper">
</p>
- 要加上value来判断你选择提交的是哪个
【7】radio 单选按钮，用户只能选择其中一个选项
<p>
男 <input type="radio" name="gender" value="male">
女 <input type="radio" name="gender" value="female">
</p>
【8】placeholder 输入框内默认显示的值 disabled 表示输入框被禁用，用户无法编辑
<p>username : <input type="text" name="username" placeholder="请输入用户名"></p>
<p>password : <input type="password" name="password" disabled value="123456"></p>
Ⅸ select标签
【一】选择框 - 单选框
<select name="addr" id="">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
【二】选择框 - 多选框 multiple
<select name="fun" id="2" multiple>
<option value="y" >语文 </option>
<option value="s">数学</option>
<option value="en">英语</option>
</select>
【三】默认选项 selected
- 添加 selected参数
<select name="fun" id="2" multiple>
<option value="y" selected>语文 </option>
<option value="s">数学</option>
<option value="en">英语</option>
</select>
【四】二级选项 optgroup
<p>市区：
<select name="" id="3">
<optgroup label="上海">
<option value="1">浦东</option>
<option value="2">黄埔</option>
<option value="3">青浦</option>
</optgroup>
<optgroup label="北京">
<option value="1">朝阳</option>
<option value="2">内三环</option>
<option value="3">外三环</option>
</optgroup>
</select>
</p>
Ⅹ textarea标签（文本域）
<p>
<textarea name="" id="" cols="30" rows="10" maxlength=""></textarea>
</p>
- cols
- 列数
- rows
- 行数
- maxlength
- 限制最多字数
ⅩⅠ 网络请求方式
【一】常见的网络请求方式
【1】GET
- 这是最常见的网络请求方式之一，用于从服务器获取数据。
- 客户端通过在URL后面添加查询字符串来指定需要获取的数据。
- 这种方法通常是无状态的，这意味着每次请求都会重新计算。
【2】POST
- 这种请求方式用于向服务器提交数据。
- 它可以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。
- POST请求通常用于创建新的资源或者更新现有的资源。
【3】PUT
- 这种请求方式用于更新服务器上的现有资源。
- 与POST不同的是，PUT请求通常会覆盖已存在的资源，而不是创建新的资源。
【4】DELETE
- 这种请求方式用于删除服务器上的资源。
【5】HEAD
- 这种请求方式与GET类似，但是只返回响应头，而不返回响应体。
- 这在某些情况下非常有用，比如需要检查文件是否存在或者最后一次修改的时间。
【6】OPTIONS
- 这种请求方式用于获取服务器对某个URI的支持的选项。它可以用来发现可用的HTTP方法或者其他功能。
【二】重点掌握
【1】GET
- 从服务器获取数据。
- 客户端通过在URL后面添加查询字符串来指定需要获取的数据。
【2】POST
- 向服务器提交数据。
- 以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。
ⅩⅡ 验证form表单提交数据
【一】form表单的默认请求方式
- form表单默认提交数据的请求是 GET 请求
- 数据拼接在 url 后面
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
【二】form 表单的注意事项
- method 必须是 post/get ...
- enctype="multipart/form-data" 才能接收到二进制数据
【三】input标签案例前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index/" method="post">
<!-- 方式一 ： 用一个p标签 包裹住 input标签 -->
<!-- <p>username : <input type="text" name="username"></p>-->
<!-- <p>password : <input type="password" name="password"></p>-->
<!--方式二 ： label 标签 -->
<!-- <label for="username">-->
<!-- username :-->
<!-- <input type="text" id="username" name="username">-->
<!-- </label>-->
<!-- <label for="password">-->
<!-- password :-->
<!-- <input type="password" id="password" name="password">-->
<!-- </label>-->
<p>username : <input type="text" name="username" placeholder="请输入用户名"></p>
<p>password : <input type="password" name="password" disabled value="123456"></p>
<p>birthday : <input type="date" name="password"></p>
<p>
music <input type="checkbox" name="hobby" value="1">
swim <input type="checkbox" name="hobby" value="2">
sport <input type="checkbox" name="hobby" value="3">
</p>
<p>
男 <input type="radio" name="gender" value="male">
女 <input type="radio" name="gender" value="female">
</p>
<!-- 单选框 -->
<select name="addr" id="">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
<!-- 多选框 -->
<select name="fun" id="" multiple>
<option value="z">斋藤飞鸟</option>
<option value="c">仓</option>
<option value="b">波</option>
</select>
<!-- 默认值框 -->
<select name="music" id="" multiple>
<option value="青花瓷">青花瓷</option>
<option value="七里香" selected>七里香</option>
</select>
<!-- 二级选项框 -->
<select name="detail_addr" id="">
<optgroup label="上海">
<option value="1">浦东新区</option>
<option value="2">黄浦区</option>
<option value="3">周浦</option>
</optgroup>
<optgroup label="北京">
<option value="1">朝阳</option>
<option value="2">内三环</option>
<option value="3">外三环</option>
</optgroup>
</select>
<!-- 文本域标签 -->
<!-- maxlength 最大字符长度 -->
<!-- cols 列数 -->
<!-- rows 行数 -->
<textarea name="desc" cols="5" rows="6" placeholder="介绍">
</textarea>
<p>
<input type="submit">
</p>
<p>
<input type="reset">
</p>
<p>
<input type="button" value="按钮">
</p>
</form>
</body>
</html>
【四】input标签案例后端代码
pip install Flask
from flask import Flask, request
app = Flask(__name__)
# methods=['GET', 'POST'] : 当前URL 支持 get请求和post请求，不写默认是get请求
@app.route('/index/', methods=['GET', 'POST'])
def index():
# 从 form 表单获取数据
print(f"data :>>> {request.form}")
# 保存传过来的二进制数据
# file_data = request.files.get("file_input")
# print(file_data.name)
# file_data.save(file_data.name)
return 'OK'
app.run()
Ⅹ Ⅲ CSS基础
【一】什么是CSS
- 层级样式表：就是给HTML标签添加样式的，让它变得好看
【二】注释语法
HTML <!---->
css /**/
【三】CSS的语法结构
选择符 {
样式属性: 样式属性值;
样式属性: 样式属性值;
样式属性: 样式属性值, 样式属性值, 样式属性值;
}
- 一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
- 这个时候就可以在css文件中通过注释来辅助辨别与查找
【四】CSS的三种引入方式
【1】style标签内部直接书写
- head内style标签内部直接编写css代码
- 建议在小白学习阶段可以使用 方便查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#h1{
color: red;
}
</style>
</head>
<body>
<h1 id="h1">这是一段文本测试</h1>
</body>
</html>
【2】行内式(一般不用)
- 标签内部通过style属性直接编写
- 第三种也称之为"行内式"是最不推荐使用的一种方式
- 因为它会将HTML和CSS柔和到一起
- 增加了耦合度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#h1{
color: red;
}
</style>
</head>
<body>
<h1 id="h1">这是一段文本测试</h1>
<h2 style="color: navy">起来看唱本</h2>
</body>
</html>
【3】引入外部CSS文件(最正规的方式，解耦合)
- head内link标签引入外部css文件
- 作中一般使用的都是link形式 符合标准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#h1{
color: red;
}
</style>
<link rel="stylesheet" href="111.css">
</head>
<body>
<h1 id="h1">这是一段文本测试</h1>
<h2 style="color: navy">起来看唱本</h2>
<h3 id="h3">吃饭自带碗</h3>
</body>
</html>
Ⅹ Ⅳ CSS基本选择器
【一】概览
- 在CSS中，选择器用于选取HTML文档中的元素。
- 根据选择器的类型和语法的不同，可以选择不同的元素。
- 常用的有id选择器、类选择器、元素/标签选择器和通用选择器。
| 选择符 | 名称 | 版本 | 描述 |
|---|---|---|---|
| * | 通配选择符(Universal Selector) | CSS2 | 所有元素对象。 |
| E | 类型选择符(Type Selector) | CSS1 | 以文档语言对象类型作为选择符。 |
| #myid | id选择符(ID Selector) | CSS1 | 以唯一标识符id属性等于myid的E对象作为选择符。 |
| .myclass | class选择符(Class Selector) | CSS1 | 以class属性包含myclass的E对象作为选择符。 |
【二】介绍
【1】类选择器
- 通过类属性选择指定的标签
- 使用方法就是 . + 类属性值 +
- 通过元素的class属性进行选取。
- 多个元素可以共享一个class，所以class选择器是应用样式的最佳方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color: red;
}
</style>
</head>
<body>
<p class="p1">白日依山尽</p>
</body>
</html>
【2】Id选择器
- 通过ID选择指定的标签
- 使用方法是 # + id属性值 +
- 每个页面中id值是唯一的，所以在css中最好不重复使用id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color: red;
}
#p2{
color: blue;
}
</style>
</head>
<body>
<p class="p1">白日依山尽</p>
<p id="p2">黄河入海流</p>
</body>
</html>
【3】元素/标签选择器
- 通过元素的标签名称进行选取。
- 使用方法是 标签名 + {css属性名:css属性值}
- 比如选择所有的段落、列表等。
- 注意 会对所有相同标签名的标签产生影响
【4】通用选择器
- 不通过上面的所有，选择的时所有标签
- *表示所有的元素。
- 使用方法是 * +
- 注意 会对所有标签产生影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<p>jjjjjjjj</p>
<style>
.p1{
color: red;
}
#p2{
color: blue;
}
span{
color: blueviolet;
}
*{
color: greenyellow;
}
</style>
</head>
<body>
<p class="p1">白日依山尽</p>
<p id="p2">黄河入海流</p>
<span>我欲乘风归去</span>
<p>,hv,</p>
<p>35151</p>
</body>
</html>
- 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1 {
color: red;
}
#p1 {
color: deeppink;
}
span {
color: green;
}
* {
color: chartreuse;
}
</style>
</head>
<body>
<h1>CSS选择器</h1>
<p>
想要给指定的标签添加样式就需要找到这个标签
</p>
<h1>【一】类选择器</h1>
<p>通过类属性选择指定的标签</p>
<p>使用方法就是 . + 类属性值 + {css属性名:css属性值} </p>
<p class="p1">白日依山尽</p>
<h1>【二】ID选择器</h1>
<p>通过ID选择指定的标签</p>
<p>使用方法是 # + id属性值 + {css属性名:css属性值} </p>
<p id="p1">黄河入海流</p>
<h1>【三】标签选择器</h1>
<p>通过标签名选择指定的标签</p>
<p>使用方法是 标签名 + {css属性名:css属性值} </p>
<p>注意 会对所有相同标签名的标签产生影响</p>
<span>欲穷千里目</span>
<h1>【四】通用选择器</h1>
<p>不通过上面的所有，选择的时所有标签</p>
<p>使用方法是 * + {css属性名:css属性值} </p>
<p>注意 会对所有标签产生影响</p>
<script></script>
</body>
</html>
