最近在复习HTML的相关知识，整理了一些知识点，有不足或是错误的地方还请大家多多谅解。
什么是HTML?
定义：
HTML即超文本标记语言，英文全称为Hyper Text Markup Language。
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
扩展：
什么是XML？HTML与XML的区分
XML即可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言，英文全称为Extensible Markup Language。
区分：
HTML可以用来展示数据，XML可以用来存储数据。
HTML有固定标签，如h1标签，body标签等，而XML是没有固定标签的，任何标签都可以。
HTML不区分大小写，XML区分大小写。
HTML不保留空格，XML可以保留空格。
在HTML中不需要结束标记，在XML中结束标记是必需的。
如何创建网页？
推荐大家使用的前端工具
Vscode hbuilder sublime_text
我个人正在使用的是sublime_text，后面的实例都是用的这个。
新建文件 ctrl+s 保存在自己创建的code目录下
使用 ！+Tab 按键 那么就可以自动生成HTML文档模板 如图所示
HTML文档的结构
MIME类型：所有的文件在网络上 用于显示还是用于下载都存在自己响应的类型
例如 gif jpeg 存在自己的MIME类型 用于给文档做一些自己的相关标识
Html的格式 由两个种类的标签构成
- 双标签 <html> </html>
- 单标签 <meta charset=”utf-8”> <br/>换行
Tag -----标签
Meta -----源 metadata 源数据
<html> 元素节点
Lang=“utf-8” 属性节点
<body>文本</body> 文本节点
乱码一般出现原因：字符集不统一
当我们在国内打开的浏览器的默认的编码格式都是GBK 需要把原有的GBK的格式修改成全球统一的格式 ---UTF-8
常用标签
标题标签<hn>
<hn> n = 1-6 表示的是网页或者文章的标题 字体大小从大到小 默认加粗
<hr> 标尺线
<p>行的控制
<div> 区域划分
align 属性节点 3个值 left center right
Body 属性
text 用于表示正文的文本颜色
bgcolor 用于表示背景颜色
background 用于表示文档的背景图像 一般不会使用图片作为页面的背景
相对路径时 ./ 当前路径 ../ 当前路径的父路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body text="blue" bgcolor="#ccc" background=".\image\1.jpg">
<div align="center">
<h1>等你归来-程响</h1>
<hr>
<p>我就在这里等你披星戴月乘着风而来</p>
<p>我就在这里埋好烈酒候你故事开</p>
<p>千千万万人海灯火阑珊你多少次不在</p>
<p>走遍高高低低一路辗转朝暮青丝已白</p>
<p>我在红尘等你 人间等你 守繁华之外</p>
<p>揽尽星辰入怀 千川归来 化一片沧海</p>
<p>我在九幽等你 极乐等你 望彼岸花开</p>
<p>长对三生浮白 不畏不改 渡过去将来</p>
<p>我就在这里等你跨山越海踏着云烟来</p>
<p>我就在这里望尽天涯风雨也不改</p>
<p>安安静静岁月时光荏苒你或许会徘徊</p>
<p>挥别近近远远一身尘埃俯仰皆是无奈</p>
</div>
</body>
</html>
表单
用于收集用户数据
在什么样的场景会使用到表单？
登陆、注册 表格 需要提交的场景 都会用表单
<form></form>
action -----表单提交路径 -----跳转的功能
method -----提交的方式
<input> 输入
Type ----- text password checkbox radio submit reset file 等等
Text ----文本框
Password ----密码框
Checkbox ---多选框
Radio ----单选框
Submit ----提交按钮
Reset ----重置按钮
File -----文件上传
关于表单的使用，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div align="center">
<h1>嘟嘟书城</h1>
<hr>
<form action="1.html" method="get">
<p>请输入您的用户名：<input type="text" name="username" /></p><br>
<p>请输入您的密 码:
<input type="password" name="pwd"/></p>
<p>请输入您的性别:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
请选择您的爱好:
<input type="checkbox" name="hobby" value="吃饭" />吃饭
<input type="checkbox" name="hobby" value="睡觉" />睡觉
<input type="checkbox" name="hobby" value="懒虫"/>懒虫
<input type="checkbox" name="hobby" value="听歌"/>听歌
</p>
<p><input type="submit" value="提交"/></p>
</form>
</div>
</body>
</html>
Method的提交方式来源于HTTP协议
扩展：Get请求和pPost请求
问题1：
表单提交时什么情况下属于Get请求,什么情况下属于Post请求？
Get请求：默认情况下 和 method为get请求时为Get请求
Post请求：method为post 时为Post请求
问题2：
Get请求和Post请求有什么区别？
Post请求提交时路径上没有属性的信息 相对安全
Get 请求提交路径上存在属性的信息 不安全
因为get请求在路径的地址上存在属性值 url的地址是有限制的,最大为64kb
问题3:
什么时候使用get请求 什么时候使用post请求？
要根据数据性质 --- 热数据 安全度不重要的数据 使用get和post都可以
如果数据的性质需要安全性比较高时 那么一定要使用post
在写文件上传的功能时 请求必须是post的提交方式
a标签
<a>标签 超链接 作用页面跳转
html页面跳转：
a标签进行页面跳转 属于get请求方式
form表单get请求
form表单post请求
<a> 标签的使用：
使用a标签进行外部跳转 ----外链接
使用a标签跳转到网页的内部 ----锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body vlink="gold" link="pink" alink="green">
<div> <a name="header"><h1>QQ空间</h1></a></div>
<hr>
<a href="http://www.baidu.com/">百度</a>
<a href="http://www.taobao.com/">淘宝</a><br/>
<p><a href="#R1">第一章</a></p>
<p><a href="#R2">第二章</a></p>
<h2><a name="R1">第一章</a></h2>
月20日晚上的苹果春季发布会，并没有带来造车的消息，而是让M1芯片成为了真正的主角。
搭载了M1芯片的全新版iMac和iPad Pro正式亮相，加上半年前MacBook产品线，基于ARM架构的M1芯片，直接打通了苹果最核心的三大产品线。
性能的提升是毋庸置疑的，根据公开信息，M1采用5nm工艺制程，封装了160亿个晶体管，配备8核中央处理器，相较于目前最新的便携式Windows P月20日晚上的苹果春季发布会，并没有带来造车的消息，而是让M1芯片成为了真正的主角。
搭载了M1芯片的全新版iMac和iPad Pro正式亮相，加上半年前MacBook产品线，基于ARM架构的M1芯片，直接打通了苹果最核心的三大产品线。
性能的
<h2><a name="R2">第二章</a></h2>
月20日晚上的苹果春季发布会，并没有带来造车的消息，而是让M1芯片成为了真正的主角。
搭载了M1芯片的全新版iMac和iPad Pro正式亮相，加上半年前MacBook产品线，基于ARM架构的M1芯片，直接打通了苹果最核心的三大产品线。
性能的月20日晚上的苹果春季发布会，并没有带来造车的消息，而是让M1芯片成为了真正的主角。
性能的
<div class="foot">
底部
<a href="#header">回到顶部 </a>
</div>
</body>
</html>
img标签
用于在页面中引入图片
src -----source 源代码
alt -----
border ----边框 单位像素值
width 宽度 height 高度 像素值 ----百分比
usemap 用于做位图 map ----映射
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./image/1.jpg" alt="动漫" usemap="#first" border="1px">
<map id="first" name="first">
<area
shape="circle"
coords="350,330,50"
href="https://www.baidu.com/">
</area>
</map>
</body>
</html>
表格
<table> 标签表示的是表格
<tr> 表行
<th> 表头 默认加粗
<td> 表元
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影</title>
</head>
<body>
<div>
<h1>热门电影板块</h1>
<hr>
最近热门电影 热门 最新 豆瓣评分
冷门佳片 华语 欧美 日本
<a href="https://www.88kan.com/">更多>></a>
<hr>
<table >
<tr>
<th><img src="./image/2.png" ></th>
<th><img src="./image/3.png" ></th>
<th><img src="./image/2.png" ></th>
<th><img src="./image/3.png" ></th>
</tr>
<tr>
<td align="center">致命ID</td>
<td align="center">万能钥匙</td>
<td align="center">禁闭岛</td>
<td align="center">恐怖游轮</td>
</tr>
<tr>
<th><img src="./image/2.png" ></th>
<th><img src="./image/3.png" ></th>
<th><img src="./image/2.png" ></th>
<th><img src="./image/3.png" ></th>
</tr>
<tr>
<td align="center">致命ID</td>
<td align="center">万能钥匙</td>
<td align="center">禁闭岛</td>
<td align="center">恐怖游轮</td>
</tr>
</table>
</div>
</body>
</html>
列表
无序列表
<ul> 无序列表的标签
<li> 列表的选项
<ol> 有序列表标签
<li> 列表的选项
reversed 降序
start 起始计数
type 数字 字母A-Z 罗马字符I II III IV V VI VII VIII
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol start="3" type="A">
<li>斗破苍穹</li>
<li>斗罗大陆</li>
<li>武动乾坤</li>
<li>一念永恒</li>
</ol>
</body>
</html>
特殊意义的标签
<address> 用于描述地址 默认斜体
<article> 用于描述文章的标题
内联元素 <span> <a>
块状元素 <div> <p>
<span> 内联元素
通常用于修饰文本 默认不具有任何样式 可以通过css来添加样式
这次就先整理这些了，有不准确或是错误的地方，还请大家多多包涵。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
