HTML部分标签及其介绍
介绍
- web（World Wide Web）是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
- 超文本：是计算机处理文本信息的方法，不同空间的电子文档通过超链接组织起来成为一个“网”，这个文档“网”称为“超级文本”，简称“超文本”。
- HTTP：全称Hyper Text Transfer Protocol（超文本传输协议）。经过多年的发展，现在HTTP能够传输图片等多媒体文件，是Web世界的中流砥柱，应用非常广泛
引用
HTML标签-作者：云飞扬°
HTML全部标签简介——作者：hasp_Jason
HTML标签概述
- 打开安装好的代码编辑器：VSCode
- 编辑一段文本，选择一个你喜欢的位置保存文件，后缀名为 .html。（有个小提示，Windows默认不查看文件后缀，你可以在“查看”->“文件拓展名” 开启）
- 找到你保存的文件，用浏览器打开。
- HTML是如何工作的呢
对于浏览器：
1.浏览器读取你的网页
2.浏览器读取到第一行 - 总结
HTML是用 内容 + 标签 组成的一个文档（或者叫文件）
HTML是简单的文本标签语言，一个HTML网页文件都是有元素构成的，元素由开始标签、结束标签、属性和元素的内容4部分构成。在学习和使用HTML时要注意区分标签和元素这两个定义。
属性的使用格式如下：
<元素 属性=“值”>内容</元素>
引号可以是单引号或者双引号。
基本标签：
<!DOCTYPE>定义文档类型。
<html></html>定义HIML文档。
<title></title>定义文档的标题
<body>定义文档的主体。
<h1> </h1>定义HTML标题的等级，1-6。
<p></p>定义段落。
<br/>换行
<hr/>定义水平分割线。
<!--...-->定义注释（不会被执行，类似编程语言里的//或/* */）
常用格式标签：
<b></b>：加粗文本
<strong></strong>：加粗（推荐）
<i></i>：斜体
<em></em>：斜体（推荐）
<u></u>：带下划线
<s></s>：带删除线
<del></del>：带删除线（推荐）
<font></font>：常用属性 color(颜色),size(大小，取值范围1-7),face(字体类型)如：`<font color="red" size="4" face="仿宋">我要回家</font>`（默认size为4）
<img />：常用属性 src:指定图片路径 width:指定图片的宽度 height:指定图片高度 alt:文件加载失败时的提示信。 如：`<img src="../img/2.jpg" width="400px" height="200px" alt="文件加载失败" />` 。图片路径问题：./代表的是当前路径 . . /代表的是上一级路径 ../代表的是上上级路径
表单标签：
什么是表单？表单就是收集用户填写的信息并将其提交到后台服务器。在实际布局的时候和后台动态功能程序的开发是相对接的，一个网页布局的好与坏在这一块尤其重要 。
<form>定义供用户输入的HTML表单
<input>定义输入控件
<textarea>定义多行的文本输入控件，
<button>定义按钮
<select>定义选择列表（下拉列表）
<optgroup>定义选择列表中相关选项的组合
<option>定义选择列表中的选项，
<label>定义 input元素的标注，
<fieldset>定义围绕表单中元素的边框
<legend>定义 fieldset元素的标题，
<datalist>定义下拉列表，
<keygen>定义生成密钥，
<output>定义输出的一些类型
列表标签
网页的列表标签分为
-
有序列表和
-
无序列表两大类，其中的
<menu>和<menuitem>是HTML5的新标签，可以配对使用用来定义菜单/列表 。
-
无序列表两大类，其中的
<ul>定义无序列表
<ol>定义有序列表。
<li>定义列表的项目。
<dir>不赞成使用。定义目录列表。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<dd>定义定义列表中项目的描述。
<menu>定义命令的菜单/列表。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项
<command>定义命令按钮。
- 列表与表单的具体介绍参见：列表与表单-
应用标签：
主要有img、map、area、canvas、figcation、figure这6个，其中的canvas、figcation、figure三个是HTML5的新标签 。
<img>定义图像。
<map>定义图像映射。
<area>定义图像地图内部的区域
<canvas>定义图形
<figcaption>定义 figure元素的标题。
<figure>定义媒介内容的分组，以及它们的标题
视频标签
视频和音频可以通过HTML5标签和来访问资源。而且HTML5视频和音频标签基本将他们视为图片：。其它参数例如宽度和高度或者自动播放，需要像其它HTML标签一样定义。
<audio>定义声音内容。
<source>定义媒介源。
<track>定义用在媒体播放器中的文本轨道。
<video>定义视频。
创建链接/关系标签
一般通过使用<a>标签在HTML中创建链接（使用href来定义路径，区别于img用src 来定义路径）。<link> 标签定义两个连接文档之间的关系。<nav>标签定义导航链接的部分，<nav>标签是HTML5中的新标签。
<a>定义锚
<link>定义文档与外部资源的关系。
<nav>定义导航链接。
表格标签
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格
<tr>定义表格中的行。
<td>定义表格中的单元
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容（脚注）
<col>定义表格中一个或多个列的属性值
< colgroup>定义表格中供格式化的列组。
样式/节标签
样式/节标签是网页布局最经常使用到的基础标签，其中
<style>定义文档的样式信息
<div>定义文档中的节。
<span>定义文档中的节
<header>定义 section或page的页眉
<footer>定义 section或page的页脚。
<section>定义 section
<article>定义文章
<aside>定义页面内容之外的内容。
<details>定义元素的细节
<dialog>定义对话框或窗口。
<summary>为< details>元素定义可见的标题
元信息标签
<head>定义关于文档的信息。
<meta>定义关于HTML文档的元信息
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
编程标签
编程标签是指HTML5页面中嵌入第三方的其他编程程序，如嵌入JavaScript，就使用<script>标签进行嵌入应用，<embed>为外部程序定义容器。
<script>定义客户端脚本。
<noscipt>定义针对不支持客户端脚本的用户的替代内容。
<applet>不赞成使用。定义嵌入的 applet.
<embed>为外部应用程序（非 HTML）定义容器
<object>定义嵌入的对象。
<param>定义对象的参数。
HTML组成
- HTTP请求信息组成：
- 请求方法和URL
- 请求头
- 请求正文
Html的一个例子
<html>
<head>
<meta charset="UTF-8">
<title>文档</title>
</head>
<body>
<p>I'm a paragraph.</p>
<p>I'm the second paragraph.</p>
<p>I'm the third paragraph.</p>
</body>
</html>
- 在上面的例子中，可以分为三个部分：
HTML版本声明部分
页面头部部分
页面主体
Html声明
- 是一个HTML5声明
- 并不是一个标签，它只是用于告诉浏览器该如何解析网页。并且需要在标签前面。
- 对于Html4
<!-- HTML4 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Html头部
<head>
<meta charset="UTF-8">
<title>文档</title>
</head>
上面是例子中页面头部部分，这个部分用于标记页面的 元数据（描述数据的数据）
在HTML中也存在元数据，元数据存放在标签里面。
在之间的内容最终不会显示出来，因为元数据是给浏览器看的
body部分
里面才是真正的显示内容。在例子中，内的内容是
<p>I'm a paragraph.</p>
<p>I'm the second paragraph.</p>
<p>I'm the third paragraph.</p>
标签详述
<html>标签
- <html> 标签是整个文档的根标签，网页中的所有标签都写在 <html> 中。
- 其实标签也有自己的属性，标签的属性以键值对的形式出现，就像下面这样：<html 属性名称=“属性值”></html>
标签常用属性
- 主要使用属性是 lang 属性
lang属性用于指定一个元素里面内容所使用的语言。
当使用到根元素中时，代表整个页面所使用的语言。
<!DOCTYPE html>
<html lang="en-us">
lang属性为en-us表示当前页面使用的语言是美式英语 <html lang=“en-us”>
<html lang=“zh-cn”>（zh-cn表示中文简体，中国大陆）
国家代码表中，你可以将该代码作为 lang 属性的值，注意理解键值对的含义。
<Head>标签
- <head>用于容纳页面元数据
<head>
<title>标题</title>
</head>
<title>指明了页面的标题为标题
如果浏览器开发厂商愿意，也可以提取<head>中的作者信息、作者姓名等一起显示到标题栏。元数据是否显示，这只是浏览器厂商一些用户体验的做法，与元数据不显示是不冲突的。
元数据相关标签<title>
用于表示页面的标题与名称
元数据相关标签<link>
参考内容：
MIME
通用结构：type/subtype。由类型与子类型两个字符串中间用’/'分隔而组成。不允许空格存在。type 表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。
- 独立类型有：
text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/*
application/json
application/javascript
application/ecmascript
application/octet-stream
… - Multipart 类型：
multipart/form-data
multipart/byteranges
Multipart 类型表示细分领域的文件类型的种类，经常对应不同的 MIME 类型。这是复合文件的一种表现方式。multipart/form-data 可用于联系 HTML Forms 和 POST 方法，此外 multipart/byteranges使用状态码206 Partial Content来发送整个文件的子集，而HTTP对不能处理的复合文件使用特殊的方式：将信息直接传送给浏览器（这时可能会建立一个“另存为”窗口，但是却不知道如何去显示内联文件。）
正文
- <link>用于链接网页外的资源
目前主要用于：
为页面引入:css文件
引入icon图标，或者说指定当前页面的图标
常用属性
-
rel属性
用来说明链接资源的类别，并对其进行特定处理。
常用的值有：
stylesheet:用于说明引入的是样表式文件
icon:用于说明引入的是一个icon图标 -
type属性
用于说明资源的MIME类型（媒体类型，通常称为： Multipurpose Internet Mail Extensions ）
MIME类型（而不是文件扩展名）常被浏览器用来确定如何处理URL -
href属性
需要链接的资源的地址。
实例1：引入css文件
index.css内容如下：
p {
/* 这段是注释（浏览器将会忽略）：将p标签中的内容水平居中显示 */
text-align: center;
}
里面的CSS代码将会让<p>中的内容水平居中显示。但可惜的是CSS代码并没有起到作用。
因为在浏览器看来，index.html 虽然和 index.css 在同一个文件夹下，但两个文件是没有任何关联的，需要用标签引入 index.css 到 index.html 中。
- 修改你的 index.html 中的网页代码，添加一个标签
<link rel="stylesheet" href="index.css" type="text/css">
实例：引入icon文件
- 在 <head> 中新加一个 <link>
rel属性值为 shortcut icon
href属性值为 icon.ico
type属性值为 image/x-icon
<form>标签
例子:
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
- 定义和用法<form>
标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。 - 形式为：
<FORM ACTION="URL" METHOD="GET/POST" ENCTYPE="MIME" TARGET="...">...</FORM>
name为表单名称，method定义了提交表单信息的方法，action定义了表单处理网页的位置。 - 表单内标签元素有：
<input>/<textarea>/<select>/<option> - 提示和注释
注释：form 元素是块级元素，其前后会产生折行
<input>标签
<input>标签在form表单中格式为：<input type="type_name" name="field_name" value="value_name">，<input> 标签内属性包括type/name/value/size/maxlength等。
- type的属性值决定了处理方法：
text 文字字段（用于输入单行文本）
password 口令域（不可见）
file 文件域（可用于上传文件）
checkbox 复选框
radio 单选框
button 普通按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域（用来发送和收集信息的不可见元素）
image 图像提交按钮
属性、值、描述
|属性 |值 |描述 |
|--------------|-------------------------------------------------------|
|accept |MIME_type |HTML 5 中不支持。 |
|accept-charset|charset_list |规定服务器可处理的表单数据字符集。 |
|action |URL | 规定当提交表单时向何处发送表单数据。 |
|autocomplete |on/off| 规定是否启用表单的自动完成功能。 |
|enctype |见说明| 规定在发送表单数据之前如何对其进行编码。 |
|method |get/post|规定用于发送 form-data 的 HTTP 方法。 |
|name |form_name |规定表单的名称。 |
|novalidate |novalidate |如果使用该属性，则提交表单时不进行验证。 |
|target |_blank/_self/_parent/_top/framename|规定在何处打开 action URL。|
- 说明
enctype 属性可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain
<meta>标签
- 定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
- HTML 与 XHTML 之间的差异
在 HTML 中，<meta> 标签没有结束标签。
在 XHTML 中，<meta> 标签必须被正确地关闭。
- 提示和注释：
注释：<meta> 标签永远位于 head 元素内部。(也即总在http头内)
注释：元数据总是以名称/值的形式被成对传递的。
必需的属性
属性：content 值：some_text 描述：定义与 http-equiv 或 name 属性相关的元信息
可选的属性
属性： http-equiv 值：content-type/expires/refresh/set-cookie 描述：把 content 属性关联到 HTTP 头部。
属性：name 值：author/description/keywords/generator/revised/others描述：把 content 属性关联到一个名称。
属性：scheme 值：some_text 描述：定义用于翻译 content 属性值的格式。
- name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
- http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
- 这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。 - content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。 - scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。
后记
-
标签有什么功能，如何使用等，都有一个规范。这个规范，也就是你和我熟知的HTML版本（大部分由W3C制定），通俗地讲就是HTML几 （HTML2.0、HTML3.2、HTML4.0等）HTML5 就是新的，新一代的HTML规范。
比如旧的HTML规范对于现在已经暴露出很多弊端： -
1.各浏览器之间的兼容性问题：IE浏览器，因为它很多地方与标准“格格不入”
不同的标准给前端开发带来了额外的工作量，在开发时候需要兼容不同的标准。 -
2.Web应用程序的功能被限制
你可以看到许多在线工具网站：bilibili云剪辑、秀展网、炫酷动画、可交互动画。这大多依赖一些HTML5特有的标签，如 标签。
这些炫酷的功能在HTML5之前，通常需要依赖其他组件来实现，例如Flash -
综上：
学习HTML5，你需要学习的东西有很多：标签、页面布局、Ajax异步、HTTP协议、主流开发工具和框架 …等等。
学无止境…
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
