HTML基础

<!DOCTYPE html>     <!-- 1. 文档类型声明 -->
<html>              <!-- 2. html标签 -->
  <head>            <!-- 3. head标签 -->
    ......
  </head>
  <body>            <!-- 4. body标签 -->
    ......
  </body>
</html>

1. 文档类型声明

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，帮助浏览器正确地显示网页。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

声明示例

HTML5

HTML5 不基于 SGML，所以不需要引用 DTD。

<!DOCTYPE html>

HTML 4.01

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. html标签

此元素可告知浏览器其自身是一个 HTML 文档，是所有标签中的一个根节点，<html> 与 </html> 标签限定了文档的开始点和结束点。

<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <div>文档的内容</div>
  </body>
</html>

3. head标签

<head> 标签用于存放 HTML 文档的配置标签（如：网页的标题、描述、关键字等）和引入文件的标签（如：引用脚本、样式表、元信息等），描述了文档的各种属性和信息。

<head> 标签中包含的元素包括：<title>, <link>, <style>, <meta>, <script>, <base> （具体详情见 HTML常用标签/字符 > head中的标签 ）。

提示：请记住始终为网页规定标题 <title></title>。

<head>
  <title>文档的标题</title>
</head>

4. body标签

<body> 元素定义 HTML 文档的主体。

<body> 和 </body> 之间包含文档的所有内容（比如文本段落 <p>、超链接 <a>、图像 <img>、表格 <table>等）。

<body>
  <div>文档的内容</div>
  ... ...
</body>

四、HTML常用标签/字符

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <div> 和 </div>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

提示：以下来自 MDN Web Docs 参考，多数浏览器 / HTML5 不支持的标签/属性未在以下列出

1. head中的标签

元素	描述	常用可选属性
<title>	定义文档的标题 <head> 标签中唯一必须要包含的元素对搜索引擎优化非常重要	--
<link>	定义文档与外部资源的关系，最常见的用途是链接样式表在 HTML 中没有结束标签	href：规定被链接文档的位置 media：规定被链接文档将被显示在什么设备上 sizes：定义 icons 的大小 type：规定被链接文档的 MIME 类型 rel：必需，规定当前文档与被链接文档之间的关系
<style>	定义样式信息	type：规定样式表的 MIME 类型，值为 text/css media：为样式表规定不同的媒介类型
<meta>	提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词在 HTML 中没有结束 </meta> 标签	charset：规定 HTML 文档的字符编码 content：定义与 http-equiv 或 name 属性相关的元信息 http-equiv：把 content 属性关联到 HTTP 头部 name：把 content 属性关联到一个名称
<script>	定义客户端脚本，比如 JavaScript 可以包含脚本语句，也可以通过 src 属性指向外部脚本文件	async：规定异步执行脚本（仅适用于外部脚本） crossorigin：将请求模式设置为 HTTP CORS 请求 defer：规定是否对脚本执行进行延迟，直到页面加载为止 src：规定外部脚本文件的 URL type：指示脚本的 MIME 类型
<base>	为页面上的所有链接规定默认地址或默认目标如果添加了可选属性，这个元素必须在其他任何属性是 URL 的元素之前	href：必须属性，规定页面中所有相对链接的基准 URL target：在何处打开页面中所有的链接

2. 常用块级标签

每个块级元素独占一行
可以设置宽度、高度、行高、内外边距
元素在宽度不设置的情况下，继承父容器的宽度（高度不能继承）

元素	描述	常用可选属性
<h1> - <h6>	标题，<h1>- <h6> 从大到小	--
<p>	段落	--
<ol>	有序列表	reversed：规定列表顺序为降序 start：规定有序列表的起始值 type：规定在列表中使用的标记类型
<ul>	无序列表	--
<li>	列表项目，可用在 <ol> 和 <ul> 中	--
<dl>	描述列表	--
<dt>	描述列表中的项目，用在 <dl> 中	--
<dd>	描述列表元素的子元素，用在 <dl> 中	--
<div>	文档中的分区，内容划分	--
<hr>	创建一条水平线	--
<pre>	预格式化文本，以等宽字体的形式展现出来，文本中的空白符都会显示出来	--
<form>	用户输入创建 HTML 表单用于向服务器传输数据可包含 input、textarea、label 等元素使用	action：规定当提交表单时向何处发送表单数据 enctype：规定在发送表单数据之前如何对其进行编码 method：规定用于发送 form-data 的 HTTP 方法 name：规定表单的名称 novalidate：规定提交表单时不进行验证 rel：规定链接资源和当前文档之间的关系 target：规定在何处打开 action URL
<table>	表格	--
<thead>	表格的表头	--
<tbody>	表格的主体	--
<tfoot>	表格的页脚	--
<th>	表头单元格	colspan：设置单元格可横跨的列数 headers：由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息 rowspan：规定单元格可横跨的行数
<td>	标准单元格	同上 <th> 的属性
<tr>	表格中的行	--

3. 常用行级（内联）标签

能够一行显示多个，与相邻的行内元素排成一行
元素的宽度、高度、内外边距不能直接设置，只能设置水平方向的内外边距
元素的宽度就是其内容的宽度

元素	描述	常用可选属性
<a>	超链接标签，可定义锚	href：规定链接指向的页面的 URL target：规定在何处打开链接文档 download：规定被下载的超链接目标 type：规定被链接文档的的 MIME 类型
<span>	文档中的行内元素	--
<b>	文本字体加粗显示	--
<small>	文本字体缩小显示	--
<label>	标签为input元素定义标注	for：规定 label 绑定到哪个表单元素 form：规定 label 字段所属的一个或多个表单
<i>	文本斜体显示	--
<em>	文本强调文本显示	--
<strong>	文本重要性文本显示	--
<sub>	文本下标	--
<sup>	文本上标	--
<br/>	换行	--

4. 常用行内块（内联块）标签

能够一行显示多个，与相邻的行内元素排成一行
可以设置高度、宽度、行高、内外边距

元素	描述	常用可选属性
<img>	向网页中嵌入图像	src：必须属性，规定显示图像的 URL alt：必须属性，规定图像的替代文本 loading：规定浏览器应该立即加载图像还是推迟加载屏幕外图像 width：设置图像的宽度 height：设置图像的高度
<button>	按钮	disabled：规定应该禁用该按钮 form：规定按钮属于一个或多个表单 name：规定按钮的名称 type：规定按钮的类型 value：规定按钮的初始值
<input>	输入控件	alt：定义图像输入的替代文本 autofocus：规定输入字段在页面加载时是否获得焦点 checked：规定此 input 元素首次加载时应当被选中 disabled：规定禁用此元素 form：规定输入字段所属的一个或多个表单 name：定义 input 元素的名称 placeholder：规定帮助用户填写输入字段的提示 src：定义以提交按钮形式显示的图像的 URL type：规定 input 元素的类型 value：规定 input 元素的值 width：设置图像的宽度 height：设置图像的高度
<textarea>	多行文本输入控件	autofocus：规定输入字段在页面加载时是否获得焦点 disabled：规定禁用该文本区 cols：规定文本区内的可见宽度 rows：规定文本区内的可见行数 form：规定文本区域所属的一个或多个表单 maxlength：规定文本区域的最大字符数 name：规定文本区的名称 placeholder：规定描述文本区域预期值的简短提示
<select>	单选或多选菜单控件	autofocus：规定输入字段在页面加载时是否获得焦点 disabled：规定禁用该文本区 form：规定文本区域所属的一个或多个表单 name：规定文本区的名称 multiple：规定可选择多个选项 size：规定下拉列表中可见选项的数目

5.常用字符

HTML 中对空格、缩进、符号不敏感，此时可以使用下面的替代代码。

特殊字符	描述	字符代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³

6. iframe内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），它能够将另一个 HTML 页面嵌入到当前页面中。

提示：HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素，请在 <iframe> 和 </iframe> 标记之间添加文本，以应对无法理解 iframe 的浏览器。

属性

属性	描述	值
height	规定 iframe 的高度	pixels
width	定义 iframe 的宽度	pixels
name	规定 iframe 的名称	frame_name
referrerpolicy	规定 iframe 的名称	origin/......
frameborder	规定 iframe 的边框	0 / 1
sandbox（H5）	启用一系列对 <iframe> 中内容的额外限制	allow-forms/......
seamless（H5）	规定 <iframe> 看上去像是包含文档的一部分	seamless
src	规定在 iframe 中显示的文档的 URL	URL
srcdoc（H5）	规定在 <iframe> 中显示的页面的 HTML 内容	HTML_code

五、HTML全局属性/事件

1. 常用全局属性

全局属性是可与所有 HTML 标签元素一起使用的属性（包括上面 HTML 和下面 HTML5 新增元素）

属性	描述	值
id	规定元素的唯一 id	--
class	规定元素的一个或多个类名（引用样式表中的类）	--
hidden	规定元素仍未或不再相关	Boolean
lang	规定元素内容的语言	language_code
style	规定元素的行内 CSS 样式	--
title	规定有关元素的额外信息	--
draggable	规定元素是否可拖动	Boolean
dir	规定元素中内容的文本方向	ltr/rtl
contenteditable	规定元素内容是否可编辑	Boolean
tabindex	规定元素的 tab 键次序	--

2. 常用全局事件

HTML 有能力让事件触发浏览器中的动作，以下是可添加到 HTML 标签元素以定义事件操作的全局事件属性（来自 MDN Web Docs 参考，多数浏览器不支持的属性未在以下列出）

Window事件

针对 window 对象触发的事件（应用到<body> 标签）

属性	描述	值
onbeforeunload（H5）	文档卸载之前运行的脚本	script
onerror（H5）	在错误发生时运行的脚本	script
onhaschange（H5）	当文档已改变时运行的脚本	script
onload	页面结束加载之后触发	script
onmessage（H5）	在消息被触发时运行的脚本	script
onpagehide（H5）	当窗口隐藏时运行的脚本	script
onpageshow（H5）	当窗口成为可见时运行的脚本	script
onpopstate（H5）	当窗口历史记录改变时运行的脚本	script
onredo（H5）	当文档执行撤销（redo）时运行的脚本	script
onresize（H5）	当浏览器窗口被调整大小时触发	script
onstorage（H5）	在 Web Storage 区域更新后运行的脚本	script
onundo（H5）	在文档执行 undo 时运行的脚本	script
onunload	一旦页面已下载时触发（或者浏览器窗口已被关闭）	script

Form事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）

属性	描述	值
onblur	元素失去焦点时运行的脚本	script
onchange	在元素值被改变时运行的脚本	script
oncontextmenu（H5）	当上下文菜单被触发时运行的脚本	script
onfocus	当元素获得焦点时运行的脚本	script
oninput（H5）	当元素获得用户输入时运行的脚本	script
oninvalid（H5）	当元素无效时运行的脚本	script
onreset（H5）	当表单中的重置按钮被点击时触发	script
onselect	在元素中文本被选中后触发	script
onsubmit	在提交表单时触发	script

Keyboard事件

属性	描述	值
onkeydown	在用户按下按键时触发	script
onkeypress	在用户敲击按钮时触发	script
onkeyup	当用户释放按键时触发	script

Mouse事件

由鼠标或类似用户动作触发的事件

属性	描述	值
onclick	元素上发生鼠标点击时触发	script
ondblclick	元素上发生鼠标双击时触发	script
onmousedown	当元素上按下鼠标按钮时触发	script
onmousemove	当鼠标指针移动到元素上时触发	script
onmouseout	当鼠标指针移出元素时触发	script
onmouseover	当鼠标指针移动到元素上时触发	script
onmouseup	当在元素上释放鼠标按钮时触发	script
onwheel（H5）	当鼠标滚轮正在被滚动时运行的脚本	script
ondrag（H5）	元素被拖动时运行的脚本	script
ondragend（H5）	在拖动操作末端运行的脚本	script
ondragenter（H5）	当元素元素已被拖动到有效拖放区域时运行的脚本	script
ondragleave（H5）	当元素离开有效拖放目标时运行的脚本	script
ondragover（H5）	当元素在有效拖放目标上正在被拖动时运行的脚本	script
ondragstart（H5）	在拖动操作开端运行的脚本	script
ondrop（H5）	当被拖元素正在被拖放时运行的脚本	script
onscroll（H5）	当元素滚动条被滚动时运行的脚本	script

Media事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）

属性	描述	值
onabort	在退出时运行的脚本	script
oncanplay（H5）	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）	script
oncanplaythrough（H5）	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本	script
ondurationchange（H5）	当媒介长度改变时运行的脚本	script
onemptied（H5）	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）	script
onended（H5）	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）	script
onerror（H5）	当在文件加载期间发生错误时运行的脚本	script
onloadeddata（H5）	当媒介数据已加载时运行的脚本	script
onloadedmetadata（H5）	当元数据（比如分辨率和时长）被加载时运行的脚本	script
onloadstart（H5）	在文件开始加载且未实际加载任何数据前运行的脚本	script
onpause（H5）	当媒介被用户或程序暂停时运行的脚本	script
onplay（H5）	当媒介已就绪可以开始播放时运行的脚本	script
onplaying（H5）	当媒介已开始播放时运行的脚本	script
onprogress（H5）	当浏览器正在获取媒介数据时运行的脚本	script
onratechange（H5）	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）	script
onreadystatechange（H5）	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）	script
onseeked（H5）	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本	script
onseeking（H5）	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本	script
onstalled（H5）	在浏览器不论何种原因未能取回媒介数据时运行的脚本	script
onsuspend（H5）	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本	script
ontimeupdate（H5）	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本	script
onvolumechange（H5）	每当音量改变时（包括将音量设置为静音）时运行的脚本	script
onwaiting	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本	script

六、HTML5新增特性

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

1. 新增常用语义元素

元素	描述	属性
<section>	定义文档中的节，比如章节、页眉、页脚或文档中的其他部分	--
<article>	表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构	--
<nav>	表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接	--
<aside>	表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响，其通常表现为侧边栏或者标注框	--
<footer>	表示最近一个章节内容或者根节点元素的页脚	--
<header>	用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素	--

2. 新增常用输入类型

元素	描述	示例
email	用于输入E-mail地址的文本输入框在提交表单的时候，会自动验证email输入框的值	<input type="email">
url	用于输入url地址这类特殊文本的文本框	<input type="url">
number	用于输入数值的文本框	<input type="number">
range	用于输入包含一定范围内数字值得文本框在网页中显示为滚动条	<input type="range">
date	选取日、月、年	<input type="date">
month	选取月、年	<input type="month">
week	选取周和年	<input type="week">
time	选取时间（小时和分钟）	<input type="time">
datetime-local	选取时间、日、月、年（本地时间），不包括时区	<input type="datetime-local">
search	用于输入搜索关键词的文本框	<input type="search">
tel	用于输入电话号码的文本框	<input type="tel">
color	用于设置颜色的文本框	<input type="color">

3. 多媒体

元素	描述	属性
<video>	嵌入媒体播放器，用于支持文档内的视频播放	autoplay：视频在就绪后马上播放 controls：向用户显示控件，比如播放按钮 loop：当媒介文件完成播放后再次开始播放 muted：规定视频的音频输出应该被静音 poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 preload：视频在页面加载时进行加载，并预备播放 src：要播放的视频的 URL width：设置视频播放器的宽度 height：设置视频播放器的高度
<audio>	用于在文档中嵌入音频内容	autoplay：音频在就绪后马上播放 controls：向用户显示控件，比如播放按钮 loop：当音频结束时重新开始播放 muted：规定音频输出应该被静音 preload：音频在页面加载时进行加载，并预备播放 src：要播放的音频的 URL
<embed>	将外部内容嵌入文档中的指定位置，比如插件	type：定义嵌入内容的类型 src：嵌入内容的 URL width：设置嵌入内容的宽度 height：设置嵌入内容的高度

4. 图形

元素	描述	属性
<canvas>	可被用来通过 JavaScript（Canvas API / WebGL API）绘制图形及图形动画	width：设置 canvas 的宽度 height：设置 canvas 的高度
<SVG>	定义 SVG 图形的容器，提供绘制路径、框、圆、文本和图形图像的方法	--

5. API

API	描述
地理定位	HTML5 Geolocation API 用于获得用户的地理位置鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的
拖放	拖放（Drag 和 Drop）指的是您抓取某物并拖入不同的位置拖放是 HTML5 标准的组成部分：任何元素都是可拖放的
WEB存储	web 应用程序能够在用户浏览器中对数据进行本地的存储，优于 cookies HTML 本地存储提供了两个在客户端存储数据的对象： 1. window.localStorage - 存储没有截止日期的数据，除非手动清除，否则一直存在 2. window.sessionStorage - 针对一个 session 来存储数据（关闭浏览器页面时数据会丢失）提示：在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持
应用缓存	使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本应用程序缓存为应用带来三个优势： 1. 离线浏览 - 用户可在应用离线时使用它们 2. 速度 - 已缓存资源加载得更快 3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
Web Workers	当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成 Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台
SSE	Server-Sent 事件指的是网页自动从服务器获得更新以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达

Potato1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 为后缀结尾的文件，因此也俗称HTML文件。HTML 指的是超文本标记语言HyperTextMarkupLanguage)HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签。
复制链接

扫一扫