文章の目录
正文
HTML 概述
HTML（HyperText MarkUp Language）：超文本标记语言
- 是制作网页的标准语言
- HTML 不区分大小写，但建议小写
- 标记语言是一套标记标签
- HTML 使用标记标签来描述网页
HTML 标签：HTML 标记标签通常被称为 HTML 标签
- 由尖括号包围。
- 通常是成对出现的。
- 标签对中第一个标签是开始标签，第二个标签是结束标签。
-
双标签：由开始标签和结束标签两部分构成，结束标签比开始标签多了一个“/”，必须成对使用。
单标签：在开始标签中进行关闭，即以开始标签的结束而结束。
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
HTML 元素
- HTML 元素指的是从开始标签到结束标签的所有代码。
- 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 属性
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现，比如 name="value"。
- 属性总是在 HTML 元素的开始标签中规定。
HTML 文件结构
.htm 或 .html 文件
HTML 文件结构
<html>
<head>
</head>
<body>
</body>
</html>- 头部：浏览器、搜索引擎所需信息
- 主体：网页中包含的具体内容
HTML5 文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>- <!DOCTYPE html>：文档类型：符合 HTML5 标准。
- lang 属性：英语 language 的缩写，意思是语言："en" 代表英语，"zh-CN" 代表中文。
- <meta>：元数据
- charset属性：字符集编码方式
字符集与编码
字符（Character）：文字、符号，如123 abc 一二三 ! , %@
字符集（Charset）：字符的集合
- 字符集——语言文字
- 比如英文字符集、汉字字符集、日文汉字字符集
编码：将字符和二进制码对应起来
HTML 字符集：
- ASCII：数字、英文字母、符号进行了编码
- GB2312：简体中文
- Unicode：所有语言
- UTF-8：所有语言，占用空间更小
乱码问题
- 源文件保存时的编码
- 源文件声明 <meta charset="编码方式">
不一致，就会出现乱码问题。
HTML 标签
HTML 注释
<!-- This is a comment -->HTML 标题
标题是通过 <h1> - <h6> 等标签进行定义的。
<h1>定义最大的标题（一级标题），<h6>定义最小的标题（六级标题）。
例：
<h1>一级标题</h1>注：
- 浏览器会自动地在标题的前后添加空行（标题独占一行，自动换行）。
- 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素。
HTML 段落
<p>这是一个段落</p>注：
- 浏览器会自动地在段落的前后添加空行（ <p> 是块级元素）。
- 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
- 空格字符：
HTML 文本修饰标签
加粗、斜体、下划线、删除线
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s> <!-- HTML5 不支持 s 标签，请使用 del 标签 -->
<!-- 推荐使用语义化标签取而代之 -->
<strong></strong>
<em></em>
<ins></ins>
<del></del>角标效果
<!-- 上角标 -->
2<sup>10</sup>
<!-- 下角标 -->
H<sub>2</sub>O
HTML 预留格式
<pre>
function() {
console.log("Hello");
}
</pre>定义预格式化的文本。
文本中的空格和换行符都会被保留。
注：
- <pre> 标签的一个常见应用就是用来表示计算机的源代码
HTML 水平线
<hr /><hr /> 标签在 HTML 页面中创建水平线
hr 元素可用于分隔内容
HTML 换行
<br />HTML 缩写
<abbr title="巴黎圣日耳曼" > PSG </abbr>
- <abbr> 标签标记一个缩写
- title 属性定义鼠标悬浮在字体上时的提示文字
HTML 区域
<div></div>HTML 行内组合
<span></span>组合行内元素，以便通过 css 样式来格式化
HTML 图像
<img src="url" alt="替换文本"/>url 属性指存储图像的位置。
alt 属性用来为图像定义一串预备的可替换的文本。当浏览器无法载入图像时，替换文本属性可以告诉读者他们失去的信息。
注：
- title 属性定义鼠标悬浮在图片上时的提示文字。
绝对路径和相对路径
绝对路径：以根目录为基准
相对路径：以该文档所在位置为基准
- "." —— 代表目前所在的目录，可以省略"./"直接引用
- "../" —— 表示源文件所在目录的上一级目录
- 引用下级目录的文件，直接写下级目录文件的路径即可
HTML 超链接
<a href="url">文字或图片</a>href 属性规定链接的目标。
target 属性规定在何处打开链接文档：
- target="_blank" —— 浏览器总在一个新打开、未命名的窗口中载入目标文档
- target="_self" —— 默认。在相同的框架中打开被链接文档
补充：
<!-- 虚拟超链接 -->
<a href="#"></a>
<!-- 锚链接 -->
<a href="#idName"></a>
<!-- 链接到 id = idName 的元素处 -->
<!-- 唤起指定应用 -->
<a href="tel:12345678999">电话</a>
<a href="mailto:sample@163.com">邮箱</a>
<a href="sms:10086">短信</a>
<!-- 在移动设备（手机）上效果更好，此处只列举了三种唤起应用的方法 -->HTML 列表
无序列表
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。
此列表项目使用粗体圆点（典型的小黑圆圈）进行标记。
有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
此列表项目使用数字进行标记。
注：
- 列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
例：
<ul>
<li><a href="#">无序列表内嵌套超链接</a></li>
<li><a href="#">无序列表内嵌套超链接</a></li>
</ul>自定义列表
<dl>
<dt>列表项</dt>
<dd>对列表项的描述</dd>
<dt>列表项</dt>
<dd>对列表项的描述</dd>
</dl>注：
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的描述以 <dd> 开始。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
表格布局
表格的标题
- <caption> 标签定义表格的标题。
- <caption> 标签必须直接放置到 <table> 标签之后。
- 每个表格只能定义一个标题。
表格的头部、主体和尾部
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
<tbody> 标签定义表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
注：
- thead、tfoot 以及 tbody 元素应该结合起来使用。
- 必须在 table 元素内部使用这些标签。
表格的行和单元格
<tr> 标签定义 HTML 表格中的行。
<th> 标签定义表格中的表头单元格。大多数浏览器会把表头显示为粗体居中的文本。
<td> 标签定义表格中的标准单元格
注：
- HTML 表格有两类单元格：
- 表头单元 —— 包含头部信息（由 th 元素创建）
- 标准单元 —— 包含数据（由 td 元素创建）
- tr 元素包含一个或多个 th 或 td 元素
实例：
<!-- 表格的整体标准实现 -->
<table border="1">
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<!-- 表格的简化实现 -->
<table border="1">
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
表格属性
<table> 标签属性
border：规定表格边框的宽度。如果不定义边框属性，表格将不显示边框。
cellpadding：规定单元边沿与其内容之间的空白
cellspacing：规定单元格之间的空白
其他属性
align：<table> 标签的 align 属性规定表格相对于周围元素的对齐方式。<thead>、<tfoot>、<tbody>、<tr>、<th>、<td> 标签的 align 属性规定其中内容的水平对齐方式。
valign：<thead>、<tfoot>、<tbody>、<tr>、<th>、<td> 标签的 valign 属性规定其中内容的垂直对齐方式。
width、height、bgcolor
注：
- 在设置元素样式的时候，请使用 css 样式代替元素的样式属性。
单元格跨行和跨列
<td> rowspan 属性 —— 单元格跨行
语法：
<td rowspan="number"></td>
<!--
number：规定单元格应该横跨的行数
--><td> colspan 属性 —— 单元格跨列
语法：
<td colspan="number"></td>
<!--
number：规定单元格应该横跨的列数
-->HTML 表单
<form action="数据处理网页" method="">表单元素</form>
- 是一个区域，采集用户信息。
- action 属性定义在提交表单时执行的动作。
- method 属性规定在提交表单时所用的 HTTP 方法（ GET 或 POST ）。
HTML 表单元素
文本框、密码框、按钮、单选、复选、下拉列表、文本域等。
文本框、密码框
<!-- 文本框 -->
<input type="text" name="" value="" />
<!-- 密码框 -->
<input type="password" name="" value="" />注：
- value 属性的值为默认文本。
按钮
<!-- 按钮 -->
<!-- 普通按钮，点击时不进行任何操作，可以和 JavaScript 结合使用以实现按钮的触发的功能 -->
<input type="button" value="按钮" />
<!-- 提交按钮 -->
<!-- 点击时会提交表单 -->
<input type="submit" value="提交" />
<!-- 重置按钮 -->
<!-- 点击时会重置表单中的所有元素 -->
<input type="reset" value="重置" />注：
- value 属性的值为按钮上显示的文字。
单选框、复选框
<!-- 单选框 -->
<input type="radio" name="" value="" />
<!-- 复选框 -->
<input type="checkbox" name="" value="" />注：
- checked：当设置 checked（checked="checked"）时，该选项被默认选中。
- value 属性值的内容不会出现在用户界面。value 属性值只在提交表单时向服务端传递数据（处于选中状态的按钮的值才会传递到服务端、未选中按钮是不会传递数据到服务端的）。
- 单选框 name 属性的值需要一致，复选框则不需要。
文件上传
<!-- 定义文件选择字段和“选择文件”（“选择...”）按钮，供文件上传 -->
<input type="file" name="" />隐藏字段
<!-- 定义隐藏字段，隐藏字段对于用户是不可见的，但是其数据会随着表单一起提交。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值 -->
<input type="hidden" name="" value="" />label 标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
注：
- "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
例：
<input type="radio" name="gender" id="male" value="male"/><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"/><label for="female">女</label>下拉列表
- <select> 元素定义下拉列表
- <option> 元素定义待选择的选项
例：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>注：
- 列表通常会把首个选项显示为被选选项。
- 可以通过添加 selected 属性来定义预定义选项（被选择的那一项）。
<optgroup> 标签
- <optgroup> 标签定义选项组。
- <optgroup> 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。
- 必需的属性：label 属性，为选项组规定描述。
例：
籍贯：
<select>
<optgroup label="石家庄市">
<option>裕华区</option>
<option>桥西区</option>
</optgroup>
<optgroup label="邯郸市">
<option>丛台区</option>
<option>邯山区</option>
</optgroup>
</select>表单元素分组
使用 <fieldset> 标签对表单中的相关元素进行分组。
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
例：
<fieldset>
<legend>基本信息</legend>
姓名：<input type="text" />
爱好：<input type="text" />
</fieldset>文本域
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的方法是使用 CSS 的 height 和 width 属性。
选项列表
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
例：
<input list="cars" />
<datalist id="cars">
<option>Pagani</option>
<option>Bentley</option>
<option>Porsche</option>
<option>Bugatti</option>
<option>Lamborghini</option>
</datalist>
<!--
1、datalist 设置 id 属性
2、在关联的 input 输入框 设置 list 属性引用 id 值（不需要 # 号）
-->表单元素属性
1、name 属性：
- name 属性规定 input 元素的名称。
- name 属性用于对提交到服务器的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
2、其他 input 元素属性：
- readonly 属性
- readonly 属性规定输入字段为只读（不能修改）。
- readonly 属性不需要值。它等同于 readonly="readonly"。
- disabled 属性
- disabled 属性规定输入字段是禁用的。
- 被禁用的元素是不可用和不可点击的。
- 被禁用的元素不会被提交。
- disabled 属性不需要值。它等同于 disabled="disabled"。
- maxlength 属性
- maxlength 属性规定输入字段允许的最大长度。
- 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
- 该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
按钮
<button> 标签定义一个按钮。
在 <button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
注：
- 请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
- type 属性值：
- button
- reset
- submit
- type 属性值：
- 如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
内联框架
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
属性：
- src —— 规定在 <iframe> 中显示的文档的 URL。
- name —— 规定 <iframe> 的名称。
注：
- 可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。
- 使用 CSS 为 <iframe>（包括滚动条）定义样式。
页面中嵌入另一个文档
<body>
<div>
<h1>页面头部</h1>
</div>
<div>
<h1>页面主体内容</h1>
<iframe src="main.html">
您的浏览器不支持 iframe。
</iframe>
</div>
<div>
<h1>页面尾部</h1>
</div>
</body>main.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>这里是页面的主体内容。</p>
</body>
</html>效果：
区域中内容的切换
操作步骤：
- 在内联框架 iframe 元素设置 name 属性
- 在相应需要关联的元素 设置 target 属性，引用内联框架的 name 属性值
<body>
<div>
<h4>学生列表：</h4>
<ol>
<li><a href="./zhangsan.html" target="student">张三</a></li>
<li><a href="./lisi.html" target="student">李四</a></li>
<li><a href="./wangwu.html" target="student">王五</a></li>
</ol>
<iframe src="details.html" name="student">
您的浏览器不支持 iframe。
</iframe>
</div>
</body>zhangsan.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>学号：1001</li>
<li>姓名：张三</li>
<li>性别：男</li>
<li>年龄：22</li>
</ul>
</body>
</html>details.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击上方学生列表显示学生详细信息</p>
</body>
</html>效果：
框架集
<frameset> 标签定义一个框架集（HTML5 不支持 <frameset> 标签）。
<frame> 标签定义 <frameset> 中的子窗口（框架）（HTML5 不支持 <frame> 标签）。
<frameset> 元素被用来组织一个或者多个 <frame> 元素。每个 <frame> 有各自独立的文档。
<frameset> 元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。
属性：
- cols —— 规定框架集中列的数目和尺寸
- rows —— 规定框架集中行的数目和尺寸
注：
- <frameset> 标签不能写在 <body> 标签之中，当有 <frameset> 标签时就不能有 <body> 标签。
例：
<frameset cols="25%,*,25%">
<!-- * 表示占用区域的剩余空间 -->
<frame src="./zhangsan.html" >
<frame src="./lisi.html" >
<frame src="./wangwu.html" >
</frameset><frameset> 标签可以嵌套：
<frameset rows="12%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" name="rightframe" />
<!-- 在 left.html 中相应需要关联的元素设置 target 属性，引用 name 属性值（rightframe)，可以实现在右侧区域中内容的切换 -->
</frameset>
</frameset> Web 语义化
让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
优点：
- 结构清晰，利于团队的开发、维护
- 有利于搜索引擎理解
- SEO（Search Engine OPtimization）搜索引擎优化
- 兼容不同设备
HTML 范围内的语义化
<i>斜体，无语义</i>
<em>强调</em>
<b>粗体，无语义</b>
<strong>重点强调</strong>
<u>下划线，无语义</u>
<ins>下划线</ins>
<s>删除线，无语义</s>
<del>删除线</del>以上几组实现效果一样，但是下面是语义化标签，更推荐使用。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
