文章目录
HTML 结构
HTML 的基本文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
<!DOCTYPE > 声明必须位于 HTML5 文档中的第一行，用于声明这是HTML5文档。
<html></html>是文档的开始标记和结束的标记。是HTML页面的根元素
<head></head>定义了HTML文档的开头部分，此部分代码不会在页面显示
<meta charset="utf-8"> 定义文档编码
<title></title> 用于设置网页标题
<body></body> 存放页面主体代码
HTML标签组成
我们知道HTML是超文本标记语言，其使用标记标签来描述网页，什么是标记标签呢。
HTML 标签是由尖括号包围的关键词，例如 <html>
注释标签的组成是 <!-- 注释内容 -->
HTML 标签通常是成对出现的，结束标签前需要加上 / 符号。例如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签分类
HTML标签根据组成可以分为单标签和双标签。
'双标签': 有开始标签和结束标签的。例如 <b></b>
'单标签': 有开始标签没有结束标签的。例如<img>
HTML标签根据应用可以分为行级标签、块级标签、行内块标签。
'行级标签': 宽高根据内容自动撑开，不可以设置宽高。此标签一行可以有多个，例如<a></a>
'块级标签': 宽度默认是100%，高度默认自动撑开，可以设置宽高。一行只能有一个标签,例如<div></div>
'行内块标签': 结合的行内和块级的优点，可以修改宽高属性值还可以多个标签存在一行。例如<img>
HTML常见标签
常见标签属性
常见标签都有这么几个共同的属性:
id属性
类似于身份证号，同一个html文件内id值不能重复
class属性
类似于面向对象中类的概念，规定元素的类名
title 属性
title 属性规定关于元素的额外信息。
head内常见标签
'<title>'标签: 描述了文档的标题，在浏览器标题栏显示，也是网页收藏夹中显示的内容。
'<style>'标签: 在此标签内部支持编写css代码
'<link>'标签: 链接外部资源文件，一般用于引入外部css文件
'<script>'标签: 内部支持编写js代码，也可以通过src属性引入外部js文件
'<base>'标签: 作为HTML文档中所有的链接标签的默认链接
meta标签
meta 标签: 通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
meta 标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性有不同的属性值
1.meta http-equiv 属性: 该属性将 content 属性关联到 HTTP 头部。
语法: <meta http-equiv="参数"content="参数变量值">
| http-equiv 主要参数 | 说明 |
|---|---|
| content-Type | 规定文档的字符编码。 |
| 示例： <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”> | |
| refresh | 定义文档自动刷新的时间间隔。 |
| 示例：<meta http-equiv=“refresh” content=“3;https://www.baidu.com/”> # 3秒刷新到指定网址 |
2.meta name 属性: name 属性来定义一个 HTML 文档的描述、关键词、作者
语法: <meta name="参数"content="参数变量值">
| name 主要参数 | 说明 |
|---|---|
| keywords | 搜索引擎查询关键字 |
| 示例：<meta name=“keywords” content=“meta总结,html meta,meta属性,meta跳转”> | |
| description | 用于浏览器展示页面搜索结果的文本描述 |
| 示例：<meta name=“description” content=“HTML”> |
body内基本标签
1. 标题标签
'标题系列':
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2. 字体标签
'字体系列':
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
3. 文本标签
'文本段落':
<p></p>
4. 其他标签
'其他':
<hr> 水平分割线
<br> 换行符
5. 符号标签
| 符号标签 | 说明 |
|---|---|
|   | 空格 |
| > | > 符号 |
| < | < 符号 |
| & | & 符号 |
| ¥ | ￥ 符号 |
| © | 版权符号 |
| ® | 商标符号 |
6. 布局标签
'布局标签':
<div>: <div>元素是块级元素，它可用于组合其他 HTML 元素的容器。常见的用途是文档布局
<span>: <span>元素是内联元素，可用作文本的容器，没有特别的含义
7. 图片标签
'图片标签':
<img> : <img>是单闭合标签，通过其属性在页面上显示图像
| <img> 主要属性 | 属性值 |
|---|---|
| src | 图片路径 |
| title | 鼠标悬浮自动展示提示信息 |
| alt | 当图片无法载入时，自动提示的信息 |
| height | 自定义图片高度 |
| width | 自定义图片宽度 |
8. 链接标签
'链接标签':
<a></a>: 使用超级链接可以和别的网页相连，或者指向本页面某个位置。
语法: <a href="url">链接文本</a>
| <a> 主要属性 | 属性值 |
|---|---|
| href | 跳转的路径 |
| target | 有以下几种跳转方式 |
| _blank：新窗口打开。 | |
| _parent：在父窗口中打开链接。 | |
| _self：默认，当前页面跳转。 | |
| _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。 |
9. 列表标签
| 列表标签 | 标签说明 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 自定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |
列表示例
有序列表模板:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
无序列表模板:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
自定义列表模板:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
10. 表格标签
| 表格标签 | 标签说明 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的列 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
thead、tbody、tfoot默认不会影响表格的布局。可以使用 CSS 来改变表格的外观。
代码示例:
<head>
<meta name="author" content="Hege Refsnes" charset="UTF-8">
<title>标题</title>
<style>
thead {color:green;} /* 修改表格页眉文本颜色 */
tbody {color:blue;} /* 修改表格主体文本颜色 */
tfoot {color:red;} /* 修改表格页脚文本颜色 */
</style>
</head>
<body>
<table border="1"> <!--表格边框-->
<caption>This is a title</caption> <!--表格标题-->
<colgroup> <!--修改表格列-->
<col span="2" style="background-color:gray"><!--修改第一二列背景-->
<col style="background-color:yellow"> <!--修改第三俩列背景-->
</colgroup>
<thead> <!--表格页眉-->
<tr> <!--表格第一行-->
<th>Header 1</th> <!--第一行第一格，th为加粗居中文本-->
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody> <!--表格主体-->
<tr> <!--表格第二行-->
<td>row 1, cell 1</td> <!--第三行第一格，td为普通居左文本-->
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
</tbody>
<tfoot> <!--表格页脚-->
<tr> <!--表格第三行-->
<td>row 2, cell 1</td> <!--第三行第一格-->
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</tfoot>
</table>
</body>
11. 表单标签
<form> 标签用于创建供用户输入的 HTML 表单，表单里可以使用表单标签创建很多表单控件来获取用户数据。
| <form> 标签主要属性 | 说明 |
|---|---|
| accept | action 属性规定当提交表单时，向何处发送表单数据。 |
| method | 规定用于发送表单数据的 HTTP 方法。常用的是 ‘get、post’ |
| target | 规定在何处打开 action URL |
accept 属性
action 属性的路径可以是绝对 URL 或者是相对 URL 指向网站内的一个文件。也可以不写不过不写的话是
朝本页面地址提交。
| <form> 表单中的元素 | 说明 |
|---|---|
| <input> | 标签规定了用户可以在其中输入数据的输入字段。 |
| <textarea> | 标签定义一个多行的文本输入框 |
| <button> | 标签定义一个空按钮，可以自定义按钮属性 |
| <select> | 标签用来创建下拉列表 |
| <option> | 标签定义下拉列表中的一个选项 |
| <optgroup> | 标签使用其label属性将相关的下拉列表选项进行组合 |
| <fieldset> | 标签可以将表单内的相关元素分组 |
| <label> | 鼠标点击 |
input 标签
<input> 元素本身是空的，但是它通过标签属性type可以变成不同的类型。
| <input> 标签主要属性 | 属性值 | 说明 |
|---|---|---|
| type | button | 定义空按钮 |
| checkbox | 定义多选框。添加 checked=“checked” 设置默认选中，或者简写 checked | |
| color | 定义调色板 | |
| date | 定义时间控件(年、月、日) | |
| datetime-local | 定义时间控件(年、月、日、时、分、秒) | |
| month | 定义时间控件(年、月) | |
| time | 定义时间控件(时、分) | |
| 定义输入邮件地址的文本框 | ||
| file | 定义上传文件字段。添加 multiple=“multiple” 设置多个文件上传，或者简写 multiple | |
| hidden | 定义隐藏输入框，可配合其他条件显示 | |
| image | 定义图像作为提交按钮 | |
| number | 定义只能输入数字的字段 | |
| password | 定义密码字段 | |
| radio | 定义单选框。添加 checked=“checked” 设置默认选中，或者简写 checked | |
| range | 定义横向数字拉杆 | |
| reset | 定义重置按钮，重置所有表单值为默认值 | |
| submit | 定义提交按钮 | |
| text | 定义普通文本输入字段 | |
| url | 定义用于输入 URL 的字段 | |
| name | 文本 | 表示 <input> 元素的名称。用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据，没有 name 无法传递值。 |
| alt | 文本 | 只有在 type=“image” 时，定义图片无法载入时，自动提示的信息 |
| checked | checked | 只有在 type=“checkbox” 或者 type=“radio” 时，自动勾选元素 |
| form | 表单 id 值 | 表单外的元素通过 form 属性绑定表单 id ，相当于在表单内 |
| multiple | multiple | 允许用户输入到 <input> 元素的多个值。只适用于email 和 file 类型 |
| size | 数字 | 规定 <input> 元素的长度 |
| value | 文本 | 对于 “button”、“reset”、“submit” 类型表示的是按钮上的文本。 |
| 对于 “text”、“password”、“hidden” 类型表示输入字段的初始值 | ||
| 对于 “checkbox”、“radio”、“image” 类型当提交表单时该值会发送到表单的 action URL。 | ||
| placeholder | 文本 | 可描述输入字段预期值的简短的提示信息 |
select 标签、option 标签、optgroup 标签
<select> 标签用来创建下拉列表，在这个列表中每一个选项都是由 <option> 标签定义。而 optgroup
标签是用于给下拉列表中的选项进行分组。
代码示例
<form>
<select>
<optgroup label="组别 1">
<option>选项 1</option>
<option>选项 2</option>
</optgroup>
<optgroup label="组别 2">
<option>选项 1</option>
<option>选项 2</option>
</optgroup>
</select>
</form>
optgroup 标签中的 label 就是组名。运行结果如下图
textarea 标签
该标签就是用于生成一个多行文本框，如图所示
label 标签
label 标签本身没有效果。如果在 label 元素内点击文本，就会触发此控件此时浏览器就会自动将焦点转到
和标签相关的表单控件上。
| label 标签主要属性 | 属性值 | 说明 |
|---|---|---|
| for | 表单控件 id | for 属性用于绑定表单控件 |
| form | 表单 id | form 属性用于绑定一个或多个表单 |
代码示例（使用方式一）
<form>
<label>男
<input type="radio" name="a">
</label>
<label>女
<input type="radio" name="a">
</label>
</form>
代码示例（使用方式二）
<form>
<label for="man">男</label>
<input type="radio" name="a" id="man">
<label for="woman">女</label>
<input type="radio" name="a" id="woman">
</form>
代码示例（使用方式三）
<label for="man" form="form1">男</label>
<label for="woman" form="form1">女</label>
<form id="from1">
<input type="radio" name="a" id="man">
<input type="radio" name="a" id="woman">
</form>
12. 网络请求方式
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
GET - 一般用于从指定的服务端请求数据。
POST - 一般用于向指定的服务端提交要被处理的数据。
都可以向服务器提交数据，并都可以从服务器获取数据；
日常在地址栏输入url地址使用的是 get 方法。
使用超链接也是 get 方法。
提交表单使用的是 get 方法或 post 方法。
（引自https://www.runoob.com/）
1、Get 一般是用来从服务器上获得数据，而 Post 一般是用来向服务器上传递数据。
2、Get 将表单中数据的按照 variable=value 的形式，添加到'action'所指向的'URL'后面，并且两者
使用'?'连接，而各个变量之间使用'&'连接；Post 是将表单中的数据放在'form'的数据体中，按照变量和
值相对应的方式，传递到 action 所指向 URL。
3、Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器
或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三
方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。而
Post 的所有操作对用户来说都是不可见的。
4、Get 传输的数据量小，这主要是因为受 URL 长度限制；而 Post 可以传输大量的数据，所以在上传文
件只能使用 Post（当然还有一个原因，将在后面的提到）。
5、Get 限制 Form 表单的数据集的值必须为 ASCII 字符；而 Post 支持整个 ISO10646 字符集。
6、Get 是 Form 的默认方法。
使用 Post 传输的数据，可以通过设置编码的方式正确转化中文；而 Get 传输的数据却没有变化。在以后的
程序中，我们一定要注意这一点。
HTML标签嵌套
标签之间可以进行嵌套，例如块级标签可以嵌套任意标签，HTML 文档由相互嵌套的 HTML 元素构成。例如前面示例中的列表表格等等都是有嵌套的。在网页中是由一个个 <div> 进行排列，如下图所示（图片来自网络），然后在每个 <div> 中进行嵌套填充内容。
扫一扫
4061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
