本文详细介绍了HTML5的基础格式元素，包括标题、段落、换行、注释等，以及表单元素如form、input、label、button等。此外，还提到了框架图形链接列表元素如frame、img、a等和表格块节元信息元素，如table、tr、td等。文中通过实例代码展示了如何使用这些元素，并提供了相关练习和案例。
本篇的主要内容如下：
- HTML5 文档结构元素
- 基础格式元素
- 表单元素
- 框架图形链接列表元素
- 表格块节元信息元素
- 表单 form
- input 元素
- label 与 button 元素
HTML5 文档结构
为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello</title>
</head>
<body>
</body>
</html>
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据和标题
HTML5 常用元素
HTML5 中按功能划分可分为：基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程，具体描述如下所示。由于常用的不多我们将其分为基础格式元素、表单元素、框架图形链接列表元素和表格块节元信息元素。
HTML 的本质是文本文件，操作文本文件的的基本方式是记事本，在实际开发中我们不会使用记事本，而作为开发利器的 idea 或者 HBuilderX 在开发 HTML 方面也是非常出众的。
使用 idea 创建一个企业级 web 应用，并配置浏览器。
web 应用的 HTML 页面一般存放在 web 文件夹下，在下面新建一个 index 的 HTML 文件，进入如下的测试阶段。
基础格式元素
包括基础与格式元素，常用的都已经标注出来了。
<h1>to<h6> 定义HTML标题
<p> 定义段落
<br/> 定义简单的换行
<hr/> 定义水平线
<!--...--> 定义注释
<acronym> 定义只取首字母的缩写
<abbr> 定义缩写
<address> 定义文档作:者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 定义文本的文本方向，使其脱离周围文本的方向设置
<bdo> 定义文字方向
<big> 定义大号文本
<blockquote> 定义长的引用
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<del> 定义被删除文本
<dfn> 定义项目
<em> 定义强调文本
<font> 定义文本的字体、尺寸和颜色
<i> 定义斜体字
<ins> 定义被插入文本
<kbd> 定义键盘文本
<mark> 定义有记号的文本
<meter> 定义预定义范围内的度量
<pre> 定义预格式文本
<progress> 定义任何类型的任务的进度
<q> 定义短的引用
<rp> 定义若浏览器不支持ruby元素显示的内容
<rt> 定义ruby注释的解释
<ruby> 定义ruby注释
<samp> 定义计算机代码样本
<small> 定义小号文本
<strong> 定义强调文本
<sup> 定义上标文本
<sub> 定义下标文本
<time> 定义日期/时间
<tt> 定义打字机文本
<var> 定义文本的变量部分
<wbr> 定义换行
注意：HTML 中 <, >，& 等有特殊含义，(前两个字符用于链接签，& 用于转义)，不能直接使用。使用这三个字符时，应使用它们的转义序列，如下所示：
< 表示 <
> 表示 >
表示空格， 表示中文空格（宽一点）
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<!--<h5>H5</h5>-->
<h6>H6</h6>
<p>
<small>web</small> 应用的 <strong>HTML</strong> 页面一般存放在 web 文件夹下，在下面新建一个 index 的 <i>HTML</i> 文件，进入如下的<q>测试</q>阶段。
</p>
<hr/>
<p>
注意： HTML中<, >，&等有特殊含义，(前两个字符用于链接签，&用于转义)，不能直接使用。使用这三个字符时，应使用它们的
转义序列，如下所示：
</p>
</body>
</html>
练习：根据如下设计图完成编码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础格式元素</title>
</head>
<body>
<h1>大标题</h1>
<h6>小标题</h6>
<p><b>一段话</b>之间可以使用 换行</p>
<p>
<del>删除线</del>
也还<i>不错</i>
</p>
<p>
<small>小</small>号字体写一个数学等式
5<sup>2</sup>=25
<hr/>
H<sub>2</sub>O
</p>
</body>
</html>
表单元素
控制用户输入输出的元素，这里先做基本了解，后面我们会详细学习。
<form> 定义供用户输入的 HTML 表单
<input/> 定义输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 定义input元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义fieldset元素的标题
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的一些类型
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<label>
姓名
<input/>
</label>
<input/>
<textarea></textarea>
<button>提交</button>
<select>
<option>吃饭</option>
<option>睡觉</option>
</select>
</form>
</body>
</html>
练习：根据设计图完成编码
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础格式元素</title>
</head>
<body>
<form>
<label>
姓名
<input/>
</label>
<label>
密码
<input/>
</label>
备注
<textarea></textarea>
爱好
<select>
<option>吃饭</option>
<option>睡觉</option>
<option>打豆豆</option>
</select>
<button>提交</button>
</form>
</body>
</html>
框架图形链接列表元素
常用元素如下：
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<noframes> 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架
<img/> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 定义图形
<figcation> 定义figure元素的标题
<figure> 定义媒体内容的分组，以及它们的标题
<a> 定义超链接
<link> 定义文档与外部资源的关系
<nav> 定义导航链接
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表的项目
<dl> 定义定义列表
<dt> 定义定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义命令的菜单/列表
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目
<command> 定义命令按钮
注意：img 的 src 既可以是项目路径的相对图片路径，也可以是互联网上的图片路径。最好不要使用本地的绝对路径。
案例：
<body>
<iframe src="https://www.baidu.com/" width="600" height="100"></iframe>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
<img src="动画.gif"/>
<a href="hello.html">去百度</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
表格块节元信息元素
常用元素如下：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<div> 定义文档中的块级元素
<span> 定义文档中的行内元素
<header> 定义section或page的页眉
<footer> 定义section或page的页脚
<section> 定义section
<article> 定义文章
<aside> 定义页面内容之外的内容
<detais> 定义元素的细节
<dialog> 定义对话框或窗口
<summary> 为<details>元素定义可见的标题
<head> 定义关于文档的信息
<meta> 定义关于HTML文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
<basefon> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸
注意：要想块级元素 div 居中需要设置宽度和外边距 width: 200px;margin: 0 auto，块元素 div 中可以存放块元素和其他常用元素。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<table>
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>密码</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<div style="width: 200px;margin: 0 auto">
注意：要想块级元素 div 居中需要设置宽度和外边距。
</div>
</body>
</html>
练习：
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架图形链接列表元素</title>
</head>
<body>
<div style="width: 300px;margin: 0 auto">
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>******</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>18</td>
<td>******</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>18</td>
<td>******</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
表单 form
元素用于声明一个包含表单元素的区域，该元素并不会生成可视部分，却允许用户在该区域中添加可输入信息的表单控件元素，如文本域、下拉列表、单选按钮、复选框等。
元素既可以指定 id、style、class 等常用的核心属性，也可以指定 onclick 等事件属性。除此之外还可以指定如下几个属性：
1.action：指定当单击表单内的“确认”按钮时，该表单信息被提交到哪个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，当不填时是当前页面的地址。
2.method：指定提交表单时发送何种类型的请求，该属性值可以为 get 或 post，分别用于发送 GET 或 POST 请求，表单默认以 GET 方式提交请求。GET 请求和 POST 请求区别如下：
- GET 请求：GET 请求把表单数据显式地放在 URL 中，并且对长度和数据值编码有所限制。 GET 请求会将请求的参数名和值转换成字符串，并附加在原 URL 之后，因此可以在地址栏中看到请求参数名和值。GET 请求传送的数据量较小，一般不能大于 2KB。
- POST 请求：POST 请求把表单数据放在 HTTP 请求体中，并且没有长度限制。POST 请求传输的数据量总比 GET 请求传输的数据量大，而且 POST 请求参数以及对应的值放在 HTML 的 HEADER 中传输，用户不能在 URL 中看到请求参数值，安全性相对较高。
3.enctype：可指定表单进行编码时所使用的字符集。其取值如下所示。
- applicatin/x-www-form-urlencoded，默认编码方式，数据被编码为名称和值的形式，在发送到服务器之前，所有字符都会进行编码，其中空格转换为“+"，特殊符号转换为对应的 ASCII HEX 值。
- multipart/form-data：数据被编码为一条消息，页上的每个控件对应消息中的一部分，当表单携带文件时必须使用该格式。
- text/plain：数据以纯文本的形式进行编码，其中不含任何控件或格式字符。其中，空格转换为加号“+”，但不对特殊符号编码。
表单元素必须与其他表单控件元素结合才可以使用。当在 元素定义了一个或多个表单控件元素时， 一旦提交该表单， 该表单的表单控件将会转换成请求参数。关于表单控件转换成请求参数的规则如下：
- 每个含有 name 属性的表单控件对应一个请求参数，没有 name 属性的表单控件不会生成请求参数。
- 如果多个表单控件有相同的 name 属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。
- 表单控件的 value 属性指定请求参数值，placeholder 用来做没内容时的提示语。
- 如果某个表单控件设置了 disabled 或 disabled="disabled" 属性，则该表单控件不再生成请求参数。
- 如果某个表单控件设置了 readonly 或 readonly="readonly" 与 hidden 属性，则该控件的值不可修改，但是会生成请求参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="hello.html" method="post" enctype="multipart/form-data">
<input name="username"/>
<input name="password" value="123456" disabled/>
<input name="age" readonly value="18"/>
<button type="submit">提交</button>
</form>
</body>
</html>
input 元素
input 元素是表单控件元素中功能最丰富的，许多输入元素都可以使用 input 元素生成。 该元素有一个 type 的属性，该属性决定提交的数据类型，一般对应如下：
单行文本框 text
密码输入框 password
单选框 radio
复选框 checkbox
文件上传城 file （增加属性accept="image/png,video/mp4" 接受的文件类型）
按钮 button
提交按钮 submit
重置按钮 reset
案例：
<body>
<form>
<input type="text"/>
<input type="password"/>
<label>男<input type="radio" value="男" name="sex"/></label>
<label>女<input type="radio" value="女" name="sex"/></label>
<input type="checkbox" value="吃饭" name="hobby"/>
<input type="checkbox" value="睡觉" name="hobby"/>
<input type="checkbox" value="打豆豆" name="hobby"/>
<input type="file" accept="image/png"/>
<input type="button" value="普通按钮"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
注意：重置和提交按钮都是针对表单节点里面的所有元素，如果表单 DOM 节点不存在，则该功能无效。
label 与 button 元素
label 元素主要用于绑定输入框，关联输入组件的获取焦点与失去焦点，同时对一般文本框起输入提示作用。使用 for 属性：指定元素的 for 属性值为所关联表单控件 id 的属性值。
<body>
<form method="post" name="UserLogin" action="7-2-S.php">
<p>
<label for="UserName">账号：</label>
<input type="text" id="UserName" />
</p>
<p>
<label for="UserPWD">口令：</label>
<input type="password" id="UserPWD" width="30"/>
<input type="submit" name="Submit" value="提交表单"/>
</p>
</form>
</body>
button 元素
button元素用于定义按钮，在button元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是button按钮和input按钮的不同之处。
button按钮与input type相比，提供了更强大的功能和更丰富的内容。在其开始标签和结束标签之间所有的内容都是该按钮的内容，其中包括任何可接受的正文内容，比如文本或图像等。
需要注意的是，建议不要在button标签之间放置图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为，如果使用图片时，建议使用背景图片的方式。
button元素可以指定 id、style、class 等核心属性，还可以指定 onclick 等事件响应属性。除此之外，还可以指定如下几个属性。
- disabled：指定是否禁用此按钮。该属性值只能是 disabled，或者省略。
- type：指定该按钮属于哪类按钮，该属性值只能是 button、reset 或 submit
案例：
<body>
<button>
<img src="图片1.png"/>
</button>
<button disabled>禁用按钮</button>
<input type="button" value="按钮"/>
</body>
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
