html基础教程

hjz713 · 发表于 2023-1-4 13:51:31

本帖最后由 hjz713 于 2023-1-4 13:54 编辑

由于文章是在CSDN的MD编辑器上写的,表格无法转换BBCode，更好的排版在这里：https://blog.csdn.net/hjz0713/article/details/128545474
前言

这是我总结的HTML基础内容，会参些自己的见解，有错误或歧义请联系我。

HTML是什么？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来编写站点。 HTML 很容易学习。（~~至少比PHP好学~~）

实例展示

教程包含了若干 HTML 实例。注意：本教程所引用的网址均为虚拟主机提供的免费网址。我不对非我自己的网站（hjz0713.top开头）的隐私泄露的任何处理！

注意：对于中文网页需要使用<meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程</title>
</head>
<body>
<h1>标题(h1)</h1>
<p>段落(p)</p>
</body>
</html>

复制代码

点击这里查看实例。

HTML文档后缀

*.html
*.htm
以上两种后缀名没有区别，都可以使用，且使用同一语法。

正片开始

HTML简介

标签

<!DOCTYPE html> 声明为 HTML5 文档 <html>元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8">定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1>元素定义一个大标题 <p>元素定义一个段落

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签。

基础

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

复制代码

here 下文都将用here来代替实例展示

HTML 段落

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

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

复制代码

here

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

提示:需要在 href 属性中指定链接的地址。

<a href="https://www.hjz0713.top">这是一个链接</a>

复制代码

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

<img decoding="async" src="/images/logo.png" width="258" height="39" />

复制代码

HTML 元素

HTML 文档由 HTML 元素定义。开始标签 | 元素内容 | 结束标签 ------------|---------------|------------ <p>| 这是一个段落 | </p> <a href="default.htm"> | 这是一个链接| </a> <br>| 换行 |无

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

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

HTML 文档由相互嵌套的 HTML 元素构成。

<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>

复制代码

以上文档包含3个HTML嵌套元素。

HTML 实例解析

<p>元素:

<p>这是第一个段落。</p> 这个<p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签<p> 以及一个结束标签 </p>. 元素内容是: <p>这是第一个段落。</p> <body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

复制代码

<body>元素定义了 HTML 文档的主体。这个元素拥有一个开始标签<body>以及一个结束标签</body>。元素内容是另一个 HTML 元素（<p> 元素）。

<html> 元素：

<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>

复制代码

<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>. 元素内容是另一个 HTML 元素（<body> 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

复制代码

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br>就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使<br> 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。所以许多网站都使用大写的 HTML 标签。

本教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML版本中强制使用小写。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

HTML 属性常用引用属性值

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

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

复制代码

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。下面列出了适用于大多数 HTML 元素的属性：属性 | 描述 ---|--- lass |为html元素定义一个或多个类名（classname）(类名从样式文件引入) id |定义元素的唯一id style |规定元素的行内样式（inline style） title |描述了元素的额外信息 (作为工具条使用)

HTML 标题

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

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

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

复制代码

标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

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

hr 元素可用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

复制代码

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

复制代码

HTML 标签参考

标签	描述
<html>	定义 HTML 文档
<body>	定义文档的主体
<h1> - <h6>	定义 HTML 标题
<hr>	定义水平线
<!--注释内容-->	定义注释

HTML 文本格式化

加粗文本

斜体文本

这是下标和 ^上标^

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

复制代码

HTML 格式化标签

HTML 使用标签<b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

HTML 文本格式化标签参考

标签	描述
<b>	定义粗体
<em>	定义着重
<i>	定义斜体
<small>	定义小号字体
<strong>	定义粗体
<sub>	定义下标
<sup>	定义上标
<ins>	定义插入（引用）
<del>	定义删除线

HTML "计算机输出" 标签

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

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个项目

HTML <head>

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML <title> 元素

<title>标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>

复制代码

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于<head> 区域

HTML <script> 元素

<script>标签用于加载脚本文件，如： JavaScript。

<script>元素在以后介绍

HTML head 元素一览

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML CSS脚本

在此查看效果

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>
<div style="color:#000000;">and more...</div>
</div>

复制代码

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

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

内联样式- 在HTML元素中使用"style" 属性内部样式表 -在HTML文档头部<head> 区域使用<style> 元素来包含CSS 外部引用 - 使用外部 CSS 文件最好的方式是通过外部引用CSS文件.

看到这啦！休息一下去喝点水休息一下！

你已经学会了90%啦！加油！

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 iframe语法:

<iframe src="URL"></iframe>

HTML 颜色值

颜色由红(R)、绿(G)、蓝(B)组成。

颜色值颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

颜色实例 3位十六进制颜色值 |6位十六进制颜色值 |RGB ---|---|--- #000 |#000000| rgb(0,0,0) #F00| #FF0000 |rgb(255,0,0) #0F0 |#00FF00| rgb(0,255,0) #00F |#0000FF |rgb(0,0,255) #FF0|#FFFF00 |rgb(255,255,0) #0FF |#00FFFF |rgb(0,255,255) #F0F |#FF00FF |rgb(255,0,255) #888 |#888888 |rgb(136,136,136) #FFF| #FFFFFF| rgb(255,255,255)

通过十六进制（Hex）的颜色值排序

颜色名	HEX
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuseg	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru #CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

HTML 字符实体

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name;
或
&#entity_number;

复制代码

如需显示小于号，我们必须这样写：< 或 <或<

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格(Non-breaking Space) HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。

结合音标符发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例: 音标符| 字符 |Construct |输出结果 ---|---|---|--- ̀| a| à| à ́ |a |á |á ̂ |a |â| â ̃| a| ã |ã ̀ |O| Ò| Ò ́ |O |Ó| Ó ̂ |O| Ô| Ô ̃| O| Õ |Õ

HTML 速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

复制代码

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）

复制代码

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

复制代码

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

复制代码

图片（Images）

<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

复制代码

无序列表

<ul>
<li>项目</li>
<li>项目</li>
</ul>

复制代码

有序列表

<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

复制代码

定义列表

<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

复制代码

表格（Tables）

<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

复制代码

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>

复制代码

实体（Entities）

< 等同于 <
> 等同于 >
© 等同于 ©

复制代码

总结

恭喜，你已经完成了 HTML 的学习！ HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 的关键是标签，其作用是指示将出现的内容。

现在，你已学完HTML，接下来该学习什么呢？

学习 CSS CSS被用来同时控制多重网页的样式和布局。通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。
学习 JavaScript JavaScript 可以让你的网页更加生动。如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。 JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。

xiaomeng · 发表于 2023-1-4 20:55:40

码龄才67天

还是菜了点，学完html才哪到哪，后面还有变态的js等着你呢

我就是，js怎么学都学不会，之后就和前端告别了

YFSafe · 发表于 2023-1-4 22:20:17

很不错！
希望楼主持续输出高质量文章

hjz713 · 发表于 2023-1-4 22:38:21

xiaomeng 发表于 2023-1-4 20:55
码龄才67天还是菜了点，学完html才哪到哪，后面还有变态的js等着你呢

我这号才注册

之前有个号码龄2年

hjz713 · 发表于 2023-1-4 22:39:20

本帖最后由 hjz713 于 2023-5-20 16:00 编辑

js还好，php就

[原创] html基础教程

评分

本帖被以下淘专辑推荐:

相关帖子

最佳新人

活跃会员

灌水之王