HTML基础知识总结

最新推荐文章于 2024-06-19 01:21:22 发布

alonghuang

最新推荐文章于 2024-06-19 01:21:22 发布

阅读量3.9k

点赞数 8

分类专栏：前端第二期文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_40046544/article/details/127850330

版权

前端第二期专栏收录该内容

4 篇文章 2 订阅

订阅专栏

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	规定是否应该翻译元素内容

alonghuang

关注

8
点赞
踩
102

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础知识总结

HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
复制链接

扫一扫