共计 4607 个字符，预计需要花费 12 分钟才能阅读完成。
哎，我服了，明明之前学了 html 的，但时间一长我就忘记了，本来 flask 学到视图了，但涉及到了 html 我觉得还是需要重新回顾一下,,,,,,
web 开发技术栈一共有 3 门语言。分别是：
HTML：译作超文本标记语言，负责通过标签来表达网页的 页面结构。
开发者要遵循结构标准，就需要使用 HTML 来开发网页的内容与结构，需要遵循 HTML 语法。
CSS：译作层叠样式表标记语言，负责通过属性标记来表达网页的 外观效果。
开发者要遵循外观标准，就需要使用 CSS 来设计或修改网页的外观效果，需要遵循 CSS 语法。
javascript: 简称 js，负责通过编程代码来表达网页的 行为特效。
开发者要遵循行为标准，就需要使用 javascript 来编写网页的动态特效以及数据交互能力，需要遵循 javascript ECMA 语法。
HTML 网页的基本结构
-- 表示接下来的内容都是 html 的内容，让浏览器按 html 语法进行解析
-- 整个网页的标签，代表网页的开始
--head 代表网页的头部
我的网页标题
-- 这里是网页的主体，允许用户进行查看
-- 网页的结尾| 标签名 | 类型 | 描述 |
|---|---|---|
|
单标签 | 告诉浏览器接下来所有的内容是 HTML 代码，需要使用 HTML 解析器来识别。 |
|
双标签 | 告诉浏览器，这对 html 标签里面的内容就是网页内容。 |
|
双标签 | 告诉浏览器，这是 html 网页的头部信息，例如：网页标题，编码类型，网页关键字等 …. |
|
双标签 | 告诉浏览器，这是 html 网页的正文内容。 |
|
双标签 | 属于 head 的子标签，告诉浏览器，这是 html 网页的网页标题。 |
|
单标签 | 告诉浏览器，这是一个 utf- 8 编码的网页。 |
语法
HTML 中的语法有 2 种：标签、注释。
注释
不会被用户所看到，但是可以在浏览器中，通过鼠标右键 ->查看网页源代码，让开发人员查看
标签
标签[Tag]，表示 HTML 网页内容的一个最基本的组织单元，类似语文里面的标点符号，标签的作用就是告诉浏览器当前标签中的内容是有什么作用，要以什么格式进行展示的。
标签从书写结构上分 2 种：
- 单标签，格式：
或者。 - 双标签。格式：
标签内容标签名>。
标签从组织结构上分 2 种：内容标签和结构标签。
- 内容标签：主要包含和展示内容的，部分标签可以包含其他的内容标签。
- 结构标签：主要用于包含其他标签，一般结构标签内部不会直接包含网页内容[文本、图片、视频、音频等]。
单标签
只有 1 个标签名的标签，就是单标签。书写格式：
常见的单标签
| 标签名 | 描述 |
|---|---|
|
元信息标签 |
|
css 外观样式的外链引入标签，类似 python 中的 import |
|
图片标签 |
|
输入框标签 |
|
换行标签，浏览器默认是不识别 HTML 源码文件中的换行与空格的，所以需要使用 br 标签告诉浏览器在什么位置需要换行。 |
|
分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。 |
双标签
标签名>
标签名>常见的双标签
| 标签名 | 描述 |
|---|---|
|
网页的一级标题 |
|
网页的二级标题 |
| … | |
|
网页的六级标题 |
|
网页的段落 |
|
网页超链接 |
|
块级结构标签 |
|
行级结构标签 |
|
表单标签，表示网页的一个提供给用户输入数据的表单 |
|
无序列表结构标签，表示网页的一个内容列表 |
|
列表项目标签 |
|
表格标签，表示网页的一个表格 |
常见标签使用
标题和段落
Title
h1 标题: 常用于网站的 logo，网站标题
h2 标题: 常用于网站的板块标题、栏目标题
h3 标题: 常用于网站的板块标题、栏目标题
h4 标题: 常用于网站的附加板块标题，或者文章的标题
h5 标题: 更小级别的标题，基本用不到
h6 标题: 更小级别的标题，基本用不到
p->段落：Hyper Text Markup Language
标签的属性
标签的作用就是用于展示内容，但是内容有时候并非文本，而且文本的展示需要附加一些额外效果时，就需要使用标签的属性来声明。不管是什么标签，都有属性[Attribute]。标签的属性有两种：
-
普通属性：
属性与属性值使用 = 号关联，属性值使用单引号或双引号圈住，建议使用双引号。
-
布尔属性：
只有属性名，没有属性值。当标签里面写上这个属性名，则其值就是 True，标签没有属性名，则为 False
Title_python 学习网页
h1 标题: 常用于网站的 logo，网站标题
h2 标题: 常用于网站的板块标题
h3 标题: 常用于网站的板块标题
h4 标题
h5 标题
h6 标题
p->段落：Hyper Text Markup Language
![]()
换行、分割、超链接
Title_python 学习网页
将进酒
李白
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
译文
你难道没有看见吗？那黄河之水犹如从天上倾泻而来，波涛翻滚直奔大海从来不会再往回流。
你难道没有看见，在高堂上面对明镜，深沉悲叹那一头白发？早晨还是黑发到了傍晚却变得如雪一般。
人生得意之时就要尽情的享受欢乐，不要让金杯无酒空对皎洁的明月
超链接用法
超链接有 2 种常用用法：页面跳转、下载文件。
Title
跳转到百度
跳转到本地页面
点击下载手册
点击下载图片[鼠标右键, 另存为]
实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到的。我们可以通过 F12 -> 打开开发者工具 -> network（网络）或者右键检查找到网络也可以进行查看
列表标签
列表是一种结构标签，可以让网页的内容形成列表格式。
列表标签在 HTML 中提供提供了 4 种：
-
无序列表（UnorderList，ul）就是没有序号的，内容不分先后的列表。
-
有序列表（OrderList，ol）
-
定义列表（DefineList，dl）
-
菜单列表（Menu）
Title
- 列表的第一项
- 列表的第二项
- 列表的第三项
- 列表的第一项
- 列表的第二项
- 列表的第三项
-
第一章：开端
- 第一节：下山
- 第二节：命案
- 第三节：奇遇
-
-
- 赵本山
- 春晚常驻选手，国内一线大品牌
- 乡村爱情故事，二人转，小品
- 小明
- 国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。
几种列表标签中最常用的只有 **ul**，当然也有新版本的 menu 标签。其他的 2 种标签（ol 与 dl），基本不使用。
表单标签
是 HTML 中最终的标签之一，主要是提供了输入框或按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。
form 标签
| 属性 | 描述 |
|---|---|
action |
设置当前表单的表单数据处理应用程序的 url 地址，默认值是当前 url 地址。 |
method |
设置当前表单的 HTTP 提供方式，默认是 get。 get，以 查询字符串 的格式，把表单数据附加在 url 地址栏上提交数据 post，以 数据包 格式，把表单数据附在 HTTP 网络请求体中提交数据 |
enctype |
设置当前表单提交的数据格式，默认值是 application/x-www-form-urlencoded。 |
表单项标签
| 类型 | 用法 | 描述 |
|---|---|---|
单行文本框 |
|
name：设置输入框的值的变量名称，用于服务端接受数据。 value：设置输入框的默认值。 placeholder：设置输入框的提示内容。 |
密码框 |
|
只允许输入单行密码，属性描述同上 |
| 单行文本框（数值框） | |
只允许输入数值内容，属性描述同上。 就版本浏览器中不支持时会被默认为 text 单行文本框。 |
| 单行文本框（日期输入框） | |
只允许输入日期格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为 text 单行文本框。 |
| 单行文本框（时间输入框） | |
只允许输入时间格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为 text 单行文本框。 |
| 单行文本框（日期时间输入框） | |
只允许输入日期时间格式内容，属性描述同上。 低版本浏览器中不支持时，会被默认为 text 单行文本框。 |
文件上传框 |
|
multiple：布尔属性，允许一次性上传多个文件。 其他属性描述同上。 |
单选框 |
|
用于提供一组多个选择让用户选一个选项的按钮组。 多个单选框必须 name 值相同才能为一组。 同一组单选框中的 value 值必填，而且值要唯一。 |
多选框 |
|
用于提供一组多个选择让用户选多个选项的按钮组。 多个多选框必须 name 值相同才能为一组。 同一组多选框中的 value 值必填，而且值要唯一。 |
下拉列表框 |
|
属性描述同上。 |
多行文本框 / 文本域 |
|
cols：设置多行文本框默认列数 [宽度] rows：设置多行文本框默认行数[高度] 注意：多行文本框标签中的任意内容都会被原样记录。 |
提交按钮 |
|
value：表示当前按钮的提示文本。 用于提交表单数据到 action 属性对应的地址中。 |
| 普通按钮 | |
属性描述同上，主要用于配合 js 完成网页特效。 |
普通按钮 |
|
普通按钮，中间可以显示图片或文本。 主要用于配合 js 完成网页特效。 |
| 重置按钮 | |
点击以后，会把当前表单中用户输入的所有内容进行还原到页面刚刷新状态。 |
| 隐藏域输入框 | |
隐藏域输入框的作用是附带一些默认数据提交给服务端，但是不希望用户看到。 |
表单项常用属性
| 属性名 | 描述 |
|---|---|
name |
表示当前表单项的值的变量名，用于提供服务端获取本次提交的数据项。 |
value |
表示当前表单项的值，如果值在代码中提前设置了，则为默认值 |
type |
表示 input 框的类型 |
disabled |
布尔属性，设置当前输入框是否被禁用 |
| maxlength | 设置当前输入框 [textarea，input] 中最大输入内容的长度。 |
multiple |
设置允许文件上传框选择上传多个文件 |
表单
登录表单
百度搜索
注册表单
表格标签
表格系列标签主要是可以数据以表格的格式展示出来。但是现在 table 表格已经很少使用了，而是改成 div+css 实现更漂亮的表格。
| 标签 | 描述 | |
|---|---|---|
|
表示网页的一个表格，内部一般直接嵌套的是 tr 标签。 | |
|
表示表格的一行，内部直接嵌套的只能是 td 或者 th 标签。 | |
|
表示表格的一个单元格，也可以是一列，可以包含其他标签或内容。 | |
|
表示表格的表头的一个单元格，可以包含其他标签或内容。 |
Title
1 行 1 列
1 行 1 列
1 行 2 列
2 行 1 列
2 行 2 列
ID
姓名
年龄
性别
001
小龟龟
13
男
002
小红红
女
003
17 的小男孩
合并单元格
Title
form 标签属性说明
属性
描述
action
设置当前表单的表单数据处理应用程序的 url 地址，默认值是当前 url 地址。
method
设置当前表单的 HTTP 提供方式，默认是 get。
get，以 查询字符串 的格式，把表单数据附加在 url 地址栏上提交数据
post，以 数据包 格式，把表单数据附在 HTTP 网络请求体中提交数据
enctype
设置当前表单提交的数据格式
application/x-www-form-urlencoded：默认值，以普通表达数据格式提交
multipart/form-data：以多种数据格式提交
text/plain：以纯文本数据格式提交
表格嵌套
Title
奥运首页
中国军团
赛程赛果
奖牌榜
诸强
全部赛程
更多 >
- 中国对日本
- 韩国对日本
- 朝鲜对日本
- 俄罗斯对日本
![]()
右
媒体标签
img 图片
audio 音频
video 视频| 标签 | 常见格式 | 描述 |
|---|---|---|
|
png，jpg/jpeg，gif(动态图片格式)，svg，webp，tiff |
图片 |
|
mp3，mpeg，ogg，wma，aac，ogv |
音频 |
|
mp4，mpeg，ogg，ogv，mov，flv， |
视频 |
我的网页标题
![]()
原文地址: [html]网页结构以及常见标签用法
