这篇博客介绍了HTML5的基础知识，包括HTML网页结构、基础元素如标题、段落、链接和图像，以及HTML元素的颜色值设置、实体字符转义字符和列表。此外，还详细讲解了HTML的表格与表单，特别是各种表单控件的使用，如单选、多选、下拉选框等，并解释了HTTP的GET和POST请求方法。
HTML 简介
HTML 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
元素描述了文档的标题 - 元素包含了可见的页面内容
元素定义一个大标题
元素定义一个段落
**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
HTML 网页结构
下面是一个可视化的HTML页面结构：
HTML 基础
1.标题
HTML 标题（Heading）是通过
-
标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
2.段落
HTML 段落是通过标签
来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3.链接
HTML 链接是通过标签 来定义的。
<a href="https://www.runoob.com">这是一个链接</a>
**提示:**在 href 属性中指定链接的地址。
4.图像
HTML 图像是通过标签 来定义的.
<img src="/images/logo.png" width="258" height="39" />
HTML 元素
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-reN7CFSk-1651999078136)(C:\Users\12299\AppData\Roaming\Typora\typora-user-images\image-20220505192023628.png)]](https://i-blog.csdnimg.cn/blog_migrate/deba82f48de20a9e7085cc03defa05ee.png)
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
1. 颜色值设置
1、直接使用英文的单词
2、使用十六进制 000000~FFFFFF
3、使用函数rgb(十进制,十进制,十进制) 0~255、rgba(十进制,十进制,十进制,十进制) 0~255 0~1
rgb(红,绿,蓝) rgba(红,绿,蓝,rgb(红,绿,蓝,不透明度)
2. 实体字符 转义字符
< <
> >
© ©
空格
3.列表
有序列表 ol
无序列表 ul
列表项 li
<ol>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
</ol>
<ol type="A">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
</ol>
<ol type="a">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
</ol>
<ol type="I">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
</ol>
<ol type="i">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
</ol>
<ol type="1" start="5">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ul>
<li>导航01</li>
<li>导航02</li>
<li>导航03</li>
<li>导航04</li>
<li>导航05</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dd>White cold drink</dd>
</dl>
HTML 表格与表单
1. 表格
//border 表格边框
//align="center" 内容格式居中 左是lift 右是right
//thead 表格的头 页眉
//caption 标题
//tr 表格的行 td 表格单元 th 表格的表头
//cellpadding 表格边框到内容距离 内边距
//cellspacing 表格边框外区域距离 外边距
//colspan 横跨列 rowspan 竖跨行
<table border="1px" align="center">
<thead>
<caption>大标题</caption>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
<th>标题五</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td colspan="2">1-1</td>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
2. 表单
表单用于收集用户的输入信息。
表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkboxe） 等等。
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，同于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。
例如：https://www.lihaozhe.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
两种最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP？
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。
HTTP 的工作方式是客户机与服务器之间的请求-应答协议。
web 浏览器是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
两种 HTTP 请求方法：GET 和 POST
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
GET - 从指定的资源请求数据。
有关 GET 请求的其他一些注释：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST - 向指定的资源提交要被处理的数据
有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
action="服务器接收表单数据的URL" //网址
method="请求方式" //常见的请求方式 get post
input 表单标签
type 表单类型
name 向服务器发送数据 后端接收数据的key
value 向服务器发送数据 后端接收数据的value
id 页面内使用便于DOM操作
<form action="" method="post">
<input type="text" name="account" value="" id="account" placeholder="请输入账号" autocomplete="off">
<input type="password" name="password" value="" id="password">
<input type="submit" value="提交">
</form>
<form action="https://www.baidu.com/s" method="get">
<input type="search" name="wd" id="" value="" placeholder="" autocomplete="off">
<input type="submit" value="千度一下">
</form>
常用表单：
1.1 单选 radio
checked 默认选项
性别：
<label for="male">男</label>
<input type="radio" name="gender" value="1" id="male" checked>
<label for="female">女</label>
<input type="radio" name="gender" value="0" id="female">
1.2 多选 checkbox
checked 默认选项
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SsrXvwyW-1651999078137)(C:\Users\12299\AppData\Roaming\Typora\typora-user-images\image-20220506142913647.png)]](https://i-blog.csdnimg.cn/blog_migrate/6e7c0bc5ff410d4f03f44af75b491a17.png)
爱好：
<label for="swimming">游泳</label>
<input type="checkbox" name="hobby" value="swimming" id="swimming" checked>
<label for="running">跑步</label>
<input type="checkbox" name="hobby" value="running" id="running">
<label for="skiing">滑雪</label>
<input type="checkbox" name="hobby" value="skiing" id="skiing">
1.3 下拉选框 select option
selected 默认选项![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MPNlAud8-1651999078137)(C:\Users\12299\AppData\Roaming\Typora\typora-user-images\image-20220506143224227.png)]](https://i-blog.csdnimg.cn/blog_migrate/11ad03099f764ab9a63fb89503dbd381.png)
籍贯：
<select name="hometown" id="hometown">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="jilin" selected>吉林</option>
</select>
1.4 无需下拉 直接显示的下拉选框 multiple
水果：
<select name="fruits" id="fruits" multiple>
<option value="banana">香蕉</option>
<option value="apple">苹果</option>
<option value="pear" selected>梨</option>
</select>
1.5 多行的文本输入 textarea（多用于用户评论）
cols 一行最多字数
rows 最多行数
<textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
1.6 数字表单 number
<input type="number" name="age" id="age">
1.7 日期表单 time
<input type="time" name="time" id="time">
1.8 周表单 week
<input type="week" name="week" id="week">
1.9 日期表单 date
<input type="date" name="date" id="date">
1.10 日期加时间表单 datetime-local
<input type="datetime-local" name="datetime-local" id="datetime-local">
1.11 网址 电话 邮箱 文件 URL tel email file
<input type="url" name="url" id="url">
<input type="tel" name="tel" id="tel">
<input type="email" name="email" id="email">
<input type="file" name="file" id="file">
1.12 预定义控件 list datalist
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
1.13 范围控件 range
0<input type="range" id="a" value="50">100
1.14 输出信息 output
0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
