HTML 入门教程学习摘要笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_43451006/article/details/98581282

HTML介绍

HTML是现在世界通用的超文本标记语言，通过它，可以实现图片、链接、音乐以及程序等等多种元素。

HTML 指的是超文本标记语言（英语：HyperText Markup Language），是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言，它有一套标记标签。
HTML 使用标记标签来描述网页。
HTML 文档包含了 HTML 标签及文本内容，HTML文档也叫做 Web 页面。

HTML发展史

HTML编辑器

Notepad++：https://notepad-plus-plus.org/

Sublime Text：http://www.sublimetext.com/

VS Code：https://code.visualstudio.com/

HTML属性

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

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
- 属性只能添加到起始标签或单个标签
- 属性永远不能添加到结束标记
属性总是以名称/值对的形式出现，比如：name=“value”
具有多个属性的元素
- 通过用一个或多个空格字符分隔它们
- 属性的顺序并不重要

HTML常用属性

class属性

为 HTML 元素定义一个或多个类名。
通常用于指向样式表中的类。

id属性

定义 HTML 元素的唯一的 id。

提示：id 在 HTML 文档中必须是唯一的。

href属性

指定基本URL将解析文档中的相对URL。

target属性

指示浏览器如何打开网址。

为此属性指定的值表示浏览上下文。

HTML属性值

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

双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。

提示：属性和属性值对大小写不敏感。不过，推荐标准中推荐小写的属性/属性值。

HTML元素

DOCTYPE

定义文件类型。

元素是唯一的，并且在自己的类别中。
告诉浏览器它正在处理一个HTML文档，通过HTML布尔属性。
不区分大小写。
此元素没有结束标记。

html

定义了整个 HTML 文档。
含一个开始标签和一个结束标签，开始标签位于DOCTYPE元素之后。

head

包含了所有的头部标签元素。

必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。
HTML文档中的元数据提供了有关文档的信息。
- 元数据包含在head元素中。

提示：对于中文网页需要使用 meta标签里的charset属性的属性值"utf-8"声明编码，否则会出现乱码。有些浏览器（如 360 浏览器）会设置 GBK 为默认编码，则你需要设置属性值为"gbk"。

title

定义文档标题。
title元素是元数据。

大多数浏览器在浏览器中显示title元素窗口标题栏或显示页面的选项卡顶部。
每个HTML文档应该只有一个标题元素。

meta元数据

定义文档的元数据。

局部属性：name，content，charset，http-equiv 。
- 使用name，content定义名称/值对中的元数据：
  - robots元数据：允许HTML文档的作者指定文档应如何被搜索引擎处理。
  - 大多数搜索引擎将识别的三个值是：
    - noindex - 不要索引此页面
    - noarchive - 不要创建此页面的存档或缓存版本
    - nofollow - 不要追踪（即抓取）此页面的链接
- charset 字符编码
  - ASCII是第一个字符编码标准。它定义127个字母数字字符。ASCII支持的数字（0-9），英文字母（A-Z）和一些特殊字符！ $ + - （）@ <>。
  - ANSI（Windows-1252）是原始的Windows字符集。它支持256种不同的字符代码。
  - ISO-8859-1是HTML 4的默认字符集。它支持256种不同的字符代码。
  - UTF-8（Unicode）涵盖了世界上几乎所有的字符和符号。
  - HTML5的默认字符编码为UTF-8。
- http-equiv 指定要模拟的标题
  - 属性值:refresh
    设置一个周期（以秒为单位）。
    之后，将从服务器重新加载当前页面。还可以指定要加载的其他URL。
  - 属性值:default-style
    设置应该用于此页面的首选样式表。
    content属性的值必须与同一文档中的脚本或链接元素上的title属性匹配。
  - 属性值:content-type
    指定HTML页面的字符编码的替代方法。
本身不是内容，但它们提供有关后续内容的信息。
元数据元素被添加到头元素。

base

为相对链接设置基本URL。

相对链接是省略URL的协议，主机和端口部分的链接并且针对一些其他URL(由基本元素或由基本元素指定的URL)进行评估用于加载当前文档的URL。

base 元素也指定如何在用户单击链接时打开链接，以及在表单提交后浏览器的行为。
base 元素有两个局部属性：
- href
- target
HTML文档最多只能包含一个基本元素。

style

在HTML文档中内联定义CSS样式。

局部属性: type，media，scoped 。
- type告诉浏览器要定义什么样的样式；但是，浏览器支持的唯一的样式机制是CSS，所以值的此属性将始终为text/css。
- media指定应将样式应用于文档的时间。

link

加载资源链接。

局部属性: href，rel，hreflang，media，type，sizes 。
- href - 指定链路元素引用的资源的URL。
- hreflang - 指定链接资源的语言。
- media - 指定链接内容用于的设备。
- rel - 指定文档和链接资源之间的关系类型。
  - alternate - 指向文档的替代版本的链接，例如翻译成另一种语言的链接。
  - author - 链接到文档的作者。
  - help - 与当前文档相关的帮助的链接。
  - icon - 指定图标资源。
  - license - 指向与当前文档相关联的许可证的链接。
  - pingback - 指定pingback服务器，允许当其他网站链接到博客时自动通知博客。
  - prefetch - 预加载资源。
  - stylesheet - 加载外部CSS样式表。
- sizes - 指定图标的大小。
- type - 指定链接资源的MIME类型，例如text/css 或 image/x-icon.

script

在文档中内联定义或引用外部文件。

局部属性: type，src，defer，async，charset 。
- type - 指定引用或定义的脚本的类型。对于JavaScript脚本，可以省略此属性。
- src - 指定外部脚本文件的URL。使用 src 属性，则脚本元素必须为空。
- defer - 指示浏览器在页面加载和解析之前不执行脚本。这些属性只能与src属性结合使用。
- async - 异步地执行不与HTML文档中的元素交互的自包含脚本。这些属性只能与src属性结合使用。
- charset - 指定外部脚本文件的字符编码。此属性只能与src属性结合使用。

noscript

允许向其显示内容已禁用JavaScript或正在使用浏览器的用户不支持它。
显示内容和说明，除非他们启用JavaScript，否则他们不能使用您的网站或网页。
可向页面添加多个noscript元素。
如果不支持JavaScript，可以将用户的浏览器重定向到其他网址，方法是将meta元素放在noscript元素中。

body

定义文档的主体。
包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

br

定义折行（换行）。

没有关闭标签的空元素，在开始标签中添加斜杠关闭标签。
样式约定是将后续内容移动到新行上。
只能在换行符是内容的一部分时使用。
不应用于创建段落或其他内容分组。

h1~h6

表示标题。

HTML定义了标题元素的层次结构，其中 h1 是排名最高的。
相同排名的标题会分解内容，以便每个主题都在其自己的部分。
浏览器会自动地在标题的前后添加空行。
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

hgroup

组标题。

处理多个标头元素作为单个项目，而不会影响HTML文档的大纲。

hr

表示水平规则。
一条横跨页面的线。

div

创建结构，不具有特定含义。

div 元素是 span 元素的 block 。
块元素开始新行，而行内元素保持在同一行。

span

本身没有意义。

将一个全局属性应用于内容区域。

p

表示段落。

包含一个或多个相关句子的文本块。
浏览器会自动地在段落的前后添加空行（是块级元素）。

pre

预格式化内容。

在 pre 元素中，空格不会折叠，并保留格式。
当内容的一部分的原始格式是重要的时，这可能是有用的。
当使用代码元素时， pre 元素可能特别有用。

blockquote

表示从另一个来源引用的块内容。

类似q元素，但通常适用于较大数量的引用内容。
可以使用 cite 属性以提供内容的原始源的URL。

q

表示从另一个来源引用的内容。

样式约定是以使用引号将引用的文本括起来。

article

表示自包含HTML文档中的内容。

section

表示文档的一部分。

应用于包含内容将在文档的大纲或目录中列出。
段元素通常包含一个或多个内容段落和标题，但标题是可选的。

nav

表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。

标识文档的主要导航部分。

details

创建一个节，用户可以展开该节以获取有关主题的更多详细信息。
通常包含一个摘要元素，用于为详细信息部分创建标签或标题。

header

表示节的标题。

可包含任何表示为头部的内容。
头部元素通常包含一个 h1?h6 元素或一个 hgroup 元素
还可包含节的导航元素。

footer

表示部分的页脚。

是页眉的补充。
页脚通常包含关于版块的摘要信息，并且可以包括作者的详细信息，权限信息。

aside

表示仅与周围元素相关的内容。

类似于书或杂志中的侧边栏。
内容与页面，文章或部分的其余部分有关，但它不是主要流程的一部分。

a

超链接。

局部属性: href，hreflang，media，rel，target，type 。
- href - 指定a元素引用的资源的URL。
- hreflang - 指定链接资源的语言。
- media - 指定链接内容用于的设备。此属性与头元素元素使用相同的设备和特征值。
- rel - 指定文档和链接资源之间的关系类型。此属性使用与链接元素的rel属性相同的值。
- target - 指定应在其中打开链接资源的浏览上下文。
- type - 指定链接资源的MIME类型，例如text/html。

提示：
并非所有网址都必须引用其他网页。
浏览器还支持其他协议，如 https 和 ftp 。
如果要引用电子邮件地址，可以使用 mailto 协议。

abbr

表示缩写。

当使用此元素时，可以使用 title 属性来提供缩写代表的扩展文本。

address

标记文档或文章元素的联系信息。

当address元素是article元素的后代时，假定提供该文章的联系信息。
当address元素是body元素的子代，并且在body和address元素之间没有article元素时，假设地址为整个文档提供联系信息。
不应使用此元素标记客户或用户的地址。
通常被包含在 footer 元素的其他信息中。。

b

指示任何额外强调或重要性的文本跨度。

样式约定是 b {font-weight:bolder;} 。

bdi

为了文本方向性而与其他内容隔离的文本。

在显示没有可用方向性信息的内容时，使用此元素。浏览器自动确定方向性。

bdo

指定一个明确的文本方向其内容，覆盖通常应用的自动方向性。

必须使用 bdo 元素和 dir 属性，其具有 rtl (用于从右到左布局)的允许值 ltr (对于从左到右的布局)。

cite

表示引用作品的标题，书，文章或电影。

样式约定是 cite {font-style:italic; } 。
还有一个不为人知的功能：使用该标签，您或其他人可以从文档中自动摘录参考书目。例如：浏览器能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。也就是说，文档的内容可以通过浏览器以不同的方式展示给用户。

code

标记一段计算机代码。

默认样式是{font-family:monospace;}

del

标记删除的文本。

局部属性: cite，datetime 。
- cite指定文档的URL这解释了为什么文本被删除。
- datetime指定文档的URL这解释了为什么文本被删除。

dfn

定义一个术语，解释了词或短语的意义。

title 属性的值必须是要定义的项。
如果 dfn 元素包含 abbr 元素，那么缩写是要定义的术语。
如果没有 title 属性，并且元素的内容是文本，那么文本表示正在定义的术语。
没有与此元素相关联的样式约定。

em

表示具有强调应力的文本跨度。

样式约定是使用斜体。

i

表示文本具有与周围内容不同的性质，如，来自其他语言的词语，技术或科学术语。

样式约定是 i {font-style:italic;} 。

ins

标记添加的文本。

ins 元素表示插入的内容，与局部属性: cite，datetime 。
* cite指定文档的URL这解释了为什么文本被添加
* datetime 属性指定进行修改的时间。

kbd

表示用户输入。

样式 {font-family:monospace; } 。

mark

表示突出显示的文本。

ruby

表示一段文本包含一个ruby。

rt标记ruby符号
rp表示注释周围的圆括号由不支持ruby注释的浏览器显示
当文档显示在支持ruby注释的浏览器中时，将忽略 rp 元素及其内容， rt 元素的内容显示为注释

s

标记文本不再正确或准确。

样式约定是使用通过它绘制的线来显示文本: s {text-decoration:line-through;} 。

samp

表示来自程序或计算机系统的输出。

默认样式: {font-family:monospace; } 。

small

标记精细打印和经常用于免责声明和澄清。

strong

标记重要的文本。

相同样式约定作为 b 元素。

sub和sup

分别表示下标和上标。

在某些语言中需要上标上标和下标都用在简单的数学表达式中。

time

表示时间或日期。

局部属性: datetime，pubdate 。
- 如果存在布尔 pubdate 属性，那么时间元素假定为的发布日期整个HTML文档或最近的article元素。
- datetime 属性指定日期或时间以RFC3339指定的格式，可以在http://tools.ietf.org/html/rfc3339找到。

u

通过添加下划线标记文本。

样式约定: u {text-decoration:underline;} ，与 a 元素的类似。

var

标记编程上下文中的变量。

默认样式是 {font-style:italic; } 。

wbr

称为安全断路。

是HTML5的新特性表示浏览器可以合理地插入换行符包装大于当前浏览器窗口的内容。
由浏览器决定是否或不是实际使用换行符。
是合适的地方打破内容的指南。

无序列表ul和li

可以通过 list-style-typeCSS属性来控制要使用哪个样式项目符号。

有序列表ol和li

在HTML5中添加reversed属性。
start 属性定义列表中第一个项目的序数值，如果未定义此属性，则为第一个项目分配序号值1。
使用 type 属性来指示每个项目旁边应显示哪个标记。

自定义列表dl、dt、dd

dl 表示描述列表。
dt 表示描述列表中的术语。
dd 表示描述列表中的定义。
多个 dd 元素可用于单个 dt 元素，这允许您为单个术语提供多个定义。

figure

规定独立的流内容（图像、图表、照片、代码等等）。

其内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

figcaption

被用来为figure元素定义标题。

img

将图像嵌入到HTML文档中。

局部属性: src，alt，height，width，usemap，ismap 。
- src 属性指定图像的URL。
- 如果无法显示图片，则 alt 属性定义内容。
- width 和 height 属性设置图像大小(以像素为单位)。
- ismap 属性创建服务器端图像映射，意味着在图像上单击的位置将附加到URL。
常见用途是结合 a 元素创建基于图像的超链接。
img元素是自关闭元素，不需要结束标记。

iframe

规定一个内联框架。

height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 可以指定其按比例显示 (如：“80%”)。
frameborder属性用于定义iframe表示是否显示边框。　设置属性值为 “0” 移除iframe的边框。
局部属性: src，srcdoc，name，width，height，sandbox，seamless 。
- width和height属性指定大小(以像素为单位)，内容大于width和height属性，则会出现滚动条。
- src属性指定应最初加载并显示在iframe中的网址。
- srcdoc属性允许您定义一个内嵌显示的HTML文档。
- seamless属性设置浏览器显示iframe，如同它们是主HTML文档的组成部分。
- sandbox 属性对HTML文档应用限制。
  - allow-forms - 启用表单
  - allow-scripts - 启用脚本
  - allow-top-navigation - 允许定位到顶级浏览上下文的链接，这样可以将整个文档替换为另一个文档，也可以创建新的标签页或窗口
  - allow-same-origin - 允许将iframe中的内容视为来自与文档其余部分相同的位置

progress

用于指示任务的逐渐完成。

局部属性： value，max，form 。
- value属性定义当前进度，它在零和max属性的值之间。
- 当省略max属性时，比例在0和1之间。
- 使用浮点数表示进度，例如30％的0.3。

meter

显示在可能值范围的上下文中显示的值。

局部属性: value，min，max，low，high，optimum，form 。
- min和max属性设置可能值范围的边界。这些可以使用浮点数来表示。
- meter元素的显示可以分为三个部分:太低，太高和刚好。
- low属性设置值被认为过低的值，
- high属性设置值被认为过高的值。
- optimum属性指定“刚好正确"的值。

表格

table

可包含可以有 caption，colgroup，thead，tbody，tfoot，tr，th和td 元素。
- border 属性的值必须为1。边框的厚度必须使用CSS设置。

tr

表示表行。

可以在 table ， thead tfoot 和 tbody 元素内使用。
可以包含一个或多个 td 或 th 元素。

td

文本通常是普通的左对齐文本。

thead

表头包装器，定义一行或多行，这些行是table元素的列标签。

必须被用在以下情境中：作为 table 元素的子元素，出现在 caption、colgroup 元素之后，tbody、tfoot 和 tr 元素之前。

th

标记标题单元格，使能区分数据及其描述。

th 元素的父代是 tr 元素。它具有局部属性: colspan，rowspan，scope，headers 。
th 和 td 元素在一行中混合在一起。它向表中添加垂直头和行头。
文本通常呈现为粗体并且居中。。

tbody

标记表体的行，而不是标题行和页脚行。

必须被用在以下情境中：作为 table 元素的子元素，出现在 caption、colgroup 和 thead 元素之后。

tfoot

标记表页脚。

可以出现在tbody 或 tr 元素之前或之后。
在HTML5之前， tfoot 元素必须出现在 tbody 元素之前。
在HTML5中，可以将 tfoot 元素放在 tbody 或最后一个 tr 元素后面。
被用在以下情境中：作为 table 元素的子元素，出现在 caption、colgroup 和 thead 元素之后，tbody 和 tr 元素之前。

colgroup

表列组。

可以包含零个或多个 col 元素。
span 属性指定 colgroup 元素应用于多少列。
只能在 table元素之内，在任何一个 caption 元素之后，在任何一个 thead、tbody、tfoot、tr 元素之前使用。

col

表单个列。

局部属性: span 。
col 元素放置在 colgroup 元素内部， col 的每个实例表示组中的一列。
只能在 table 元素或 colgroup 元素内部使用。

colspan

列跨度，将单元格跨多个列。

分配给 colspan 的值必须是整数。
还必须删除展开后的单元格将覆盖的单元格元素。

rowspan

行跨度，将单元格跨多行。

分配给 rowspan 的值必须为整数。
如果希望中间列中的一个单元格跨越所有三行，将 rowspan 属性应用于单元格2。
还必须删除展开后的单元格将覆盖的单元格元素。

caption

定义一个标题并将其与table元素相关联。

表只能包含一个 caption 元素，但不一定是表中包含的第一个元素。

表单

form

向服务器传输数据.

带有局部属性的表单元素: action，method，enctype，name，accept-charset，novalidate，target，autocomplete，在HTML页面中创建一个表单。

method

规定用于发送表单数据的 HTTP 方法。

关于 GET 的注释：
- 将表单数据以名称/值对的形式附加到 URL 中
- URL 的长度是有限的（大约 3000 字符）
- 绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
- 对于用户希望加入书签的表单提交很有用
- GET 更适用于非安全数据，比如在 Google 中查询字符串
关于 POST 的注释：
- 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
- 没有长度限制
- 通过 POST 提交的表单不能加入书签

enctype

规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）。

enctype 属性指定浏览器如何编码数据并将其呈现给服务器。
+ application/x-www-form-urlencoded默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值），此编码无法用于将文件上传到服务器。
+ multipart/form-data不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
+ text/plain将空格转换为 “+” 符号，但不编码特殊字符，此编码因浏览器而异。

autocomplete

规定是否启用表单的自动完成功能。

“on” 默认值，适用于表单，“off” 适用于特定的输入字段。

target

规定在何处打开 action URL。
- _blank - 在新窗口（或选项卡）中打开服务器响应
- _parent - 打开父框架集中的服务器响应
- _self - 在当前窗口中打开服务器响应（这是默认行为）
- _top - 在当前窗口中打开服务器响应（这是默认行为）
- framename - 在指定的 iframe 中打开

name

规定表单的名称，设置表单的唯一标识符。
- 此属性仅在客户端的DOM操作中有用，并且不像输入元素上的name属性那样重要。
- 如果输入元素没有name属性，则在提交表单时，用户输入的数据将不会发送到服务器。

input

规定了用户可以在其中输入数据的输入字段。

没有结束标签。
覆盖form属性
注意disabled和readonly
- 表单中被禁用的 input 元素不会被提交。
- disabled 属性不适用于 input type=“hidden”。

textarea

定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
可以通过wrap 属性设置文本输入区内的换行模式。

label

为 input 元素定义标注（标记）。

for 属性应当与相关元素的 id 属性相同。

fieldset

标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示。
将表单内的相关元素分组，在相关表单元素周围绘制边框。

legend

用来组合表单的相关元素，表示了其父级 fieldset 内容的标题。

select

创建下拉列表。

optgroup

所提供的选项进行分组。

option

用于定义包含在select、optgroup 或 datalist 元素中的项。
表示 HTML 文档中弹出窗口中的菜单项和其他项目列表。

通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

button

设置 HTML 中的按钮。

请始终为 button 元素规定 type 属性。不同的浏览器对 button 元素的 type 属性使用不同的默认值。。

datalist

需要与 input 标签配合使用，用来表示可选的列表。

keygen

规定用于表单的密钥对生成器字段。

output

作为计算结果输出显示(比如执行脚本的输出)。

URL

URL图解

URL 只能使用 ASCII 字符集。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML媒体

object

定义了在 HTML 文档中嵌入的对象。

data属性提供了内容的位置。
用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
局部属性:data，type，height，width，usemap，name，form。
用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

param

包含它的 object 标签和 applet 标签定义参数。

为插入 XHTML 文档的对象规定 run-time 设置。

embed

定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

局部属性: src，type，height，width 。
- src属性指定内容的位置。
- type属性指定内容的MIME类型。
- width和height属性确定嵌入内容的大小。
- 任何其他属性都是插件或内容的参数。
allowfullscreen 允许YouTube视频播放器以全屏模式播放视频。
没有关闭标签，不能使用替代文本。
无法回退来显示错误消息。