怎么快速上手写一篇HTML文档？_手动写一个html的-CSDN博客

这篇博客介绍了HTML的基础知识，包括HTML的定义、标签、元素、属性等内容。讲解了如何创建HTML文档，如设置标题、段落、链接、图像等，并强调了样式和属性的使用，以及HTML<!DOCTYPE>和<meta>标签的作用。文章还提醒读者避免使用已废弃的属性，提倡使用样式来替代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

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

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

HTML 文档

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

html文档可以直接保存为htm或者html格式，两者没啥区别。可以通过浏览器直接打开。

HTML 元素

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

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

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。但是建议全部使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

1、比如有一个标题，想要在页面居中显示。
<h1 align="center">这是一级标题</h1>
2、给背景设置颜色
<body bgcolor="green">这个背景是绿色的</body>

注意：始终为属性值加引号。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
name='Bill "HelloWorld" Gates'
不过，有很多属性都是被废弃的，在以后的HTML中这些属性都不再使用了，包括<center>、<color>等等，所以，应当尽量避免使用这些属性和标签，而是通过样式来代替。（就是下面会介绍的style）

----------------------------------------------------------------------------------------------------------------------------------

HTML<!DOCTYPE> 标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset

如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

不过一般使用<!DOCTYPE html>即可。

其他两种暂不介绍。

注：<!DOCTYPE>标签没有结束标签！

HTML <meta> 标签

注：

<meta> 标签永远位于 head 元素内部。
元数据总是以名称/值的形式被成对传递的。

content属性

定义与 http-equiv 或 name 属性相关的元信息。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

http-equiv属性

http-equiv 属性为名称/值对提供了名称，并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

---------------------------------------------------------------------------------------------------------------------------------

HTML 标题

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

标题很重要! 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引,用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<h1>标题1</h1>
<h2>标题2</h2>
...
<h6>标题6</h6>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。)

HTML 主体

body 元素定义文档的主体。它包含文档的所有内容（比如文本、图像、颜色和图形等等。）

<body>这里面装入你所有的主体内容</body>

HTML文档的基本结构

<html>
<head>
</head>
    <body>
        ......

    </body>
</html>

上面就是一个HTML文档的一个结构。在真实页面中，会有很多嵌套标签，但是也就是现在这种结构的各种配合使用。

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。
这个写法和其他标签稍微有点差异，必须要href,同时链接的地址要写在<a>里面，开始标签和结束标签之间的文字被作为页面上显示的超级链接来显示。

有两种链接，一种是打开其他页面，一种是打开本文档另一个地方。

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

打开另一个文档---href

1.文字链接

<a href="链接地址">这是一个链接(网页上显示的文字说明)</a>

2.图像链接

<a href="www.baidu.com"><img border="0" src="/i/eg_button.gif" />
src后面是图片的地址
</a>

链接在何处显示--target属性
使用 Target 属性，你可以定义被链接的文档在何处显示.

如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。其他类似值还有_self,_parent,_top等。

注意：这个一定要加_，不要忘记！

打开本页面的另一处---name

name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

创建一个书签（锚）

创建一个链接指向锚：在地址里写 #锚

也可以在其他页面创建一个链接指向这个锚：直接在URL后面加上 #锚就行。

<a href="www.baidu.com#label">链接</a>

可以使用 id 属性来替代 name 属性，命名锚同样有效

小知识：

在书写URL时，地址最后一定要加个 / ！！！

如果要文本直接显示空格，使用%20 ，可以直接加在URL后面。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<img>是空标签，它只包含属性，并且没有闭合标签。如果要在页面上显示图像，需要源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

--后面指定图片名字，大小

设置背景图片

gif 和 jpg 文件均可用作 HTML 背景，如果图像小于页面，图像会进行重复。

替换文本属性（Alt）

使用图像标签就不得不提到这个alt。它是用来为图像定义一串预备的可替换的文本。即当浏览器无法载入图像时，在页面上显示的内容。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。在需要用到分割线的地方放一个<hr />就行，这是一个空标签。

HTML 注释

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

注释是这样写的：

注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>意思就是<br />在同一个段落里<br />我想要分行<br /><br />同时还能增加空行</p>

小知识：HTML对内容的显示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即如果要排版，直接在源代码中排是不行滴！！
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

-------------------------------------------------------------------------------------------------------------------------------

HTML 样式

style 属性用于改变 HTML 元素的样式。

style 属性的作用：
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义.

总结：font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸，在后面加上冒号：每个属性之间用分号；隔开。
具体的属性有很多很多。一样的，属性都是放在开始标签里。
<html>
<body style="background-color:PowderBlue;">
<h1>这是标题，没有样式！</h1>
<p style="font-family:verdana;color:white">
这是段落1，字体是啥不知道，反正设置了，颜色是白色</p>
<p style="font-family:times;color:red;text-align:center">
这是段落2，字体不知道，红色,再加一个居中显示</p>
<p style="font-size:30px">这我知道，设置了字体的大小</p>
</body>
</html>

文本格式化

对文本样式上的设置。

<em>这个貌似是加粗</em>
<br />
<i>这个貌似还是加粗，但是跟上面字体不一样</i>
<br />
<small>这个好理解，小字号</small>
<br />

<sub>这个可以打出下标</sub>
<br />

<sup>这个可以打出上标</sup>

预格式文本

之前提到过浏览器是会忽视掉源代码中的空格和换行的，直接在源代码里设置格式是不行的，但是有一种方法可以让文本保留源代码的格式。这个就是pre标签。
<pre>
只要在这个格式里，
所有的格式   都会被保留
所以特别适合写代码
for i=1 to 10
   print i
   next i
   </pre>

地址

在HTML文档里填写地址，这个功能估计用的不多，完全可以用其他的样式来代替。
<address>
这篇文章来自<a href="https://mp.csdn.net/postlist/">花果山来的和尚</a>
<br />
上海市闵行区***村234弄
</address>

缩写/注释

这个功能可以在页面上显示一些文字，在鼠标移上去后可以显示其他文字（解释或者说明）。不过这个教程里教的这个方法只对IE5中的acronym有效？？？
下面这两个方法显示的效果都是一样的，有什么区别暂时不知道。

必须要写在title=后面，用引号引起来。

文字方向 <bdo></bdo>

这个功能简直毫无用处。它的效果是把一句话里的字，顺序完全颠倒一下。比如123，变成321.
并且这个功能还需要浏览器支持bi-directional override (bdo)，测试过火狐不行。
<bdo dir="rt1">
这是一句话.
</bdo>

块引用

有时候需要引用一些文字，段落啊等等，需要区别于正文的格式。可以采用这种。

它分两种，一种是长的引用语，一种是短的引用语。在使用长引用语的样式时，引用语会自动换行，并且会插入外边距；短的不会有任何特殊的显示。

长引用:<blockquote></blockquote>

鲁迅曾经说过：
<blockquote>

真的勇士，敢于直面惨淡的人生，敢于正视淋漓的鲜血。世上本没有路，走的人多了，也就成了路。

</blockquote>

短引用：<q></q>

顾城有诗：
<q>
南风在断断续续的哭着
</q>

删除字效果和下划线效果

这个功能也是要看浏览器，有的会显示不出来。
删除线效果
<del>删除线</del>
下划线效果
<ins>下划线</ins>

数学变量

写数学公式可以用这个功能<var> E=mc2
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup></p>

外部样式表

当样式需要被应用到很多页面时，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表

内部样式表应用于单个文件，通常也是放在head里，对整个HTML文档起效。

内联样式

内联样式作用于单个元素，上面讲的大多都是用的内联样式。

----------------------------------------------------------------------------------------------------------------------------------

下面就是运用上面提到的各种标签写的一个HTML文档，可以复制保存为HTML文件后在浏览器打开观看效果。

<html>
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <!--上面这是一个元信息，在这里可以定义网页的信息编码，如果不写这个，可能胡显示乱码---z这句话是一个注释，是不会显示在网页里的<-->
</head>
    <title align="center">我的首页</title>
<body style="background-color:PowderBlue;">
	
<img src="E:\图片\monkey.jpeg" width="102" height="122" /> 
<a name="top">顶部</a>
<h1 style="font-family:verdana;color:white">我的博客</h1>
<h2>第一篇文章</h2>

<p style="font-size:15px">我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即如果要排版，直接在源代码中排是不行滴！！
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。</p>
<br />
<em>另外一种显示方式</em>
	<pre>
	我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即如果要排版，直接在源代码中排是不行滴！！
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
</pre>
<br />	
<hr />
<br />

<em style="font-family:times;color:blue">下面是一首诗</em>
<p>树绕村庄，水满陂塘<br />倚东风<br />豪兴徜徉<br /><br />小园几许<br />收尽春光<br />有桃花红，梨花白，菜花黄</p>
<p style="font-family:times;color:blue">下面我们换一种方式来看另外首诗</p>
<pre>
	单车欲问边，属国过居延。
	征蓬出汉塞，归雁入胡天。
	大漠孤烟直，长河落日圆。
	萧关逢候骑，都护在燕然。
</pre>
<br />
<a href="https://blog.csdn.net/amrenyu/article/details/80642616/">查看更多</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#top"><small>返回顶部</small></a>
<br />
</body>
</html>

阿弥陀佛~~~