目录
Html文档结构
Html文档由头部head和主题body两个部分。
头部head标记中可以定义标题、样式等，头部信息是不显示在网页上。
主体body标记中可以定义段落、标题字、超链接、脚本、表格、表单等元素，主题内容是网页要显示的信息。
Html 文档基本结构
<!doctype html>
<html lang=”en”> 根标签
<head>
<meta charset=”UTF-8”>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””> 这是头部
<title>web网页标题</title>
</head>
<body>
…… 这是主体
</body>
</html>例子：
<!--
程序名称：edu_2_1_1.html
程序功能：html文档结构
设计人员：web前端开发工程师
设计时间：2026/6/16
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html文档结构</title>
<style type="text/css">
p{font-size:24px; /* 定义字体大小 */}
</style>
</head>
<body>
<p>html文档结构有head、body标记组成</p>
<h3>标题字</h3>
<hr size=3 color="red">
<a href="https://blog.csdn.net/2301_77161927?spm=1000.2115.3001.5343">csdn</a>
<script tpye="text/javascript">
document.write("This is the webpage"); //向>页面输出信息
</script>
</body>
</html>代码解释
代码中第9~15行是头部标记所包含的代码，头部标记所包含的内容不会在网页上显示；第16~24行是主体标记所包含的代码，也是网页要显示的主要信息。
HTML文档以<html>标记开始，以<html>标记结束。所有的html代码都位于这两个标记之间。浏览器根据html文档类型和内容来解释整个网页，然后呈现给用户。一般情况下，每个html文档都应该有且只有一个html、head、和body元素。
头部head
Html文档的头部head标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部head标记所包含的信息一般不会显示在网页上。
标题title标记
基本语法
<title>标题信息显示在浏览器的标题栏上</title>(以上一个例子为主）
语法说明：
title标记是成对标记，<title>是开始标记，</title>是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。
元信息meta标记（是头部标记，meta写在头部）
meta标记用来描述一个html网页文档的属性，也称为元信息（meta-information)，这些信息并不会显示在浏览器的页面中，例如作者、日期和时间、网页描述、关键字、页面刷新等。meta标记是单个标记，位于文档的头部，起属性定义了与文档相关的“名称/值”对。
meta标记
基本语法
<meta name=”” content=””>
<meta http-equiv=”” content=””>属性说明
meta属性主要分为两组：
name属性语content属性；
name属性用于描述网页，它是“名称/值”形式中的名称，name属性的值所描述的内容通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords和robots。
http-equiv属性与content属性。
http-equiv属性用于提供http协议的响应头报文，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。它是“名称/值”形式中的名称，http-equiv属性的值所描述的内容通过content属性表示。meta标记的属性、取值和说明。
meta标记属性
如表所示：
| 属性 | 值 | 说明 |
| name | author description keyworks generator | 定义网页作者 定义网页简短描述 定义网页关键词 定义编辑器 |
| http-equiv | content-type expires refresh set-cookie | 内容类型 网页缓存过期时间 刷新与跳转（重定向）页面 如果网页过期，那么存盘的cookie将被删除 |
| content | some_text | 定义与http-equiv或name属性相关的元信息 |
meta标记的使用方法
1、name属性设置
| 1、<meta name="ketwords" content="信息参数" /> |
| 2、<meta naem="description" content="信息参数" /> |
| 3、<meta naem="author" content="信息参数" /> |
| 4、<meta naem="generator" content="信息参数" /> |
| 5、<meta naem="copyright" content="信息参数" /> |
| 6、<meta naem="robots" content="信息参数" /> |
robots告诉搜索引擎机器人抓取哪些页面。其属性取值及说明。
1、2、robots属性
| 值 | 说明 |
| all | 文件将被检索，且页面上的链接可以被查询 |
| none | 文件将不被检索，且页面上的链接不可以被查询 |
| index | 文件将被检索 |
| noindex | 文件将不被检索，但页面上的链接可以被查询 |
| follow | 页面上的链接可以被查询 |
| nofollow | 文件将被检索，但页面上的链接不可以被查询 |
1、3、http-equiv属性设置
| <meta http-equiv="cache-control " content="no-cache">; |
| <meta http-equiv="refresh" content="时间; url=网址参数">; |
| <meta http-equiv="content-type" content="test/html; charset=信息参数" /> |
| <meta http-equiv="expires" content="信息参数" /> |
第一行说明禁止浏览器从本地计算机的缓存中访问页面内容，同时访问者将无法脱机浏览。
第二行说明多长时间网页自动刷新，加上URL中的网址参数就代表多长时间自动链接其他网站。
第三行中的content-type代表的是http协议的头部，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content、content中的内容其实就是各个参数的变量值。
第四行设置meta标记的expires（期限），可以用于设定网页在缓存中的过期时间。一旦网页过期，必须到服务器上重新传输。
网页到期时间设置格式如下：
| <meta http-equiv="expires" content="Sun 16 Jun 2026 6:16:26 GMT"> |
Sun表示星期天，16表示：哪一个月的多少天，Jun表示6月 2026表示：年（year）
注意：必须使用GMT的时间格式，或直接设为0（数字表示多少时间后过期）。
主体body
主体body是一个web页面的主要部分，其设置内容是读者实际看到的网页信息。所有www文档的主体部分都是由body标记定义的。在主体body标记中可以放置网页中所有的内容，如图片】图像、表格、文字、超链接等元素。
body标记（基本语法）
<body>
这是网页的内容…………。
</body>语法说明：
<body>是开始标记，</body>是结束标记。两者之间所包括的内容为网页上显示的信息。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web前端开发-csdn-jingyu飞鸟</title>
<style type="text/css">
p{fext-indent:2em;}
</style>
</head>
<body text="green">
<h3 align="center">Web前端开发-csdn-jingyu飞鸟</h3>
<hr color="red">
<a href="https://blog.csdn.net/2301_77161927?spm=1000.2115.3001.5343">csdn-jingyu飞鸟</a>
<script type="text/javascript">
</script>
<p>《Web前端开发技术》,jingyu飞鸟欢迎您，--等你，
轻牵我的手。醒来觉得甚是爱你。</P>
</body>
</html>
代码解释：10~18是主体部分，第11行是插入h3标记修饰标题，第 12行是插入水平分隔标记并设置成红色，第17行是插入一个段落p标记显示内容。
body标记属性
设置body标记属性可以改变页面的显示效果。该标记主要属性有topmargin、leftmargin、text、bgcolor、link、alink、vlink。HTML5中可以使用CSS属性代替。（属性值用 " " 或 ' ' 括起来）。
基本语法：
<body leftmargin="50px" topmargin="50px" text="#000000" bgcolor="#339999" link="blue" alink="white" vlink="red" background="body_image.jpg">属性说明：
body标记属性、取值及说明
| 属性 | 值 | 说明 |
| text | rgb（r,g,b） rgb(r%,g%,b%) #rrggbb或#rgb colorname | rgb函数（整数），r、b、b、取值范围为0~255。 rgb函数（百分比），r、g、b、的值范围为0~100。 十六进制数据（6位或3位），如#rrggbb或#rgb，r、g、b、为十六进制数、取值范围：0~9、A~F。例如：#3F0，可转换为#33FF00。 颜色的英文名称，如red（红）、green（绿）、blue（蓝）等。 |
| bgcolor | rgb（r,g,b） rgb(r%,g%,b%) #rrggbb或#rgb colorname | 规定文档的背景颜色。不赞成使用。 |
| alink | rgb（r,g,b） rgb(r%,g%,b%) #rrggbb或#rgb colorname | 规定文档中活动链接的颜色。不赞成使用。 |
| link | rgb（r,g,b） rgb(r%,g%,b%) #rrggbb或#rgb colorname | 规定文档中未访问链接的默认颜色。不赞成使用。 |
| vlink | rgb（r,g,b） rgb(r%,g%,b%) #rrggbb或#rgb colorname | 规定文档中已被访问链接的颜色。不赞成使用。 |
| background | URL | 规定文档的背景图像。不赞成使用。 |
| topmargin | pixel | 规定文档中上边距的大小。 |
| leftmargin | pixel | 规定文档中左边距的大小。 |
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdn-jingyu飞鸟-Web前端-body属性</title>
<meta name="generator" content="jingyu飞鸟">
<meta name="author" content="等你，轻牵我的手。">
<style type="text/css">
div{background: #9ccccc;width:600px;height: 160px;}
</style>
</head>
<body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="#rgb(0%,100%,0%)" alink="white" vlink="red" topmargin="60px" leftmargin="60px" >
<div id="" class="">
<p>《Web前端开发技术》,jingyu飞鸟欢迎您，--等你，轻牵我的手。醒来觉得甚是爱你。</p>
jingyu飞鸟：网站导航
<a href="https://blog.csdn.net/2301_77161927?spm=1000.2115.3001.5343">csdn-jingyu飞鸟</a>
</div>
</body>
</html>代码解释：第9行定义div的背景、宽度、和高度；第12行设置body属性，其中设置网页信息显示的颜色为黑色、背景色为#f0f0f0。链接的颜色为绿色、活动链接为白色、访问或链接为红色、网页中的文档左边距、上边距均为60px；第14行插入1个段落；第16行插入1个超链接。
HTML基本语法
html文档结构主要由若干标记构成，随着页面复杂程度的不同，所使用的标记数量和标记属性设置也不相同。掌握html标记语法和标记属性语法是设计web页面的基础。
标记类型
html标记是由尖括号包围的关键词，用于说明知道内容的外貌和特征，也可称为标签（Tag），本书统一约定为标记。<html></html>、<head></head>、<body></body>、<br>、<hr>等都是标记。标记类型通常分为单（个）标记和双（成对）标记两种类型。
1、单（个）标记
仅使用单个标记就能够表达特定的意思，称为单（个）标记。W3C定义的新标准（XHTML1.0/HTML4.01）建议单个标记应以 " / " 结尾，即<标记名称/>。
基本语法
<标记名称>或<标记名称/>语法说明
最常用的单个标记有<br>、<hr>、<link>。<br>、<br/>标记换行，<hr>、<hr/>表示水平分隔线，<link>表示链接标记。
2、双（成对）标记
HTML标记通常是成对出现的。比如<b>和</b>。标记对中的第一个标记是开始标记（也称为首标记），第二个标记是结束标记（也称为尾标记）。
基本语法
<标记名称>内容<标记名称/>语法说明
内容：是被成对标记说明特定外貌的部分。
例如，<html>与</html>之间的文本描述网页。<body>与</body>之间的文本是可见的页面内容。<strong>表示重要文本</strong>标记让浏览器将内容“表示重要文本”以标准粗体方式显示。
标记可以互相嵌套，但是不能交叉。尽管浏览器能够理解，但不是好的编程习惯。
例如：将h3标记与i标记交叉了，错误代码如下所示：
<!-- 交叉嵌套错误 -->
<h3><i>这是错误的交叉嵌套的代码<h3></i>
正确的代码如下所示：
<h3><i>这是正确嵌套交叉的代码</i></h3>
HTML属性
HTML使用标记来描述网页，浏览器根据标记解释标记所包含内容的效果。每一个记均定义了一个默认的显示效果，这些默认效果是通过标记的附加信息(也称为属性Attribute)来定义的。如果要修改某一个效果，那就需要修改该标记附加信息例如，段落p标记默认内容是居左对齐，如果需要将段落居中对齐显示，只需要设置对齐 align 属性。
代码如下所示:
<p align="center">这个段落居中显示</p>基本语法
<标记名称 属性名1="属性值1”属性名2-"属性值2"… 属性名n="属性值n"></标记名称>语法说明
属性应在开始标记(首标记)内定义，且与首标记名称之间至少留有一个空格。例如在上例的p标记中，align 为属性，center 为属性值，属性与属性值之间通过赋值号“-”连接，属性值可以直接书写，也可以使用双引号(“”)括起来。多个属性/值对之间至少留一个空格。
作为 Web 前端开发工程师应该养成一个良好的编写属性/值对的习惯，建议统一为属性值加上双引号，即:
属性名n="属性值n"
写列写法也是正确的：
<p align=center>这个段落居中显示</p>
例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标记语法及属性语法应用</title>
<style type="text/css">
h2{text-align:center;background:#6699ff;padding:20px}
p{text-indent:2em;}
</style>
</head>
<body background="" text="red">
<h2 align="center">新 年 寄 语</h2>
<hr size="2"color="#6600ff" width="100号"/>
<p align="left">轻轻送上我忠诚的祈求和祝愿，祈求分别的时光像
祝愿再会时，紧握的手中溢满友情和青春的力量。</p>
<p align="right">有一种跌倒叫站起，有一种失落叫收获，有一种失败叫成功一坚强些，朋友，明天将属于你!</p>
</body>
</html>代码解释： 代码中第 7~8 行分别定义标题字 h2 样式(对齐、背景和填充等属性)、p 样式(首行缩进2个字符);第 15~16 行是 HTML 的主体，包含标题字、水平分隔线、段落等标记定义，其中第 11 行定义主体 body 的所有文本信息的颜色属性，第 12 行定义标题字 h2 对齐 align 属性(居中对齐)，第 13 行定义水平分隔线 hr 的粗细、颜色、宽度等属性，第14行定义段落 p 的对齐 align 属性(左对齐)，第 15 行定义段落p 的对齐 align 属性(右对齐)。
注释
为了提高代码的可读性、可维护性，作为 Web 前端开发工程师必须养成良好的编程习惯。通过注释标记给脚本代码或样式定义增加注释文本信息，可以给 Web 编程人员阅读和理解代码提供帮助，对后期软件维护和升级奠定基础。使用锯齿格式编写代码，即代码向右缩进4个字符，也可自定义缩进量。
在 HTML 代码中插入注释标记可以提高代码的可读性。浏览器不会解释注释标记，注释标记的内容也不会显示在页面上。
HTML 代码中添加注释的方法有两种:
<!--注释信息 -->。
<comment>注释信息</comment>。<!-- 注释信息 -->
基本语法
<!-- 显示一个段落 -->语法说明
以左尖括号和感叹号组合开始(<!--)，以右尖括号(-->)结束。
注释comment标记
基本语法
<commnet>显示一个段落</commnet>
语法说明
comment 标记是成对标记，以<comment>开始，以</comment>结束。标记包围的信息,为注释内容。但这种方式很多浏览器(Chrome 等)会显示在页面上，所以不建议采用。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注释应用</title>
</head>
<body>
<comment>显示一个段落</commnet>
<p>这是一个段落</p>
<script type="text/javascript">
document.write("html注释的应用");
</script>
</body>
</html>
代码解释第8行采用第一种注释方式（IE不会显示在页面上，）第11~13行是在body标记中插入脚本标记，第11行是向页面输出信息。
html文档编写规范
HTML 文档是 Web 网页的重要文本文件，也是 Web 前端开发工程师设计网站的重要信息载体。文档编写质量直接影响网站呈现形式、访问速度、网络流量和用户体验，所以遵循 HTML 文档编写规范十分重要。
html代码书写规范
HTML 语法是 Web 页面设计所应遵循的基本规范，养成按规范编写代码的习惯，能够大大减少设计页面中存在的缺陷。下面是 HTML 页面编码时需要注意的基本规范:
1、HTML标记是由尖括号包围的关键词。所有标记均以“<”开始、以“>”结束结束的标记在开始标记名称前加上斜杠“/”。例如头部标记格式如下所示:
<head> ………… </head>2、根据标记类型，正确书写标记，单个标记最好在右尖括号前加1个斜杠“!”，如换行标记是单个标记<br/>，成对标记最好同时输入开始标记和结束标记，以免忘记。
3、
<head><title> ………… </title> </head> <!-- 这是正确的书写格式 -->
<head><style> .</head></style> <!--这是错误的书写格式-->4、在 HTM代码书写时不区分大小写,如头部标记写成<HEAD>、<head>、<Head>、<HEAd>都可以，但建议在同一个 Web 开发项目保持一种风格，如统一小写标记名称。
5、代码中包含任意多的回车符和空格在 HTML,页面显示时均不起作用。需要时可使用<br/>和 来实现换行和插入空格。为了代码清晰，建议不同的标记都单独占一行。
6、给标记设置属性时，属性值建议用双引号标注起来。如段落内容居中格式如下：
<p align="center">这是段落信息居中显示</p>7、书写开始与结束标记时，在左尖括号与标记名或与斜杠“!”之间不能留有多余空格，否则浏览器不能识别该标记，导致错误标记直接显示在页面上，影响页面美观效果。
8、编写HTML代码时，应该使用锯齿结构，即向右缩进 2~4个字符，使代码结构清晰，提高代码的可读性，为后期阅读和维护提供帮助。
html文档命名规则
HTML 文档是展示 Web 前端开发工程师成果的最好表示方式,为了便于文档规范化管
理，在编写 HTML 文档时，必须遵循 HTML 文件命名规则。
HTML 文档命名规则如下:
1、文档的扩展名为 htm 或者 html，建议统一用 html。
2、文档名称只可由英文字母、数字或下画线组成，建议以字母或下画线开始。
3、文档名称中不能包含特殊符号，如空格、$、&等。
4、文档名称区分大小写，特别在 UNIX、Linux 系统中大小写表示的文件是不同的,
5、Web 服务器主页一般命名为 index.html 或 default.html。
html文档类型
Web世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档,HTML也有多个不同的版本,只有完全明白页面中使用的确切 HTML版本,浏览器才能完全正确地显示出 HTML 页面。
<!DOCTYPE>标记
DOCTYPE是 Document Type 的英文缩写，<!DOCTYPE>标记不是 HTML 标记。此标记可告知浏览器文档使用哪种 HTML或 XHTML规范。<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标记之前。
基本语法：
<!DOCTYPE element-name DTD-type DTD-name DTD-url>语法说明
<!DOCTYPE>表示开始声明文档类型定义(Document Type Definition，DTD)，其中DOCTYPE 是关键字。
element-name 指定该 DTD 的根元素名称。
DTD-type 指定该 DTD 类型。设置为 PUBLIC，则表示该 DTD 是标准公用的，设置为SYSTEM，则表示私人制定的。
DTD-name 指定该 DTD 的文件名称。DTD-ur! 指定该 DTD 文件所在的 URL 地址
>是指结束 DTD 的声明。
DTD类型
HTML4.01的 DTD 定义
HTML4.01 中规定了三种 DTD 类型:严格型(Strict)、过渡型(Transitional)以及框架型(Frameset)。
1、HTML Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">2、HTML Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">3、HTML Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">HTML5的DTD定义
HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。HTML4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML4.01 基于 SGML。而 HTML5不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
