代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

4 Star 11 Fork 16

Swot/learning

代码 Issues 8 Pull Requests 9 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

文件

master

分支 (4)

管理

master

devel

homework

test_icons_font

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

分支 4

标签 0

learning

html

HTMLBasic.adoc

HTMLBasic.adoc 23.25 KB

= HTML基础
:source-highlighter: pygments
:icons: font
:scripts: cjk
:toc:
:toc: right
:toc-title: 目录
:toclevels: 4

== HTML 简介
- 任务1 了解 HTML 的历史

- 任务2 精通 HTM L的结构

- 任务3 精通 HTML 的元素和属性

image::img/html4LearnRoute.png[,850,]

== HTML 概述
标记语言

- 标记语言,是一种将文本(Text)以及与文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。

- 常见的标记语言有,XML、HTML、XHTML等

- HTML,超文本标记语言是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言。可以使用 HTML 建立 Web 站点。HTML 文档在浏览器上运行,并由浏览器解析。

- XHTML,可扩展超文本标记语言是一种更纯洁、更严格、更规范的HTML代码。

=== HTML 的基本结构
- HTML 文件由文件头(head)和文件体(body)两部分组成,在这两个部分外面还要加上标签<html></html>说明此文件是 HTML 文件,浏览器才能正确识别 HTML 文件。

- HTML 文件的后缀名一定是 html 或者 htm。例如(01_HTML的基本结构.html)

- 在HTML的基本结构中用"<"和">"括起来的单词,通常叫做元素。

.http://127.0.0.1:5500/01_HTML%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84.html?[01_HTML的基本结构.html]
[source,html,linenums]
include::src/01_HTML的基本结构.html[]

.http://127.0.0.1:5500/02_HTML%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84_%E5%B8%B8%E8%A7%81%E6%A0%BC%E5%BC%8F.html?[02_HTML的基本结构_常见格式.html]
[source,html,linenums]
include::src/02_HTML的基本结构_常见格式.html[]

=== HTML 的基本定义
- 标签:用"<"和">"括起来的叫做标签,如<p>、</p>、<br>等,建议用小写。

- 元素:一对标签包含的所有代码,元素内容是开始标签和结束标签之间的内容

[caption=]
[cols="1,1,1", options="header"]
|===
|开始标签 |元素内容 |结束标签
|<div> |这里是元素内容 |</div>
|===

- 属性:HTML标签可以拥有属性。
* 属性总是在开始标签中规定,并且属性总是以名称/值对的形式出现,如<div name="value">属性</div>。
* 其中,属性值始终被包裹在引号内,通常使用双引号。

.http://127.0.0.1:5500/03_HTML%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84_%E5%9F%BA%E6%9C%AC%E5%AE%9A%E4%B9%89.html?[03_HTML的基本结构_基本定义.html]
[source,html,linenums]
include::src/03_HTML的基本结构_基本定义.html[]

=== HTML 的常用开发工具
"工欲善其事,必先利其器",对于前端开发人员来说,好工具会带来事半功倍的效果。

.常见的工具HTML开发工具

[caption=]
.常见的工具HTML开发工具
[cols="20,~,~", options="header", stripes=even]
|===
|名称 |网址 |描述

== HTML 的全局属性

=== HTML 的全局标准属性
全局标准属性适用于大多数元素。在 HTML 规范中,规定了 #8 个全局标准属性#。

[caption=]
[cols="15,~,~", options="header", stripes=even]
|===
|属性 |作用 |描述

=== HTML 的全局事件属性
1. 事件是针对某个控件或者元素而言。
- 针对按钮,有单击事件或者按下事件;
- 针对勾选框,有选中和取消事件;
- 针对文本框,有获取输入焦点事件、文本变化事件等。

2. 事件可以通过 JavaScript 直接触发,也可以通过全局事件属性触发,大致分为以下几类。

[caption=]
[cols="20,10,~", options="header"]
|===
|事件 |表示 |描述

.http://127.0.0.1:5500/04_HTML%E7%9A%84%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E5%B1%9E%E6%80%A7.html?[04_HTML的全局事件属性.html]
[source,html,]
include::src/04_HTML的全局事件属性.html[tag=body]

== HTML 的主体元素
一个完整的HTML文档大体包含以下标签

.05_HTML的主体元素.html
[source,html,]
include::src/05_HTML的主体元素.html[]

=== <head>
其中 <head> 可以包含如下元素

.http://127.0.0.1:5500/06_HTML%E7%9A%84%E4%B8%BB%E4%BD%93%E5%85%83%E7%B4%A0_%3Chead%3E.html?[06_HTML的主体元素_<head>.html]
[source,html,]
include::src/06_HTML的主体元素_<head>.html[]

=== <meta>元素
一个<head>可以包含多个<meta>元素。

- <meta>元素共有两个属性,分别是name属性和http-equiv属性。
- <meta>的name属性主要用于描述网页,如网页的关键词、叙述等
- 语法格式:<meta name="参数" content="具体的描述">

[caption=]
[cols="20,~,~", options="header", stripes=even]
|===
|name |example |description

- <meta> 的 http-equiv 属性相当于 http 的文件头,发送信息给浏览器,正确和精确显示内容语法格式:
* <meta http-equiv="参数" content="具体的描述">

[caption=]
[cols="20,~,20", options="header", stripes=even]
|===
|http-fquiv |example |description

.07_HTML的主体元素_<meta>.html
[source,html,]
include::src/07_HTML的主体元素_<meta>.html[]

== HTML 的无语义元素
HTML中每个标签都有自己的语义。例如<body>表示主体,<h1>表示一级标题。

但有两个无语义的标签,<div> 和 <span>

- <span> 是内联标签,在一行文本中,前后衔接
- <div> 是块级标签,前后有换行,划分节或者区域

.http://127.0.0.1:5500/08_HTML%E7%9A%84%E6%97%A0%E8%AF%AD%E4%B9%89%E5%85%83%E7%B4%A0.html?[08_HTML的无语义元素.html]
[source,html,linenums]
include::src/08_HTML的无语义元素.html[tag=*]

== HTML 的标题元素
<h1>~<h6> 标签可以定义标题。其中,<h1>定义最大标题,<h6>定义最小标题。

[caption=]
[cols="1,1", options="header"]
|===
|代码 |展示

a|.http://127.0.0.1:5500/09_HTML%E7%9A%84%E6%A0%87%E9%A2%98%E5%85%83%E7%B4%A0.html?[09_HTML的标题元素.html]
[source,html,]
include::src/09_HTML的标题元素.html[tag=*]

a|image::img/html4h.png[,100]
|===

== HTML 的段落元素
<p>标签用于定义段落。

.http://127.0.0.1:5500/10_HTML%E7%9A%84%E6%AE%B5%E8%90%BD%E5%85%83%E7%B4%A0.html?[10_HTML的段落元素.html]
[source,html,]
include::src/10_HTML的段落元素.html[tag=*]

image::img/html4p.png[]

== HTML 的注释元素
`<!-- -\->` 用于在HTML中插入注释,可以多行注释。

.http://127.0.0.1:5500/11_HTML%E7%9A%84%E6%B3%A8%E9%87%8A%E5%85%83%E7%B4%A0.html?[11_HTML的注释元素.html]
[source,html,]
include::src/11_HTML的注释元素.html[tag=*]

[source,html,]
----
 
-->
----

<1> html 的注释不能嵌套,这是错误的例子。

== HTML 的格式化元素

=== 普通文本
.[caption=]
.普通文本
[cols="1,1", options="header", stripes=even]
|===
|标签 |描述 |展示

|<b> |定义粗体文本
|<big> |定义大号字
|<em> |定义着重文字
|<i> |定义斜体字
|<small> |定义小号字
|<strong> |定义加重语气
|<sub> |定义上标字
|<sup> |定义下标字
|<ins> |定义插入字
|<del> |定义删除字
|===

.[caption=]
[cols="60,.^~"]
|===
a|.http://127.0.0.1:5500/12_HTML%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%85%83%E7%B4%A0.html?[12_HTML的格式化元素.html]
[source,html,linenums]
--
<body>
include::src/12_HTML的格式化元素.html[tag=normal]
</body>
--

a|image::img/html4normal.png[,180]
|===

[caption=]
[cols="60,.^~"]
|===
a|.http://127.0.0.1:5500/12_HTML%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%85%83%E7%B4%A0.html?[12_HTML的格式化元素.html]
[source,html,linenums]
--
<body>
include::src/12_HTML的格式化元素.html[tag=computer]
</body>
--

a|image::img/html4computer.png[,350]
|===

.http://127.0.0.1:5500/12_HTML%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%85%83%E7%B4%A0.html?[12_HTML的格式化元素.html]
[source,html,linenums]
--
<body>
include::src/12_HTML的格式化元素.html[tag=quote]
</body>
--

== HTML 的图片元素
图像是由 <img> 元素定义

- 基本结构:<img src="图片的url" alt="图像的替代文本" />
- width 属性:设置图片的宽度
- height 属性:设置图片的高度

.http://127.0.0.1:5500/13_HTML%E7%9A%84%E5%9B%BE%E7%89%87%E5%85%83%E7%B4%A0.html?[13_HTML的图片元素]
[source,html,linenums]
include::src/13_HTML的图片元素.html[tag=body]

== HTML 的超链接元素
超链接需要用到 [red big]#<a># 标签

- 基本结构:<a href="链接的目标"></a>

[caption=]
.target属性:定义被链接的文档在何处显示
[cols="20,~", options="header"]
|===
|属性 |描述

=== 文本链接和锚点链接
文本链接:元素内容为文本内容

锚点链接:设置 id 属性的唯一属性值,href 属性中用 "#对应锚点"

.http://127.0.0.1:5500/14_HTML%E7%9A%84%E8%B6%85%E9%93%BE%E6%8E%A5%E5%85%83%E7%B4%A0.html?[14_HTML的超链接元素]
[source,html,linenums]
--
<body>
include::src/14_HTML的超链接元素.html[tag=text]
</body>
--

=== 图像链接
图像链接:元素内容为<img>元素

=== 图像热区链接
图像热区链接:在同一张图片上,不同的地方可以链接到不同的目标位置

* 需要用到<map>、<area>标签,<area>比<a>多了shap、coords两个属性

[caption=]
[cols="15,15,~,~", options="header"]
|===
|shape属性 |解释 |coord属性 |解释

=== 其它链接
- E-mail链接:浏览器会使用默认的E-mail程序,打开一封新的电子邮件。
- JavaScript链接:用户点击
- JavaScript链接时会调用空链接:未指派目标地址的超链接

== HTML 的列表元素

=== 无序列表
无序列表:<ul>定义无序列表,用<li>定义列表项。

<ul> 的 type 属性定义图形符号样式,属性值为

- disc(点)
- square(方块)
- circle(圆)
- none(无)

.http://127.0.0.1:5500/15_HTML%E7%9A%84%E5%88%97%E8%A1%A8%E5%85%83%E7%B4%A0.html?[15_HTML的列表元素]
[source,html,linenums]
----
<body>
include::src/15_HTML的列表元素.html[tag=ul]
</body>
----

=== 有序列表
有序列表:前缀通常为数字或者字母,用 <ol> 定义有序列表,用 <li> 定义列表项。

<ol> 的 type 属性定义图形符号样式,属性值为

- A(大写字母)
- I(大写罗马数字)
- a(小写字母)
- i(小写罗马数字)
- 1(数字)

<ol> 还可以通过 start 属性定义序列符号的开始位置。

=== 定义列表
定义列表:是一种特殊的列表,列表用 <dl> 标签,列表项标题用 <dt>,列表项标题内容用 <dd>。

== HTML 的表格元素
表格用 <table> 标签定义。

- 表格标题用 <caption> 标签定义
- 行用 <tr>
- 单元格用 <td>
- 单元格是表头用 <th>

.http://127.0.0.1:5500/16_HTML%E7%9A%84%E8%A1%A8%E6%A0%BC%E5%85%83%E7%B4%A0.html?[16_HTML的表格元素]
[source,html,linenums]
----
<body>
include::src/16_HTML的表格元素.html[tag=basic]
</body>
----

=== <table>标签常用属性
[caption=]
[cols="1,1", options="header", stripes=even]
|===
|属性 |含义

=== <td>标签常用属性
<td> 的两个常用属性

- colspan,用于定义单元格跨行
- rowspan,用于定义单元格跨列。

=== 表格内容分组
当表格分成头部、主体、底部时,可以用<thead>、<tbody>、<tfoot> 3个标签构建表格。通常用于对表格内容进行分组。

== HTML 的表单元素
表单是由 <form> 标签定义,<form> 标签最重要的属性为 action 和 method。

- action属性定义了表单的提交地址。
- method属性定义了表单的提交方式,通常用 post,有时会用 get。

[source,html,]
--
<html>
 <body>
 <form action="regist" method="post">

</form>
 </body>
</html>
--

.http://127.0.0.1:5500/17_HTML%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?[17_HTML的表单元素]
[source,html,linenums]
----
<body>
include::src/17_HTML的表单元素.html[tag=input]
</body>
----

=== 表单控件<select>
表单控件 <select> 定义列表,<option> 定义列表项

.http://127.0.0.1:5500/17_HTML%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?[17_HTML的表单元素-下拉列表]
[source,html,linenums]
----
<body>
include::src/17_HTML的表单元素.html[tag=select]
</body>
----

.http://127.0.0.1:5500/17_HTML%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?[17_HTML的表单元素-多选列表]
[source,html,linenums]
----
<body>
include::src/17_HTML的表单元素.html[tag=multiple]
</body>
----

.http://127.0.0.1:5500/17_HTML%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?[17_HTML的表单元素-滚动列表]
[source,html,linenums]
----
<body>
include::src/17_HTML的表单元素.html[tag=size]
</body>
----

=== 表单控件<textarea>
文本域即多行文本 <textarea> 标签

- <textarea> 标签具有 name、cols、row 3 个属性
* name 用于提交的参数
* value 输入的文本内容
* cols 和 rows 分别定义文本框的列数和行数,即宽度和高度。

.http://127.0.0.1:5500/17_HTML%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0.html?[17_HTML的表单元素-文本框]
[source,html,linenums]
----
<body>
include::src/17_HTML的表单元素.html[tag=textarea]
</body>
----

== HTML 的框架元素
通过使用 <iframe> 框架,你可以在同一个浏览器窗口中显示不止一个页面。

[source,html,linenums]
----
include::src/18_HTML的框架元素.html[]
----

== HTML 的预留字符
在编程语言中存在大量的保留字,这些保留字是不能用作变量名的。

[caption=]
[cols="1,1,1", options="header", stripes=even]
|===
|显示字符 |十进制编号 |实体字符
|" |\&#34; |\&quot;
|& |\&#38; |\&amp;
|< |\&#60; |\&lt;
|> |\&#62; |\&gt;
|空格,用于显示连续的空格 |\&#160 |\&nbsp;
|===

.http://127.0.0.1:5500/19_HTML%E7%9A%84%E9%A2%84%E7%95%99%E5%AD%97%E7%AC%A6.html?[19_HTML的预留字符]
[source, html, ]
----
include::src/19_HTML的预留字符.html[]
----

image:img/html4retain.png[]

一键复制编辑原始数据按行查看历史

wangzhaohe 提交于 2023年01月03日 21:23 +08:00 . add html

HTML基础

HTML 简介
HTML 概述
HTML 的全局属性
- HTML 的全局标准属性
- HTML 的全局事件属性
HTML 的主体元素
- <head>
- <meta>元素
HTML 的无语义元素
HTML 的标题元素
HTML 的段落元素
HTML 的注释元素
HTML 的格式化元素
HTML 的图片元素
HTML 的超链接元素
HTML 的列表元素
HTML 的表格元素
HTML 的表单元素
HTML 的框架元素
HTML 的预留字符

HTML 简介

任务1 了解 HTML 的历史
任务2 精通 HTM L的结构
任务3 精通 HTML 的元素和属性

html4LearnRoute

HTML 概述

标记语言

标记语言,是一种将文本(Text)以及与文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。
常见的标记语言有,XML、HTML、XHTML等
HTML,超文本标记语言是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言。可以使用 HTML 建立 Web 站点。HTML 文档在浏览器上运行,并由浏览器解析。
XHTML,可扩展超文本标记语言是一种更纯洁、更严格、更规范的HTML代码。

HTML(第1版)

1993年6月作为互联网工作小组(IETF)工作草案发布

HTML2.0

1995年11月作为RFC 1866发布

HTML3.2

1997年1月14日,W3C推荐标准,这是第一广泛使用的标准

HTML4.0

1997年12月18日,W3C推荐标准

HTML4.01

1999年12月24日,W3C推荐标准,这也是另外一个广泛使用的标准

XHTML1.0

2000年1月26日,W3C推荐标准

HTML 的基本结构

HTML 文件由文件头(head)和文件体(body)两部分组成,在这两个部分外面还要加上标签<html></html>说明此文件是 HTML 文件,浏览器才能正确识别 HTML 文件。
HTML 文件的后缀名一定是 html 或者 htm。例如(01_HTML的基本结构.html)
在HTML的基本结构中用"<"和">"括起来的单词,通常叫做元素。

link:src/01_HTML的基本结构.html[role=include]

Table 1. 常见格式

双标签

由开始标签和结束标签两部分构成,必须成对使用,如<div></div>

单标签

某些标签单独使用就可以完整地表达意思,如换行标签<br>,也可以使用<br/>

特殊的标签

<!DOCTYPE>,这个标签必须位于HTML的第一行,且位于<html>标签之前

大部分标签

可以包含一些属性,属性无先后顺序,属性也可以省略,如<h1 id="title">标题</h1>

link:src/02_HTML的基本结构_常见格式.html[role=include]

HTML 的基本定义

标签:用"<"和">"括起来的叫做标签,如<p>、</p>、<br>等,建议用小写。
元素:一对标签包含的所有代码,元素内容是开始标签和结束标签之间的内容

开始标签	元素内容	结束标签
<div>	这里是元素内容	</div>

属性:HTML标签可以拥有属性。
- 属性总是在开始标签中规定,并且属性总是以名称/值对的形式出现,如<div name="value">属性</div>。
- 其中,属性值始终被包裹在引号内,通常使用双引号。

link:src/03_HTML的基本结构_基本定义.html[role=include]

HTML 的常用开发工具

"工欲善其事,必先利其器",对于前端开发人员来说,好工具会带来事半功倍的效果。

常见的工具HTML开发工具
名称	网址	描述
Visual Studio Code	http://www.sublimetext.com/	是一款轻量级的编辑器,支持各种编程语言
WebStorm	https://atom.io/	是GitHub专门为程序员推出的一款跨平台文本编辑器
HBuilder	https://notepad-plus-plus.org/	是一款文本编辑器,小巧、高效,且支持多种编程语言

HTML 的全局属性

HTML 的全局标准属性

全局标准属性适用于大多数元素。在 HTML 规范中,规定了 8 个全局标准属性。

属性	作用	描述
class	定义元素的类名	通常用于指向CSS样式表中的类偶尔会通过JavaScript改变所有具有class的元素,class属性通常用在<body>元素内部,不能在:<base>、<head>、<html>、<meta>中使用
id	指定元素的唯一id	在HTML文档中要具有唯一性可以通过JavaScript和CSS为指定的id改变或添加样式、动作等
style	指定元素的行内样式	该属性会覆盖任何全局的样式设定,如<style>元素定义的样式、父元素定义的样式
title	指定元素的额外信息	鼠标移到元素上时显示定义的提示文本
accesskey	指定激活某个元素的快捷键	支持的元素有<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>
tabindex	指定元素在Tab键下的次序	用于指定元素在Tab键下的次序。支持tabindex属性的元素有<a>、<area>、<button>、<input>、<lable>、<legend>、<textarea>
dir	指定元素中内容的文本方向	dir的属性值只有ltr和rtl两种,含义分别是left to right和right to right。对大部分有文本内容的元素生效,不生效的元素有<base>、<br>、<frame>、<frameset>、<hr>、<iframe>、<param>、<script>
lang	指定元素内容的语言	由于涉及元素内容的语言,与dir属性一样,对大部分有文本内容的元素生效,不生效的元素有<base>、<br>、<frame>、<frameset>、<hr>、<iframe>、<param>、<script>

HTML 的全局事件属性

事件是针对某个控件或者元素而言。
- 针对按钮,有单击事件或者按下事件;
- 针对勾选框,有选中和取消事件;
- 针对文本框,有获取输入焦点事件、文本变化事件等。
事件可以通过 JavaScript 直接触发,也可以通过全局事件属性触发,大致分为以下几类。

事件	表示	描述
Window 窗口事件	onload	在页面加载结束之后触发
Window 窗口事件	onunload	在用户从页面离开时触发,如单击跳转、页面重载、关闭浏览器窗口等
Form 表单事件	onblur	当元素失去焦点时触发
	onchange	在元素值被改变时触发
	onfocus	当元素获得焦点时触发
	onreset	当表单中的重置按钮被单击时触发
	onselect	当元素中文本被选中后触发
	onsubmit	在提交表单时触发
Keyboard键盘事件	onkeydown	在用户按下按键时触发
	onkeypress	在用户按下按键后,按着按键时触发。该属性不会对所有按键生效
	onkeyup	当用户释放按键时触发
Mouse 鼠标事件	onclick	当在元素上单击鼠标时触发
	ondbclick	当在元素上双击鼠标时触发
	onmousedown	当在元素上按下鼠标按钮时触发
	onmousemove	当鼠标指针移动到元素上触发
	onmouseout	当鼠标指针移出元素时触发
	onmouseover	当鼠标指针移动到元素上时触发
	onmouseup	当在元素上释放鼠标按钮时触发
Media 媒体事件	onabort	当退出媒体播放器时触发
Media 媒体事件	onwaiting	当媒体已停止播放但打算继续播放时触发

link:src/04_HTML的全局事件属性.html[role=include]

HTML 的主体元素

一个完整的HTML文档大体包含以下标签

<!DOCTYPE>

声明文档类型

<html>

HTML元素真正的根元素

<head>

定义HTML文档的文档头

<body>

定义HTML文档的文档体

05_HTML的主体元素.html

link:src/05_HTML的主体元素.html[role=include]

<head>

其中 <head> 可以包含如下元素

<title>

定义HTML文档的标题

<base>

为页面上的所有链接规定默认地址或者默认目标(target)

<link>

定义文档与外部资源之间的关系,常用于链接CSS样式表

<meta>

提供关于HTML的元数据,不会显示在页面,一般用于向浏览器传递信息或命令,作为搜索引擎,或者用于其他Web服务

<style>

用于为HTML文档定义样式信息

用于定义客户端脚本,如JavaScript

link:src/06_HTML的主体元素_<head>.html[role=include]

<meta>元素

一个<head>可以包含多个<meta>元素。

<meta>元素共有两个属性,分别是name属性和http-equiv属性。
<meta>的name属性主要用于描述网页,如网页的关键词、叙述等
语法格式:<meta name="参数" content="具体的描述">

name	example	description
keywords	<meta name="keywords" content="苹果">	告诉搜索引擎该网页的关键字
description	<meta name="description" content="水果">	告诉搜素引擎该网页的主要内容
robots	<meta name="robots" content="all">	告诉搜索引擎网页是否需要索引
author	<meta name="author" content="SongXiang">	标注网页的作者,后面也会有邮箱
generator	<meta name="generator" content="VS Code">	标注该网页是什么软件编写的
copyright	<meta name="copyright" content="book">	用于标注版权信息
revisit-after	<meta name="revisit-after" content="10 days">	设置一个爬虫的重访时间

<meta> 的 http-equiv 属性相当于 http 的文件头,发送信息给浏览器,正确和精确显示内容语法格式:
- <meta http-equiv="参数" content="具体的描述">

http-fquiv	example	description
content-type	<meta http-equiv="content-type" content="text/html;charset=utf8">	字符集,utf-8
cache-control	<meta http-equiv="cache-control" content="no-cache">	如何缓存
expires	<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT">	网页到期时间
refresh	<meta http-equiv="refresh" content="5;URL=http://www.baidu.com">	5秒跳转
Set-Cookie	<meta http-equiv="Set-Cookie" content="cookievalue=tokenID;path=/;expries=Monday,31-Dec-18 10:00:00 GMT">	设置网页过期

07_HTML的主体元素_<meta>.html

link:src/07_HTML的主体元素_<meta>.html[role=include]

HTML 的无语义元素

HTML中每个标签都有自己的语义。例如<body>表示主体,<h1>表示一级标题。

但有两个无语义的标签,<div> 和 <span>

<span> 是内联标签,在一行文本中,前后衔接
<div> 是块级标签,前后有换行,划分节或者区域

link:src/08_HTML的无语义元素.html[role=include]

标签	描述
展示	<b>
定义粗体文本	<big>
定义大号字	<em>
定义着重文字	<i>
定义斜体字	<small>
定义小号字	<strong>
定义加重语气	<sub>
定义上标字	<sup>
定义下标字	<ins>
定义插入字	<del>

属性	描述
_self	在超链接所在框架或者窗口中打开目标页面
_blank	在新浏览器窗口中打开目标页面
_parent	将目标页面载入含有该链接框架的父框架集或者父窗口中
_top	在当前的整个浏览器窗口中打开目标页面,因此会删除所有框架

shape属性	解释	coord属性	解释
circle	圆形	x,y,r	(x,y)为圆心坐标,r为半径
rect	矩形	x1,y1;x2,y2	(x1,y1)为左上角坐标(x2,y2)为右下角坐标
poly	多边形	x1,y1l;x2,y2;x3,y3;x4,y4;...	(x1,y1),(x2,y2),(x3,y3),...分别是多边形各个点的坐标

属性	含义
border	设置表格的边框宽度
width	设置表格的宽
height	设置表格的高
cellpadding	设置内边距
cellspacing	设置外边距

显示字符	十进制编号	实体字符
"	"	"
&	&	&
<	<	<
>	>	>
空格,用于显示连续的空格	\&#160

Swot/learning

HTML基础

HTML 简介

HTML 概述

HTML 的基本结构

HTML 的基本定义

HTML 的常用开发工具

HTML 的全局属性

HTML 的全局标准属性

HTML 的全局事件属性

HTML 的主体元素

<head>

<meta>元素

HTML 的无语义元素

HTML 的标题元素

HTML 的段落元素

HTML 的注释元素

HTML 的格式化元素

普通文本

计算机输出

引用和术语

HTML 的图片元素

HTML 的超链接元素

文本链接和锚点链接

图像链接

图像热区链接

其它链接

HTML 的列表元素

无序列表

有序列表

定义列表

HTML 的表格元素

<table>标签常用属性

<td>标签常用属性

表格内容分组

HTML 的表单元素

表单控件<input>元素

表单控件<select>

表单控件<textarea>

HTML 的框架元素

HTML 的预留字符

简介

发行版

贡献者

语言

近期动态

搜索帮助