HTML基础知识总结
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个
·
1、HTML 简介
1.1、什么是 HTML?
HTML 是用来描述网页地一种语言。
- HTML 指的是超文本标记语言（Hyper Text Markup Language）
- HTML 不是一种编程语言，而是一种标记语言（markup language）
- 标记语言是一套标记标签（markup tag）
- HTML 使用标记标签来描述网页
1.2、HTML 标签
HTML 标记标签通常被称为 HTML 标签（HTML tag）。
- HTML 标签是由尖括号包围地关键词，比如
<html> - HTML 标签通常是成对出现地，比如
<body></body> - 标签对中地第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
1.3、HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标题和纯文本
- HTML 文档也被称为网页
Web 浏览器地作用是读取 HTML 文档，并以网页地形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
2、HTML 基础功能标签
| 标签 | 描述 |
|---|---|
<!DOCTYPE> |
定义文档类型 |
<html> |
HTML 根元素，定义 HTML 文档 |
<head> |
定义关于文档的元信息 |
<title> |
定义文档标题 |
<body> |
定义文档主体 |
h1~h6 |
定义 HTML 标题 |
<p> |
定义段落 |
<br |
定义简单的折行 |
hr |
定义水平线 |
<!--...--> |
定义注释 |
2.1、<!DOCTYPE>定义和用法
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 html 标签之前。
<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
在 HTML 4.0.1 中，<!DOCTYPE>声明引用 DTD，因为 HTML 4.0.1 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确的呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML5 中，<!DOCTYPE>声明：
<!DOCTYPE html>
2.1.1、HTML 4.0.1 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性和启用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.1.2、HTML 4.0.1 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.1.3、HTML 4.0.1 Frameset
该 DTD 等同于 HTML 4.0.1 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2.1.4、XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性和启用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
2.1.5、XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包含展示性和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.1.6、XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2.1.7、XHTML 1.1
该 DTD 等用于 XHTML 1.0 Strict，但允许添加模型。
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
基本标签的使用
<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 文档根标签 -->
<html lang="en">
<!-- 文档元信息 -->
<head>
<!-- 文档编码 -->
<meta charset="UTF-8" />
<!-- 文档标题 -->
<title>基础标签使用</title>
</head>
<!-- 文档的主体 -->
<body>
<!-- 一级标题 -->
<h1>古诗歌</h1>
<!-- 定义水平线 -->
<hr />
<!-- 二级标题 -->
<h2>《春晓》</h2>
<!-- 段落 -->
<p>
<!-- 换行符br -->
春眠不觉晓，<br />
处处闻啼鸟。<br />
夜来风雨声，<br />
花落知多少。
</p>
<!-- 定义水平线 -->
<hr />
<!-- 二级标题 -->
<h2>《上李邕》</h2>
<!-- 段落 -->
<p>
<!-- 换行符br -->
大鹏一日同风起，扶摇直上九万里。<br />
假令风歇时下来，犹能簸却沧溟水。<br />
世人见我恒殊调，闻余大言皆冷笑。<br />
宣父犹能畏后生，丈夫未可轻年少。
</p>
</body>
</html>
3、HTML 格式化文本标签
| 标签 | 描述 |
|---|---|
| abbr | 定义缩写 |
| address | 定义文档作者或拥有着的联系信息 |
| b | 定义粗体文本 |
| bdi | 定义文本的文本方向，使其脱离其周围文本的方向设置 |
| bdo | 定义文字方向 |
| blockquote | 定义长的引用 |
| cite | 定义引用 |
| code | 定义计算机代码文本 |
| del | 定义被删除文本 |
| dfn | 定义项目 |
| em | 强调文本 |
| i | 定义斜体文本 |
| ins | 定义被插入文本 |
| kbd | 定义键盘文本 |
| mark | 定义有记号的文本 |
| meter | 定义预定义范围内的度量 |
| pre | 定义预格式文本 |
| progress | 定义任何类型的任务的进度 |
| q | 定义短的引用 |
| rp | 定义若浏览器不支持 ruby 元素显示的内容 |
| rt | 定义 ruby 注释的解释 |
| ruby | 定义 ruby 注释 |
| s | 定义加删除线的文本 |
| samp | 定义计算机代码样本 |
| small | 定义小号文本 |
| strong | 定义语气更为强烈的强调文本 |
| sup | 定义上标文本 |
| sub | 定义下标文本 |
| template | 定义用作容纳页面加载时隐藏内容的容器 |
| time | 定义日期/时间 |
| u | 定义下划线文本 |
| var | 定义文本的变量部分 |
| wbr | 定义可能的换行符 |
文本格式化标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>文本格式化标签</title>
</head>
<body>
<!-- abbr 定义缩写 -->
<abbr title="People's Republic of China">PRC</abbr>
<!-- address 定义文档作者或拥有者的联系信息，块级元素 -->
<address>
<a href="mailto:foo@example.com">foo@example.com</a>
</address>
<!-- b 定义粗体文本 -->
<b>这是粗体文本</b><br />
<!-- bdi 定义文本的文本方向 -->
<bdi dir="rtl">床前明月光，疑是地上霜。</bdi><br />
<!-- bdo 定义文字方向 -->
<bdo dir="rtl">床前明月光，疑是地上霜。</bdo>
<!-- blockquote 定义块引用，块级元素 -->
<blockquote>
This is a long quotation. This is a long quotation. This is a long
quotation. This is a long quotation. This is a long quotation.
</blockquote>
<!-- cite 定义引用，比如书籍或杂志的标题 -->
<p>更多资料请看<cite>维基百科</cite>。</p>
<!-- code 定义计算机代码 -->
<code>alert()</code>的作用是让网页弹出一个提示框。<br />
<!-- del 定义本删除的文本 -->
<del>定义被删除的文本</del>
<!-- dfn 定义术语 -->
<p>通过 TCP/IP 协议连接的全球性计算机网络，叫做 <dfn>Internet</dfn></p>
<!-- em 定义强调文本 -->
<em>定义强调文本</em> <br />
<!-- i 定义斜体 -->
<i>定义斜体</i> <br />
<!-- ins 定义被插入的文本 -->
<ins>定义被插入的文本</ins> <br />
<!-- kbd 定义键盘文本 -->
<kbd>定义键盘文本</kbd>
<!-- mark 定义有标记的文本 -->
<p>我们讨论以后决定，<mark>运行会在下周三举办。</mark></p>
<!-- 定义预定义范围内的度量 -->
<meter value="3" min="0" max="10">十分之三</meter>
<!-- pre 定义预格式文本 -->
<pre>
function add() {
console.log()
}
</pre>
<!-- progress 定义任何类型的任务进度 -->
<progress value="22" max="100"></progress>
<!-- q 定义短的引用 -->
<q>Here is a short quotation here is a short quotation</q><br />
<!-- ruby 定义 ruby 注释（中文注音或字符） -->
<!-- rp 标签在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容 -->
<!-- rt 标签定义字符（中文注音或字符）的解释或发音 -->
<ruby>
汉<rp>(</rp><rt>han</rt><rp>)</rp> 字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
<br />
<!-- s 不被赞成使用的标签 -->
<s>不被赞成使用的标签</s>
<!-- samp 定义计算机代码样本 -->
<p>
如果使用没有定义的变量，浏览器会报错：<samp
>Uncaught ReferenceError: foo is not defined</samp
>。
</p>
<!-- small 定义小号字体 -->
<small>定义小号字体</small><br />
<!-- strong 定义语气更为强烈的强调文本 -->
<strong>定义语气更为强烈的强调文本</strong><br />
<!-- sup 定义上标 -->
定义<sup>上标</sup><br />
<!-- sub 定义下标 -->
定义<sub>下标</sub><br />
<!-- template 定义用作容纳页面加载时隐藏内容的容器 -->
<template> 我被隐藏了 </template>
<!-- time 定义日期/时间 -->
<time datetime="2022-02-14">情人节</time><br />
<!-- u 定义下划线 -->
<u>定义下划线</u><br />
<!-- var 定义变量 -->
<var>var name = '李广';</var>
<!-- wbr 定义可能的换行符 -->
<p>如果想学习 AJAX，那么您必须熟悉 XML<wbr />Http<wbr />Request 对象。</p>
</body>
</html>
4、form 表单和输入标签
| 标签 | 描述 |
|---|---|
| form | 定义供用户输入的 HTML 表单 |
| input | 定义输入控件 |
| textarea | 定义多行的文本输入控件 |
| button | 定义按钮 |
| select | 定义选择列表 |
| optgroup | 定义选择列表中的选项 |
| label | 定义 input 元素的标注 |
| fieldset | 定义围绕表单中元素的边框 |
| legend | 定义 field 元素的标题 |
| datalist | 定义下拉列表 |
| keygen | 定义生成密钥 |
| output | 定义输入的一些类型 |
4.1、form 属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept-charset | charset_list | 规定服务器可处理的表单数据字符集。UTF-8、ISO-8859-1 |
| action | URL | 规定当提交表单时向何处发送表单数据 |
| autocomplete | on、off | 规定是否用表单的自动完成功能 |
| enctype | application/x-www-form-urlencoded（默认；编码所有字符；空格转换为+，特殊符号转为 ASCII 码）、multipart/form-data（不编码；文件上传使用）、text/plain（空格转为+，不对特殊字符编码） |
规定在发送表单数据之前如何对其进行编码 |
| method | get、post | 规定用于发送 form-data 的 HTTP 方法 |
| name | form_name | 规定表单的名称 |
| novalidate | novalidate | 规定，提交表单不进行验证 |
4.1.1、form 表单 rel 属性
| 值 | 描述 |
|---|---|
| alternate | 当前文档的另一种形式，比如翻译 |
| author | 作者链接 |
| bookmark | 用作书签的永久地址 |
| external | 当前文档的外部参考文档 |
| help | 帮助链接 |
| license | 许可证链接 |
| next | 系列文档的下一篇 |
| nofollow | 告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接 |
| noreferrer | 告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的 Referer 字段发送出去，这样可以隐藏点击的来源 |
| noopener | 告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的 window.opener 属性引用原始窗口 |
| prev | 系列文档的上一篇 |
| search | 文档的搜索链接 |
| tag | 文档的标签链接 |
4.1.2、form 表单 target 属性
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开 |
| _self | 默认。在相同的框架中打开 |
| _parent | 在父框架集中打开 |
| _top | 在整个窗口中打开 |
| framename | 在指定框架中打开 |
4.2、表单控件属性
input 基本属性
| 属性 | 值 | 描述 |
|---|---|---|
| autocomplete | on、off | 规定是否使用输入字段的自动完全成功 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点 |
| dirname | inputname.dir | 规定将提交的文本方向 |
| max | number、date | 规定输入字段的最大值 |
| min | number、date | 规定输入字段的最小值 |
| maxlength | number | 规定输入字段中的字符的最大长度 |
| minlength | number | 规定输入字段中所需要的最小字符数 |
| name | field_name | 定义 input 元素的名称 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式 |
| placeholder | text | 规定帮助用户填写输入字段的提示 |
| readonly | readonly | 规定输入字段为只读 |
| required | required | 指示输入字段的值是必须的 |
| size | number_of_char | 定义以提交按钮形式显示的图像的 URL |
| step | number | 规定输入字的合法数字间隔 |
| type | button、checkbox、file、hidden、image、password、radio、reset、submit、text | 规定 input 元素的类型 |
| value | value | 规定 input 元素的值 |
input type="submit"和 type=“image” 按钮类属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、right、top、middle、bottom | 规定图像输入的对其方式 |
| formaction | URL | 覆盖表单的 action 属性（适用于 type=“submit” 和 type=“image”） |
| formenctype | application/x-www-form-urlencoded、multipart/form-data、text/plain | 覆盖表单的 enctype（适用于 type=“submit” 和 type=“image”） |
| formmethod | get、post | 覆盖表单的 method 属性（适用于 type=“submit” 和 type=“image”） |
| formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性，使用该属性，提交表单不进行验证 |
| formtarget | _blank、_self、_parent、_top、framename | 覆盖表单的 target 属性（适用于 type=“submit” 和 type=“image”） |
| height | pixels、% | 定义 input 字段的高度（适用于 type=“image”） |
| width | pixels、% | 定义 input 字段的宽度（适用于 type=“image”） |
| src | URL | 定义以提交按钮形式显示的图像的 URL |
| alt | text | 定义图像输入的替代文本 |
input type=“file” 文件类属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 规定通过文件上传提交的文件的类型 |
| multiple | multiple | 如果使用该属性，则允许一个以上的值 |
input type=“radio” 和 type=“checkbox” 属性
| 属性 | 值 | 描述 |
|---|---|---|
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
input type=“url” 属性
| 属性 | 值 | 描述 |
|---|---|---|
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist |
textarea 属性
| 属性 | 值 | 描述 |
|---|---|---|
| cols | number | 规定文本区内的可见宽度 |
| rows | number | 规定文本区内的可见行数 |
| wrap | hard、soft | 规定当在表单中提交时，文本区域中的文本如何换行 |
form 表单和输入标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单和输入</title>
</head>
<body>
<!-- accept-charset 规定服务器可处理的表单数据字符集 -->
<!-- action 规定当提交表单时向何处发送表单数据 -->
<!-- autocomplete 规定是否用表单的自动完成功能 -->
<!-- enctype 规定在发送表单数据之前如何对其进行编码 -->
<!-- method 规定用于发送 form-data 的 HTTP 方法 -->
<!-- name 规定表单的名称 -->
<!-- novalidate 规定，提交表单不进行验证 -->
<!-- target 规定在何处打开 action URL -->
<form id="myForm" accept-charset="UTF-8" action="http://127.0.0.1:80" autocomplete="on"
enctype="application/x-www-form-urlencoded" method="get" name="myForm" target="_self">
<!-- fieldset 定义围绕表单中元素的边框 -->
<fieldset>
<!-- legend 定义 field 元素的标题 -->
<legend>个人信息</legend>
<!-- type="text" 定义文本输入框 -->
<!-- name 定义 input 元素的名称 -->
<!-- autofocus 规定输入字段在页面加载时是否获得焦点 -->
<!-- autocomplete 规定是否使用输入字段的自动完成功能 -->
<!-- required 指示输入字段的值是必须的 -->
<!-- size 定义输入字段的宽度 -->
<p>
用户名：<input type="text" name="username" autofocus autocomplete="on" size="40" required />
</p>
<!-- type="password" 定义密码字段 -->
<!-- minlength 规定输入字段中所需的最小字符数 -->
<!-- maxlength 规定输入字段中所需的最大字符数 -->
<p>
密码：<input type="password" name="password" minlength="8" maxlength="16" />
</p>
<p>
<!-- placeholder 规定帮助用户填写输入字段的提示 -->
姓名:
<input type="text" name="name" pattern="[a-zA-Z]" placeholder="请输入姓名" />
</p>
<p>
性别：
<!-- type="radio" 定义单选按钮 -->
<!-- checked 规定此 input 元素首次加载时被选中 -->
<!-- for 规定 label 绑定到哪个表单元素 -->
<input id="male" type="radio" name="sex" value="男" checked /><label for="male">男</label>
<input id="female" type="radio" name="sex" value="女" /><label for="female">女</label>
</p>
<p>
年龄：
<!-- type="number" 定义数字输入框 -->
<!-- max 规定输入字段的最大值 -->
<!-- min 规定输入字段的最小值 -->
<!-- step 规定输入字的合法数字间隔 -->
<input type="number" min="10" max="100" step="5" />
</p>
<p>
<!-- type="date" 定义日期 -->
生日：<input type="date" min="1995-10-10" max="2025-10-10" />
</p>
<p>
兴趣：
<!-- type="checkbox" 定义复选框 -->
<label><input type="checkbox" name="interest" value="游泳" />游泳</label>
<label><input type="checkbox" name="interest" value="打球" />打球</label>
<label><input type="checkbox" name="interest" value="爬山" />爬山</label>
</p>
<p>
头像：
<!-- type="file" 定义输入字段和浏览按钮,供文件上传 -->
<!-- accept 规定通过文件上传来提交的文件的类型 -->
<!-- multiple 允许多选 -->
<input type="file" name="file" accept="image/*" multiple />
</p>
<p>
<!-- list 引用包含输入字段的预定义选项的 datalist -->
网站：<input type="url" list="url_list" name="link" />
<!-- datalist 定义下拉列表 -->
<datalist id="url_list">
<option label="W3School" value="http://www.w3schools.com"></option>
<option label="Google" value="http://www.google.com"></option>
<option label="Microsoft" value="http://www.microsoft.com"></option>
</datalist>
</p>
<p>
<!-- readonly 规定输入字段为只读 -->
<!-- value 规定 input 元素的值 -->
只读：<input type="text" readonly value="只读" />
</p>
<p>
<!-- cols 规定文本区内的可见宽度 -->
<!-- rows 规定文本区内的可见行数 -->
<!-- wrap 规定表单提交时，文本如何换行 soft：默认，不换行；hard：换行 -->
备注：<textarea name="remark" cols="30" rows="10" wrap="hard"></textarea>
</p>
<!-- type="hidden" 定义隐藏的输入字段 -->
<input type="hidden" name="country" value="chinese" />
<p>
<!-- type="reset 定义重置按钮" -->
<input type="reset" value="重置" />
<!-- type="submit" 定义提交按钮 -->
<!-- formaction 规定当提交表单时向何处发送表单数据 -->
<!-- formenctype 规定在发送表单数据之前如何对其进行编码 -->
<!-- formmethod 规定用于发送 form-data 的 HTTP 方法 -->
<!-- formnovalidate 规定，提交表单不进行验证 -->
<!-- formtarget 规定在何处打开 action URL -->
<input type="submit" value="提交" formaction="http://127.0.0.1:80" formenctype="application/x-www-form-urlencoded"
formmethod="get" formtarget="_self" />
<!-- type="image" 定义图像形式的提交按钮 -->
<!-- alt 定义图像输入的替代文本 -->
<!-- width 定义 input 字段的宽度 -->
<!-- height 定义 input 字段的高度 -->
<!-- src 定义提交按钮形式显示的图像的 URL -->
<input type="image" width="58px" height="23px" src="submit.gif" alt="submit" />
<!-- type="button" 定义可点击按钮 -->
<!-- disabled 禁用此元素 -->
<input disabled type="button" value="普通按钮" />
</p>
<p>
<!-- type="reset 定义重置按钮" -->
<button type="reset" value="重置">重置</button>
<!-- type="submit" 定义提交按钮 -->
<!-- formaction 规定当提交表单时向何处发送表单数据 -->
<!-- formenctype 规定在发送表单数据之前如何对其进行编码 -->
<!-- formmethod 规定用于发送 form-data 的 HTTP 方法 -->
<!-- formnovalidate 规定，提交表单不进行验证 -->
<!-- formtarget 规定在何处打开 action URL -->
<button type="submit" value="提交" formaction="http://127.0.0.1:80"
formenctype="application/x-www-form-urlencoded" formmethod="get" formtarget="_self">
提交
</button>
<!-- disabled 禁用此元素 -->
<button disabled type="button" value="普通按钮">普通按钮</button>
</p>
<p>
城市：<select name="city">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
<option value="shanghai">上海</option>
</select>
</p>
<p>
汽车：<select name="good">
<optgroup label="大众">
<option value="宝来">宝来</option>
<option value="朗逸">朗逸</option>
<option value="桑塔纳">桑塔纳</option>
</optgroup>
<optgroup label="吉利">
<option value="帝豪">帝豪</option>
<option value="博瑞">博瑞</option>
<option value="博越">博越</option>
</optgroup>
</select>
</p>
</fieldset>
</form>
<!-- form 规定输入字段所属的一个或多个表单 -->
<p>
我属于myForm 表单<input type="text" name="description" form="myForm" />
</p>
</body>
</html>
5、iframe 框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
把文本放置在 iframe 标签内，可以应对无法理解 iframe 的浏览器。
5.1、iframe 基本属性
| 属性 | 值 | 描述 |
|---|---|---|
| name | frame_name | 规定 iframe 的名称 |
| frameborder | 1、0 | 规定是否显示框架周围的边框 |
| width | pixels、% | 定义 iframe 的宽度 |
| height | pixels、% | 定义 iframe 的高度 |
| marginwidth | pixels | 定义 iframe 的左侧和右侧的边距 |
| marginheight | pixels | 定义 iframe 的顶部和底部的边距 |
| longdesc | URL | 规定一个页面，该页面包含了有关 iframe 的较长描述 |
| scrolling | yes、no、auto | 规定是否在 iframe 中显示滚动条 |
| seamless | seamless | 规定iframe看上去像是包含文档的一部分 |
| src | 规定在 iframe 中显示的文档的 URL | |
| srcdoc | HTML_code | 规定在 iframe 中显示的页面的 HTML 内容，覆盖src属性 |
6、图像标签
| 标签 | 描述 |
|---|---|
| img | 定义图像 |
| map | 定义图像映射 |
| area | 定义图像地图内部的区域 |
| canvas | 定义图形 |
| figcaption | 定义figure元素的标题 |
| figure | 定义媒介元素内容的分组，一级它们的标题 |
| svg | 定义 SVG 图形的容器 |
6.1、img 标签
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 规定显示图像的 URL |
| alt | text | 规定图像的替代文本 |
| width | pixels、% | 定义图像的宽度 |
| height | pixels、% | 定义图像的高度 |
| loading | eager、lazy | 规定浏览器是因该立即加载图像还是推迟加载屏幕外图像 |
| ismap | URL | 将图像定义为服务器端图像映射 |
| usemap | URL | 将图像定义为客户端图像的映射 |
图像标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图像</title>
</head>
<body>
<!-- 图像立即加载 -->
<img src="https://www.w3school.com.cn/i/photo/beijing.jpg" alt="北京" style="width:100%">
<!-- 图像懒加载 -->
<img src="https://www.w3school.com.cn/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<!-- 定义可点击图像 -->
<img src="https://www.w3school.com.cn/i/eg_planets.jpg" usemap="#planetmap" alt="planets">
<!-- map 定义一个客户端图像映射。 -->
<map name="planetmap" id="planetmap">
<!-- area 元素定义图像映射中的区域 -->
<area shape="circle" coords="180,139,14" href="javascript:;" target="_blank" alt="venus" />
<area shape="circle" coords="129,161,10" href="javascript:;" target="_blank" alt="mercury" />
<area shape="rect" coords="0,0,110, 260" href="javascript:;" target="_blank" alt="sun" />
</map>
<hr>
<!-- canvas 定义图形 -->
<canvas id="myCanvas"></canvas>
<!-- figure 标签规定独立的流内容（图像、图表、照片、代码等） -->
<figure>
<!-- figcaption 定义 figure元素的标题 -->
<figcaption>黄浦江上的卢浦大桥</figcaption>
<img src="https://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" alt="">
</figure>
<!-- svg 标记定义 svg 图形的容器 -->
<svg width="100" height="100">
<!-- circle 绘制圆 -->
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>
</body>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 80, 100);
</script>
</html>
7、音频/视频标签
| 标签 | 描述 |
|---|---|
| audio | 定义声音内容 |
| source | 定义媒介源 |
| track | 定义用在媒体播放器中的文本轨道 |
| video | 定义视频 |
7.1、audio 音频标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | muted | 规定视频输出应该被静音 |
| preload | auto-当页面加载后载入整个音频、meta-当页面加载后只载入元数据、none-当页面加载后不载入音频 | 如果出现该属性免责音频在页面加载时进行加载，并预备播放 |
| src | url | 要播放的音频的 URL |
7.2、video 视频标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件 |
| width | pixels | 设置视频播放器的宽度 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | muted | 规定视频的音频输出应该被静音 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放安妮前显示的图像 |
| preload | auto-当页面加载后载入整个音频、meta-当页面加载后只载入元数据、none-当页面加载后不载入音频 | 如果出现该属性，则视频在页面加载时进行加载，并预备播放 |
| src | url | 要播放的视频的 URL |
7.3、source 标签
| 属性 | 值 | 描述 |
|---|---|---|
| media | media query | 规定媒体资源的类型 |
| src | url | 固定媒体文件的 URL |
| srcset | url | 规定要在不同情况下使用的图像的 URL |
| type | numeric value | 规定媒体资源的 MIME 类型 |
7.4、track 字幕标签
| 属性 | 值 | 描述 |
|---|---|---|
| default | default | 规定该轨道是默认的，假如没有选择任何轨道 |
| kind | captions | chapters、descriptions、metadata、subtitles |
| label | label | 轨道的标签或标题 |
| src | url | 轨道的 URL |
| srclang | langudage_code | 轨道的语言，若 kind 属性值是 “subtitles”，则该属性必需的 |
音频/视频标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>音频/视频</title>
</head>
<body>
<!-- src 要播放的音频的 URL -->
<!-- preload 当页面加载后不载入音频 -->
<!-- controls 向用户显示控件，比如播放按钮 -->
<!-- loop 音频结束时重新开始播放 -->
<!-- muted 规定被静音 -->
<!-- autoplay 规定自动播放 -->
<audio src="https://www.w3school.com.cn/i/song.ogg" preload="none" controls loop muted autoplay>
Your browser does not support the audio element.
</audio>
<hr>
<audio controls="controls" autoplay="autoplay">
<!-- src 规定媒体文件的 URL -->
<!-- type 规定媒体资源的 MIME 类型 -->
<source src="https://www.w3school.com.cn/i/song.ogg" type="audio/ogg" />
<source src="https://www.w3school.com.cn/i/song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<hr>
<picture>
<!-- media 媒体查询 -->
<!-- srcset 规定要在不同情况下使用的图像的 URL -->
<source media="(min-width:650px)" srcset="https://www.w3school.com.cn/i/photo/flower-4.jpg">
<source media="(min-width:465px)" srcset="https://www.w3school.com.cn/i/photo/tulip.jpg">
<img src="https://www.w3school.com.cn/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>
<hr>
<!-- src 要播放的音频的 URL -->
<!-- width 设置视频播放器的宽度 -->
<!-- height 设置视频播放器的高度 -->
<!-- preload 当页面加载后不载入音频 -->
<!-- controls 向用户显示控件，比如播放按钮 -->
<!-- loop 音频结束时重新开始播放 -->
<!-- muted 规定被静音 -->
<!-- autoplay 规定自动播放 -->
<!-- poster 规定视频下载时显示的图像，火灾用户点击播放按钮前显示的图像 -->
<video src="https://www.w3school.com.cn/i/movie.ogg" width="500px" height="400px" preload="none" controls loop muted
poster="https://www.w3school.com.cn/i/photo/tulip.jpg">
您的浏览器不支持 video 标签。
</video>
<hr>
</body>
</html>
8、链接标签
| 标签 | 描述 |
|---|---|
| a | 定义锚 |
| link | 定义文档与外部资源的关系 |
| nav | 定义导航链接 |
8.1、a 链接标签
| 属性 | 值 | 描述 |
|---|---|---|
| download | filename | 规定被下载的超链接目标 |
| href | URL | 规定链接指向的页面的 URL |
| hreflang | langudage_code | 规定被链接文档的语言 |
| media | media_query | 规定被链接文档是为何种媒介/设备优化的 |
| ping | list_of_URLs | 规定以空格分隔的 URL 列表，当点击链接时，浏览器将发送带有正文 ping 的 post 请求。通常用于跟踪 |
| rel | text | 规定当前文档与被链接文档之间的关系 |
| target | _blank、_parent、_self、_top | 规定在何处打开链接文档 |
| type | MIME type | 规定被链接文档的 MIME 类型 |
链接标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- rel 规定当前文档与被链接文档之间的关系。文档的外部样式表 -->
<!-- type 规定被链接文档的 MIME 类型 -->
<!-- href 规定被链接文档的位置 -->
<link rel="stylesheet" type="text/css" href="theme.css">
<title>链接</title>
</head>
<body>
<!-- nav 标签定义导航链接部分 -->
<nav>
<!-- href 规定链接指向的页面的 URL -->
<!-- download 规定被下载的超链接目标 -->
<!-- hreflang 规定链接文档的语言 -->
<!-- ping 规定以空格分隔的 URL 列表，当点击链接时，浏览器将发送带有正文 ping 的 post 请求 -->
<!-- target 在新页面打开 -->
<!-- type 规定被链接文档的 MIME 类型 -->
<a href="https://www.w3school.com.cn/i/w3school_logo_white.gif" download="w3logo" hreflang="zh"
ping="https://www.w3school.com.cn/trackpings" type="image/*" target="_blank">下载图片</a>
</nav>
</body>
</html>
9、列表标签
| 标签 | 描述 |
|---|---|
| ul | 定义无序列表 |
| ol | 定义有序列表 |
| li | 定义列表中的项目 |
| dl | 定义列表 |
| dt | 定义列表中的项目 |
| dd | 描述列表中的项目 |
列表标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表</title>
</head>
<body>
<!-- ul 定义无序列表 -->
<ul>
<!-- li 定义列表项目 -->
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
<!-- reversed 规定列表顺序为降序 -->
<!-- start 规定有序列表的起始值 -->
<!-- type 规定在列表中使用的标记类型 -->
<ol reversed start="5" type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<!-- dl 定义列表 -->
<dl>
<!-- dt 定义列表中的项目 -->
<dt>计算机</dt>
<!-- dd 定义列表中项目的描述 -->
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
10、table 表格标签
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| caption | 定义表格标题 |
| thead | 定义表格中表头内容 |
| tbody | 定义表格中的主体内容 |
| tfoot | 定义表格中的脚注内容 |
| tr | 定义表格中的行 |
| th | 定义表格中的表头单元格 |
| td | 定义表格中的单元 |
10.1、table 标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| border | pixels | 规定表格边框的宽度 |
| cellpadding | pixels、% | 规定单元边沿与其内容之间的空白 |
| cellspacing | pixels、% | 规定单元格之间的空白 |
| width | pixels、% | 规定表格的宽度 |
| summary | text | 规定表格的摘要 |
| frame | void（不显示）、above（上）、rhs（右）、below（下）、lhs（左）、hsides（上下）vsides（左右）、box（全部）、border（全部） | 规定外侧边框的哪个部分是可见的 |
10.2、tr、thead、tbody、tfoot 标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | right、left、center、justify、char | 定义表格行的内容对齐方式 |
| valign | top（上）、middle（中）、bottom（下）、baseline（基线） | 规定表格行中内容的垂直对齐方式 |
10.3、th\td 标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、right、center、justify | 规定单元格内容的水平对齐方式 |
| colspan | number | 设置单元格可横跨的列数 |
| rowspan | number | 规定单元格可横跨的行数 |
| scope | col、colgroup、row、rowgroup | 定义将表头数据与单元数据相关联的方法 |
| valign | top、middle、bottom、baseline | 规定单元格内容的垂直排列方式 |
表格标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表</title>
</head>
<body>
<!-- table 定义表格 -->
<!-- border 定义表格边框宽度 -->
<!-- width 定义表格宽度 -->
<!-- cellpadding 规定单元边沿与其内容之间的空白 -->
<!-- cellspacing 规定单元格之间的空白 -->
<!-- summary 规定表格的摘要 -->
<!-- frame 规定外侧边框的哪个部分是可见的 -->
<table border="1" width="100%" cellpadding="10" cellspacing="5" style="height: 80vh;" summary="18班成绩单" frame="void">
<!-- 定义表格标题 -->
<caption>18班成绩单</caption>
<!-- thead 定义表格中表头内容 -->
<thead>
<!-- tr 定义表格中的行 -->
<tr>
<!-- th 定义表格中的表头单元格 -->
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<!-- tbody 定义表格中的主体内容 -->
<tbody valign="top">
<!-- valign 规定表格行中内容的垂直对齐方式 -->
<tr valign="middle">
<!-- td 定义表格中的单元 -->
<!-- align 定义表格行的内容对齐方式 -->
<td align="left">黄天霸</td>
<td align="center">15</td>
<!-- rowspan 规定单元格可横跨的行数 -->
<td align="right" rowspan="2">85</td>
</tr>
<tr valign="baseline">
<td>黄飞虎</td>
<td>18</td>
</tr>
<tr>
<td>黄飞虎</td>
<td>19</td>
<td>90</td>
</tr>
<tr valign="bottom">
<td>黄飞虎</td>
<td>20</td>
<td>100</td>
</tr>
</tbody>
<!-- tfoot 定义表格中的脚注内容 -->
<tfoot>
<tr>
<!-- colspan 规定单元格可横跨的列数 -->
<td colspan="2">平均成绩</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
11、样式和语义
| 标签 | 描述 |
|---|---|
| style | 定义文档的样式信息 |
| div | 定义文档中的分区或节，块级元素 |
| span | 定义文档中的节，行内元素 |
| header | 定义 section 或 page 的页眉 |
| footer | 定义 section 或 page 的页脚 |
| main | 定义文档的主要内容 |
| section | 定义文章中的节 |
| article | 定义文章 |
| aside | 定义页面内容之外的内容 |
| details | 定义对话框或窗口 |
| summary | 为 details 元素定义可见的标题 |
| data | 添加给定内容的机器可读翻译 |
样式和语义标签基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>样式和语义标签</title>
<!-- 定义文档的样式信息 -->
<style>
* {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
height: 48px;
line-height: 48px;
background-color: aqua;
text-align: center;
}
nav {
height: 40px;
line-height: 40px;
background-color: beige;
}
ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
main {
flex: 1;
display: flex;
}
article {
flex: 1;
background-color: cornflowerblue;
}
aside {
width: 300px;
padding: 16px;
background-color: aquamarine;
}
footer {
height: 40px;
line-height: 40px;
text-align: center;
background-color: burlywood;
}
</style>
</head>
<body>
<!-- div 定义文档中的节 -->
<div class="container">
<!-- 定义页眉 -->
<header>
<!-- h1 定义标题 -->
<h1>标题一</h1>
</header>
<!-- nav 定义菜单 -->
<nav>
<!-- ul 定义无序列表 -->
<ul>
<!-- data 添加给定内容的机器可读翻译 -->
<li><data value="21051">菜单1</data></li>
<li><data value="21052">菜单2</data></li>
<li><data value="21053">菜单3</data></li>
<li><data value="21054">菜单4</data></li>
<li><data value="21055">菜单5</data></li>
<li><data value="21056">菜单6</data></li>
<li><data value="21057">菜单7</data></li>
<li><data value="21058">菜单8</data></li>
<li><data value="21059">菜单9</data></li>
</ul>
</nav>
<!-- main 定义文档的主要内容 -->
<main>
<!-- article 定义文章 -->
<article>
<!-- section 定义文档中的节 -->
<section></section>
</article>
<!-- aside 定义页面内容之外的内容 -->
<aside>
<h4>Epcot Center</h4>
<span>The Epcot Center is a theme park in Disney World, Florida</span>
</aside>
</main>
<!-- footer 定义页脚 -->
<footer>
<!-- details 描述文档或文档某个部分的细节 -->
<details>
<!-- summary 定义 details 的标题 -->
<summary>COPYRIGHT@测试</summary>
<p>All pages and graphics on this web site are the property of W3School</p>
</details>
</footer>
</div>
</body>
</html>
12、元信息
| 标签 | 描述 |
|---|---|
| head | 定义关于文档的信息 |
| meta | 关于 HTML 文档的元信息 |
| base | 定义页面中所有链接的默认地址或默认目标 |
meta属性
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 规定 HTML 文档的字符编码 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息 |
| http-equiv | content-security-policy（规定文档的内容策略）、content-type（规定文档的字符编码）、default-type（规定要使用的首选样式表）、refresh（定义文档自我刷新的时间间隔） | 把 content 属性关联到 HTTP 头部 |
| name | author（规定文档作者的姓名）、description（规定页面的描述。搜索引擎可以选择此描述来显示搜索结果）、generator（规定用于生成文档的软件包之一）、keywords（规定以逗号分隔的关键字列表）、viewport（控制视口） | 把 content 属性关联到一个名称 |
| scheme | some_text | 定义用于翻译 content 属性值的格式 |
元信息标签基本使用
<!DOCTYPE html>
<html lang="en">
<!-- head 定义关于文档的信息 -->
<head>
<!-- meta 定义关于 HTML 文档的元信息 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- 定义文档和它的关键词 -->
<meta name="description" content="HTML examples">
<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript">
<!-- 定义文档描述，表示创作者 -->
<meta name="author" content="w3school.com,cn">
<!-- 重定向 -->
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">
<!-- title 定义文档的标题 -->
<title>元信息</title>
<!-- base 页面上所有链接规定默认地址 -->
<base href="http://www.w3school.com.cn">
<!-- base 页面上所有链接规定默认目标 -->
<base target="_blank">
</head>
<body>
<!-- a 默认打开 http://www.w3school.com.cn -->
<!-- a 默认在新页面打开 _blank -->
<a href="#">打开默认地址</a>
</body>
</html>
13、编程标签
| 标签 | 描述 |
|---|---|
| script | 定义客户端脚本 |
| noscript | 定义针对不支持客户端脚本的用户的替代内容 |
script 属性
| 属性 | 值 | 描述 |
|---|---|---|
| async | async | 规定异步执行脚本 |
| charset | charset | 规定在外部脚本文件中使用的字符编码 |
| corssorigin | anonymous、use-credentials | 将请求模式设置为 HTTP CORS 请求 |
| defer | defer | 规定是否对脚本执行进行延迟，直到页面加载为止 |
| src | 规定外部脚本文件的 URL | |
| type | MIME-type | 指示脚本的 MIME 类型 |
14、全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键 |
| class | 规定元素的一个或多个类型 |
| contenteditable | 规定元素内容是否可编辑 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示 |
| data-* | 用于存储页面或应用程序的私有定制数据 |
| dir | 规定元素中内容的文本方向 |
| draggable | 规定元素是否可拖动 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接 |
| hidden | 规定元素仍未或不再相关 |
| id | 规定元素的唯一id |
| lang | 规定元素内容的语言 |
| spellcheck | 规定是否对元素进行拼写和语法检查 |
| style | 规定元素的行内 CSS 样式 |
| tabindex | 规定元素的 tab 键次序 |
| title | 规定有关元素的额外信息 |
| translate | 规定是否应该翻译元素内容 |
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
14
0- 0
已为社区贡献2条内容
所有评论(0)