Html结构解析

最新推荐文章于 2025-06-17 20:28:56 发布

weixin_30527143

最新推荐文章于 2025-06-17 20:28:56 发布

阅读量2.8k

点赞数 7

CC 4.0 BY-SA版权

文章标签： xhtml php ruby

原文链接：http://www.cnblogs.com/iamspecialone/p/11139491.html

本文详细介绍了HTML的结构，包括文档树状图、DOCTYPE声明及其作用。同时，讲解了HTML5、HTML4.01的差异，并对head头部和body部分的常见标签进行了深入阐述，如meta、link、body属性、排版标签、表格、表单、框架等，强调了语义化在选择标签中的重要性。

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

一、html文档树状图结构

　　1）html树状图

2）html代码解释树形图

<!DOCTYPE html>
    <!--声明-->

<html lang="en">
    <!--html开始-->

<head>
    <!--头部开始-->

    <meta charset="UTF-8">
        <!--提供页面元信息如编码，缓存，关键字，渲染模式-->
    <title>Title</title>
        <!--定义标题，如浏览器工具栏，收藏夹，搜索引擎结果标题-->
    <link>
        <!--stylesheet-->
        <!--icon-->
        <!--定义html文档和外部资源的关系，如css样式，icon图标-->
    <style></style>
        <!--定义html文档样式信息-->
    <script></script>
        <!--定义客户端脚本-->
    
</head>
    <!--头部结束-->

<body>
    <!--主体开始-->


    <!--行内标签-->
    
    <a></a>
        <!--超链接-->
    <img>
        <!--嵌入图片-->
    <input> 
        <!--搜集用户信息-->
    <label></label>
        <!--为 input 元素定义标注-->
    <span></span>
        <!--组合行内元素，以便通过样式来格式化它们。-->
    <select></select>
        <!--创建选择列表，是一种表单控件，可放在表单里收集用户输入-->        


    <!--块级标签-->

    <h1></h1>
        <!--文本标题-->
    <p></p>
        <!--段落-->
    <hr/> 
        <!-- 在页面中创建一条水平线。-->
    <ol></ol>
        <!--有序列表-->
    <ul></ul>
        <!--无序列表-->
    <form></form>
        <!--用于为用户输入创建 HTML 表单。-->
    <fieldset></fieldset> 
        <!--将表单内的相关元素分组，把表单内容的一部分打包，生成一组相关表单的字段。-->
    <div></div> 
        <!--把文档分割为独立的、不同的部分。它可用作严格的组织工具，并且不使用任何格式与其关联。-->


    <!--可变标签-->
    
    <button></button>
        <!--按钮-->
    <iframe></iframe>
        <!--创建包含另外一个文档的内联框架（即行内框架）-->
    <del></del>
        <!--已被删除的文本-->
    
    <!--自定义属性-->

    <!--自定义标签-->
    
</body>
    <!--主体结束-->

</html>
    <!--html结束-->

View Code

二 Html文档声明

　　<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

　　<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

注释：<!DOCTYPE> 声明没有结束标签。

提示：<!DOCTYPE> 声明对大小写不敏感。

提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

1 html5

<!DOCTYPE html>

2 html4.01

<!--HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。-->

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

<!--HTML 4.01 Frameset-->
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

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

<!--XHTML 1.0 Strict-->
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!--XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

View Code

下面对上图中的三种小规范进行解释：

- strict：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
  比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
  那怎么给文本增加下划线呢？今后的css将使用css属性来解决。
  那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
- Transitional：表示“普通的”，这种模式就是没有一些别的规范。
- Frameset：表示“框架”，在框架的页面使用。

三 head头部

头部标签都放在<head></head>之间，包括：

　　<title>：指定整个网页的标题，在浏览器最上方显示。
　　<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
　　　　　　 base会对Html文档中所有URL产生作用，慎用！
　　<meta>：提供有关页面的基本信息
　　<link>：定义文档与外部资源的关系。

1 meta标签

meta表示“元”。“元”配置，就是表示基本的配置项目。

#1、指定字符集,charset就是charactor set（即“字符集”）
    浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
    <meta charset="gbk">

#2、页面描述,name即“名字”，content即“内容”。只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，
    <meta name="Description" content="具体描述。。。">

#3、关键字：就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。有助于搜索引擎SEC优化，。
    <meta name="Keywords" content="网易，邮箱，游戏，新闻">

#4、重定向
    <meta http-equiv="refresh" content="3,http://www.baidu.com">

#5、页面刷新
    <meta http-equiv="refresh" content="3">

############################
    <!DOCTYPE html>
    <html lang="en">
    <head>

        <meta charset="utf-8">
        <meta name="Description" content="具体描述。。。">
        <meta name="Keywords" content="python,linux,go,IT培训">
        <meta http-equiv="refresh" content="3;https://www.baidu.com"> 

    </head>
    <body>
        <p>我是段落</p>
    </body>
    </html>

View Code

2 非meta标签

#1、定义标题
<title>百度一下，你就知道</title>

#2、加载网页logo
 <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">  
 
#3、引入外部css文件
 <link rel="stylesheet" href="my.css">
 
#4、引入本地css样式
<style>       
        p {
     
     
            color: rebeccapurple;
          }
    </style>
    
#5、引入文件js，不建议在head标签引用js,需在body标签最后引用
<script src="hello.js"></script>   



############################
<!DOCTYPE html>
<html lang="en">
<head>

    <title>百度一下，你就知道</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"> 
    <link rel="stylesheet" href="my.css">    
    <style>       
        p {
     
     
            color: rebeccapurple;
          }
    </style>
    <script src="hello.js"></script>   
    
</head>
<body>
    <p>我是段落</p>
</body>
</html>

View Code

四、body部分

<body>标签的属性

bgcolor：设置整个网页的背景颜色。
background：设置整个网页的背景图片。
text：设置网页中的文本颜色。
leftmargin：网页的左边距。IE浏览器默认是8个像素。
topmargin：网页的上边距。
rightmargin：网页的右边距。
bottommargin：网页的下边距。

<body>标签另外还有一些属性：

1 排版标签

(1) 分类图示

(2) 文本级和容器级

Html将所有标签分为容器级标签和文本级标签

1  容器标签
   容器级的标签里面可以放置任何东西，可以简单的理解为能嵌套其它所有标签的标签。
   常见容器级的标签: <div> <h1>~<h6> <ul> <ol> <dl> <li> <dt> <dd> 等。

2   文本标签
    文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。
    常见文本级的标签:<span> <p> <a> <b> <strong> <i> <u> <em> <ins> <del> 等。

3   Html和CSS对应关系
    CSS中的块级元素基本与Html中的容器级标签对应，除了P标签
    CSS中的行内元素基本与Html中的文本级标签对应，除了P标签
    
注：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

View Code

(3) 行内元素和块级元素

1   div和span的特点

    语义：
    div的语义是division“分割”； 
    span的语义就是span“范围、跨度”。

    类型：
    div 元素的默认 display 属性值为 “block”，称为“块级” 元素。
    span 元素的默认 display 属性值为“inline”，称为“行内” 元素。
    
    根据 CSS 规范的规定，每一个网页元素都有一个 display 属性，用于确定该元素的类型，每一个元素都有默认的 display 属性值。
    
    空间：
    div 这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
    span这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

    区别：
    <span>是不换行的，而<div>是换行的。
    

2   块状元素和行内元素

(1) 块级元素

   .总是从新的一行开始

   .高度、宽度都是可控的

   .宽度没有设置时，默认为100%

   .块级元素中可以包含块级元素和行内元素
  
(2) 行内元素

   .和其他元素都在一行

   .高度、宽度以及内边距都是不可控的

   .宽高就是内容的高度，不可以改变

   .行内元素只能行内元素，不能包含块级元素
  
(3) 行内、块状元素区别
  . 块级元素会独占一行，其宽度自动填满其父元素宽度         
    行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
    
  . 一般情况下，块级元素可以设置 width, height 属性，
    行内元素设置 width,  height 无效 (注意：块级元素即使设置了宽度，仍然是独占一行的)
    
  . 块级元素可以设置 margin 和 padding.  
    行内元素的水平方向的 padding-left,padding-right,margin-left,margin-right 都产生边距效果，
    但是竖直方向的 padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果(水平方向有效，竖直方向无效)。

3   行内、块状元素标签
(1) 块元素 (block element)

    address - 地址
    blockquote - 块引用
    center - 举中对齐块
    dir - 目录列表
    div - 常用块级容易，也是 css layout 的主要标签
    dl - 定义列表
    fieldset - form 控制组
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3 级标题
    h4 - 4 级标题
    h5 - 5 级标题
    h6 - 6 级标题
    hr - 水平分隔线
    isindex - input prompt
    menu - 菜单列表
    noframes - frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容
    noscript - 可选脚本内容（对于不支持 script 的浏览器显示此内容）
    ol - 排序表单
    p - 段落
    pre - 格式化文本
    table - 表格
    ul - 非排序列表

(2) 内联元素 (inline element)

    a - 锚点
    abbr - 缩写
    acronym - 首字
    b - 粗体 (不推荐)
    bdo - bidi override
    big - 大字体
    br - 换行
    cite - 引用
    code - 计算机代码 (在引用源码的时候需要)
    dfn - 定义字段
    em - 强调
    font - 字体设定 (不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    kbd - 定义键盘文本
    label - 表格标签
    q - 短引用
    s - 中划线 (不推荐)
    samp - 定义范例计算机代码
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器，定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    var - 定义变量

(3) 可变元素
    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    applet - java applet
    button - 按钮
    del - 删除文本
    iframe - inline frame
    ins - 插入的文本
    map - 图片区块 (map)
    object - object 对象
    script - 客户端脚本

View Code

(4) 换行标签<p>和<br>

1    <p>段落标签
    段落，是英语paragraph“段落”缩写。
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    属性：
    align="属性值"：对齐方式。属性值包括left center right。

2    <br>换行标签（已废弃）
    当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。
    无论你将它置于何处，<br>标签都会产生一个强制的换行。
    This <br> is a para<br>graph with line breaks
    
3    <p>标签和<br>标签的区别：<p>标签会在段落的前后自动插入一个空行。而<br>标签没有空行，而且<br>标签没有属性。

    注意：<br> 没有结束标签，把<br>标签写为 <br/> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

View Code

(5) 其他标签

1   注释标签
    <!-- 注释  -->

2   水平线标签<hr>（已废弃）
    水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
    
    属性：
    align="属性值"：设定线条置放位置。属性值可选择：left right center。
    size="2"：设定线条粗细。以像素为单位，内定为2。
    width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
    color="#0000FF"：设置线条颜色。
    noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。

3   内容居中标签 <center>
    此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。

    H5不建议使用center。

4   预定义（预格式化）标签：<pre>
    含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
    说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

View Code

2 常用标签

<body>

    <!-- 这是一个注释  -->

    <h1 style="background-color: blueviolet">hello1</h1>         
    <!--块级标签，控制一整行-->
    
    <a style="background-color: darkred;color: white">wwwwww</a>   
    <!--内联标签，只控制有字体的地方-->
    
    <h2>这是个标题</h2>    
    <!--自动换行-->
    
    <br>hhhhhhhhhhh <br>       bbbbbbbbb   
    <!-- br 换行 -->
    
    <p>这是一个段落，增加空行开始</p>       
    <!-- 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. -->
    <p>这是一个段落，增加空行结束</p>

    <b>加粗hello</b>         
    <!-- 行内标签，加黑加粗 -->
    
    <strong>加粗hello strong</strong> 
    
    <font color="red" size="10px">我是哈哈哈</font>    
    <!-- 修改文字大小，颜色。被废弃的标签 -->
    
    <strike>内容中加横杠</strike>
    <!-- 为文字加上一条中线. -->
    
    <em>变成斜体</em>
    
    <sup>上标</sup>
    <!-- 上角标和下角表. -->
    <sub>下标</sub>    
    
    <hr>    
    <!-- 水平线 -->
        
</body>

View Code

3 图片

 1  <img>标签
    <img> 代表的就是一张图片,img 是image“图片”的简写。
    <img> 是空标签，它只包含属性，并且没有闭合标签。也称为单边标记。
    
    语法：
    <img src

最低0.47元/天解锁文章

200万优质内容无限畅学