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

关注

原创最新推荐文章于 2026-02-11 02:15:06 发布 5.9k 阅读 AI 写同款· GEO 优化 ›

从头学前端-36：HTML原生表单大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十六篇-《表单》本系列文章在掘金首发，编写不易转载请获得允许写在前面本篇文章将来介绍HTML中原生表单的内容。 HTML表单主要作用你是用于收集不同类型的用户输入并与服务端进行交互。 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

收录于