HTML

Posted 2020-08-05 Truth & Free

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML相关的知识，希望对你有一定的参考价值。

1. HTML元素

html 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

空元素在开始标签中关闭。

大多数 HTML 元素可拥有属性。

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML标签列表：http://www.w3school.com.cn/tags/html_ref_byfunc.asp

2. HTML属性

属性为 HTML 元素提供附加信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。

HTML全局属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

3. HTML标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<hr /> 标签在 HTML 页面中创建水平线。

4. HTML段落

段落是通过 <p> 标签定义的。

<br /> 标签在不产生一个新段落的情况下进行换行。

所有连续的空格或空行都会被算作一个空格。

5. HTML样式

style 属性用于改变 HTML 元素的样式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

6. HTML格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

HTML文本格式化：http://www.w3school.com.cn/html/html_formatting.asp

7. HTML引用

<q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

<blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<dfn> 元素定义项目或缩写的定义。

<address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。

<bdo> 元素定义双向重写（bi-directional override）。如果您的浏览器支持 bdo，则文本将从右向左进行书写（rtl）.

HTML 引文、引用和定义元素

标签	描述
<abbr>	定义缩写或首字母缩略语。
<address>	定义文档作者或拥有者的联系信息。
<bdo>	定义文本方向。
<blockquote>	定义从其他来源引用的节。
<dfn>	定义项目或缩略词的定义。
<q>	定义短的行内引用。
<cite>	定义著作的标题。

8. HTML计算机代码

标签	描述
<code>	定义计算机代码文本
<kbd>	定义键盘文本
<samp>	定义计算机代码示例
<var>	定义变量
<pre>	定义预格式化文本

9. HTML注释

注释标签  用于在 HTML 插入注释。

10. HTML CSS

CSS 可以通过以下方式添加到HTML中：

1) 内联样式 - 在HTML元素中使用"style" 属性。

2) 内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素来包含CSS。

3) 外部样式表 - 使用外部 CSS 文件。

标签	描述
<style>	定义文本样式。
<link>	定义资源引用。

11. HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接：

<a href="http://www.w3school.com.cn/">Visit W3School</a>

target 属性，定义被链接的文档在何处显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name/id 属性，规定锚（anchor）的名称，创建 HTML 页面中的书签。<a name="tips">基本的注意事项 - 有用的提示</a>

<a href="#tips">有用的提示</a>

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

12. HTML图像

在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

Src属性，源属性的值是图像的 URL 地址。

alt 属性用来为图像定义一串预备的可替换的文本。

标签	描述
<img>	定义图像。
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

13. HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

表格中的空单元格：添加一个空格占位符 ，就可以将边框显示出来。

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

14. HTML列表

1) 无序列表，始于 <ul> 标签。每个列表项始于 <li>。

2) 有序列表，始于 <ol> 标签。每个列表项始于 <li> 标签。

3) 自定义列表，以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

15. HTML块

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

1) <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

2) <span> 元素是内联元素，可用作文本的容器。

与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

16. HTML类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

1) 分类块级元素：设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。

2) 分类行内元素：设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

17. HTML布局

1) 使用<div>元素

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

2) 使用HTML5

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

3) 使用<table>元素

<table> 元素的作用是显示表格化的数据，能够通过 CSS 设置表格元素的样式。

18. HTML响应式设计

RWD 指的是响应式 Web 设计（Responsive Web Design）。RWD 能够以可变尺寸传递网页。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

19. HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签<frameset>定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积。

使用框架的坏处：

û 开发人员必须同时跟踪更多的HTML文档

û 很难打印整张页面

为不支持框架的浏览器添加 <noframes> 标签。

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

内联框架：

height 和 width 属性用于规定 iframe 的高度和宽度。

frameborder 属性规定是否显示 iframe 周围的边框。

iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性。

20. HTML背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

1) bgcolor：背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

2) background：背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

21. HTML脚本

22. HTML头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

标签	描述
<head>	定义关于文档的信息。
<title>	定义文档标题。
<base>	定义页面上所有链接的默认地址或默认目标。
<link>	定义文档与外部资源之间的关系。
<meta>	定义关于 HTML 文档的元数据。
<script>	定义客户端脚本。
<style>	定义文档的样式信息。

23. HTML实体

HTML 中的预留字符必须被替换为字符实体。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
\'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

24. HTML URL

网址遵守以下的语法规则：

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http。

host - 定义域主机（http 的默认主机是 www）

domain - 定义因特网域名，比如 w3school.com.cn

:port - 定义主机上的端口号（http 的默认端口号是 80）

path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename - 定义文档/资源的名称

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL编码参考手册：http://www.w3school.com.cn/tags/html_ref_urlencode.html

25. HTML表单

<form> 元素定义 HTML 表单，HTML 表单用于收集用户输入。

1) 表单元素

<input> ：输入域

Input属性：http://www.w3school.com.cn/tags/tag_input.asp

Type属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<lable> ：<input> 元素的标签，一般为输入标题

<optgroup> ：定义选项组

<textarea> ：文本域（多行输入）

<fieldset> ：一组相关的表单元素，并使用外框包含起来

<legend> ：定义了 <fieldset> 元素的标题

<select> ：下拉列表

<option> ：定义下拉列表中的选项

<button> ：点击按钮

HTML5新增的输入类型：color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week

HTML表单标签：http://www.runoob.com/html/html-forms.html

2) 表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

何时使用GRT?

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的：

何时使用POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

<fieldset> 元素组合表单中的相关数据，<legend> 元素为<fieldset> 元素定义标题

以上是关于HTML的主要内容，如果未能解决你的问题，请参考以下文章

HTMLHTML 标签 ③ ( 链接标签 | 注释标签 )

HTMLHTML 表单 ⑤ ( form 表单域 )

HTMLHTML 网页自动刷新

HTMLHTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )

PHP-HTMLhtml重要知识点笔记