2网页文档结构

2.1 网页文档结构

1、文档基本结构

一个HTML文件最基本的文档结构,是由文档里的<html>、<head>、<title>、<body>等标签按照特定的顺序构成的。如:

<html>

    <head>

        <title>网页都应有标题</title>

    </head>

    <body>

        网页的主体内容写在这里,将会在浏览器中显示。

    </body>

</html>

2、语法规范

HTML自首次发布至今,经历过几次修改,在这个过程当中产生了两个具有代表性的版本,它们分别是HTML4.01和XHTML1.0。这两个版本的语法规范是不一样的,为了保证浏览器能够使用正确的语法规范解析HTML文档,需要在HTML文档中通过<!DOCTYPE>指明当前文档所采用的版本规范,如下图所示。

以上的写法不需要记忆,可借助开发工具实现,我们只要能明白其不同的写法所表达的含义就行。

综合上述两点,一个完整的HTML结构如下:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>HTML网页基本结构</title>

    </head>

    <body>

        这是包含<!DOCTYPE >定义的完整HTML网页基本结构。

    </body>

</html>

3、DOM模型

DOM模型即文档对象模型(Document Object Model)。它就是将一个HTML文档看成一棵由标签组成的如下图所示的树形结构。图中的每个结点都可以看作一个对象,它们的层次关系表示标签在网页中的嵌套关系,同一层结点的左右次序表示这些标签对象出现的先后顺序。

该模型在我们访问网页当中的标签元素时十分有用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML网页框架结构通常由以下几个部分组成: 1. DOCTYPE声明:用于声明HTML文档类型,告诉浏览器如何解析文档。 2. HTML标签:用于定义HTML文档的根元素,包含<head>和<body>两个子标签。 3. head标签:用于定义文档的头部,包含了一些元数据,如文档标题、字符集、样式表等。 4. body标签:用于定义文档的主体部分,包含了所有要显示在页面上的内容,如文本、图片、链接等。 5. 标题标签:用于定义文档的标题,显示在浏览器的标题栏上。 6. 段落标签:用于定义文本段落,通常用于显示文章内容。 7. 链接标签:用于定义超链接,可以链接到其他网页、图片、音频、视频等资源。 8. 图像标签:用于定义图像,可以在页面上显示图片。 9. 表格标签:用于定义表格,可以在页面上显示数据。 10. 表单标签:用于定义表单,可以用于用户输入数据并提交到服务器。 下面是一个HTML网页框架结构的示例: ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>网页标题</h1> <p>这是一个段落。</p> <a href="http://www.example.com">链接到示例网站</a> <img src="example.jpg" alt="示例图片"> <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> <form action="submit.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值