HTML入门词典

认识HTML

标签格式

HTML全称为“超文本标记语言”，通过标签对文字图像等页面元素设置格式。创建一个新元素的方法为：

开标签(开始)：< ...（标签类型及其他内容） >

元素内容：……

闭标签(结束)：< /... （标签类型，与开始标签相同）>

如使用div标签声明一段文字：

<div> Hello World! </div>

页面结构

一个完整的HTML页面应包含以下内容

HTML语法

熟悉了HTML的声明元素的基本方法及页面结构之后， 就可以学习HTML的各种标签了

文档元数据

元素	含义
<title>	页面标题
<meta>	页面基本信息（给搜索引擎和浏览器看）
<style>	定义css样式
<script>	定义脚本
<link>	链接到外部文件，通常用于链接css及脚本文件
<base>	定义HTML文档中所有的链接标签的默认链接
<noscript>	当脚本文件未被执行时的替代内容

meta标签

属性

charset

指定页面字符集。HTML5文档中仅支持utf-8字符集

http-equiv

content-security-policy 允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击
refresh 指定页面重定向的时间和URL

语法：非负整数;url=

示例：<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />

link标签

属性

href
定义链接的URL

rel
定义所链接资源和当前文档的关系，必须是链接类型值的用空格分隔的列表

常见链接类型值	含义
stylesheet	链接到css样式表
icon	定义文档图标
preload	浏览器应预加载此资源

as
当rel值包含preload时，该属性为必填值。它指定了<link>正在加载的资源类型

值	适用类型
audio	音频文件
image	图像文件
video	视频文件
document	嵌入在<frame>或<iframe>中的HTML文档
object	嵌入在<object>元素中的资源
embed	嵌入在<embed>元素中的资源
style	CSS文件
script	JavaScript文件
worker	JavaScript Web Worker或Shared Worker
track	WebVTT文件
font	字体文件
fetch	通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer、WebAssembly 二进制文件或 JSON 文件
media	指定媒体类型
type	指定资源的MIME类型，预加载资源时浏览器可根据type确定是否支持该资源，若不支持则会忽略他，仅在支持时才会下载

• 当rel值包含font或fetch时，需要设置crossorigin属性

sizes
只有当rel属性值包含icon或apple-touch-icon等非标准类型时才可以存在
－any表示图标可以按矢量格式缩放到任意大小
－<指定宽度>x<指定高度>则显示为指定的大小

fetchpriority
定义预加载资源的优先级

• high 高优先级
• low低优先级
• auto 自动确定

内容分区

大多数内容元素可被分为块元素和行内元素，块元素通常会以新的一行开始，而行内元素通常不会以新的一行开始

块元素

元素	含义
h1~h6	1~6级标题
div	块元素通用元素容器，中间可以为任何内容
span	行内元素通用元素容器，中间可以为任何内容
p	段落
ol\ul	有序\无序列表
dl	包含术语定义及描述的列表，以dt表示一个术语,dd为一条描述
table	表格
iframe	在HTML文档中嵌套其他页面
hr	分割线
figure	可带标题的内容，可包含以<figcaption>元素定义的说明
header	介绍性元素
footer	页脚

内联文本语义

元素	含义
nav	导航链接
a	超链接
q	行内引用
br	换行
b	加粗文本
i	斜体文本
sup\sub	上\下标
code	一段代码
var	数学表达式
time	时间
cite	表示一个作品的引用
abbr	表示缩写
u	下划线
bdo	表示文本渲染方向
data	制定元素对应的数据
kbd	键盘按键

图片与多媒体

元素	含义
img	图片
audio	音频文件
video	视频文件
source	为媒体提供多种资源，用来兼容不同浏览器
track	它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕
map	与area一起使用，定义图片中可点击区域

表单

<form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息

属性	含义
action	表单内容提交到的URL
method	浏览器提交时使用的HTTP方法，可能的值有post发送，get请求，dialog提交时关闭对话框
target	指定响应信息的显示页面，可能的值有_self相同页面，_blank新页面，_parent父级页面(若无则与_self相同)，_top顶级祖先页面

元素

button
创建一个按钮

属性	含义
type	指定类型，可选值有submit(默认值，提交表单到服务器)，reset重置各组件到初始状态，button没有默认行为，可与脚本关联
value	按钮上显示的文字，当表单提交时，它将以参数形式递送到服务器

input
可以创建文本输入框、密码框、单选按钮、复选框等，其类型取决于属性type的值，默认为text

可能的值	含义
text	输入文本
password	密码，其内容会被*遮盖
file	选择文件
range	选择范围的滑动条，使用min和max来规定可接受值的范围
time	选择时间（时分）
week	选择时间（年周）
month	选择时间（年月）
date	选择时间（年月日）
datetime-local	选择时间（年月日时分）

select
创建一个下拉选择列表，在子元素中使用option提供选项，name属性表示提交到服务器的相关数据点的名字，multiple表示列表中的选项是否支持多选，size表示同时可见的行数

​