【Html从头开始】-1 HTML文档基本格式

最新推荐文章于 2025-04-23 09:58:31 发布

原创最新推荐文章于 2025-04-23 09:58:31 发布 · 5.7k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#html

Html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML的基本概念、文档结构以及常用标签，包括DOCTYPE、html、head、meta、title、body、p、align、style、color、u、del等，并通过实例展示了如何使用这些标签创建网页。此外，还提供了代码示例，帮助读者理解HTML在网页制作中的应用。

一、html是什么?

html是一种超文本标记语言,也是目前网络上应用最为广泛的语言.它主要通过html标记对网页中的文本图片声音等内容进行描述,是构成网页文档的基础。

二、html文档的基本格式

html文档的文件后缀名为 .html，其中包括几个基本结构。

1、<!DOCTYPE>标记:

标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，如【demo1】中使用的是标准的html格式文档。

在开头处使用<!DOCTYPE>标记为所有的 HTML 文档指定 HTML 版本和类型，只有这样浏览器才能将该网页作为指定的文档类型进行解析。

2、`<html></html>`标记:

<html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，<html>标记标志着 HTML 文档的开始，<html>标记标志着 HTML 文档的结束，在它们之间的是文档的头部和主体内容。

3、`<head></head>`标记:

<head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个 HTML 文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4、`<meta></meta>`标记:

META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<title>之间)。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集(例如本例的utf-8编码格式)、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。

5、`<title></title>`标记:

能在栏目上显示你需要的文字,例如<title>CNDS博客</title>

6、`<body></body>`标记:

<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个 HTML 文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

7、举例

<span style="font-size: 160px;">
<!DOCTYPE html>
<br>
<html lang="en"><br><head><br>    
<meta charset="UTF-8"><br>    
<title>CNDS博客</title><br>
</head><br>
<body><br>我的第一个网页!<br></body>
<br>
</html></span>

三、代码标签

1、`<p>`标签定义段落

<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

2、align文本水平对齐方式

语法：<td align="value">
属性：
1）left 左对齐内容（默认值）。
2）right 右对齐内容。
3）center 居中对齐内容。
4）justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
5）char 将内容对准指定字符。

3、style定义文本样式

语法：<element style="value">
style_definition ：一个或多个由分号分隔的 CSS 属性和值。
举例：

<h1 style="color:blue; text-align:center">This is a header</h1>
<p style="color:red">This is a paragraph.</p>

4、color定义文本颜色

color 颜色值可以通过以下方式进行设置：
1）颜色名称：red、blue、white…，举例：color: red;
2）十六进制： #RRGGBB和#RGB，#后面跟6位或者3位十六进制字符，举例：color: #000f9f;
3）RGB：rgb(R,G,B)，取值可以是0~255的整数或者百分比，举例：color:rgb(156,96,24);；
4）RGBA：rgba(R,G,B,a)其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度（a为透明度，0为透明，1为不透明）；
5）HSL：hsl(H,S,L)，色相-饱和度-明度，色相表示一个色环的一个角度，饱和度和明度使用百分比来表示；
6）HSLA：hsla(H,S,L,a)，其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度（a为透明度，0为透明，1为不透明）；

5、`<u>`显示的字带有下划线

用法举例：

<p>在这段文字的后面<u>添加了下划线</u>。</p>

6、`<del>`显示的字带有删除线

用法举例：

<p>My favorite color is <del>blue</del>!</p>

7、举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CNDS博客</title>
</head>
<body>
<p align="center"><strong>绝句</strong></p>
<p align="right"><em>作者：杜甫</em></p>
<p style="color: blue">两个黄鹂鸣翠柳，<p>
<p><u>一行白鹭上青天。</u></p>
<p style="color: blue">窗含西岭千秋雪，</p>
<p><del> 门泊东吴万里船</del></p>
</body>
</html>

其他标签用途和语法，可参考：
按字母排序https://www.runoob.com/tags/html-reference.html
按功能排序https://www.runoob.com/tags/ref-byfunc.html