Web标准设计入门：第一讲 - 网页架构与元素分类

99 浏览量更新于2024-08-31 收藏 249KB PDF 举报

"web标准教程，帮你走进web标准设计的世界第一讲。本教程基于作者的学习经验总结，旨在帮助初学者理解和掌握Web标准设计。内容包括网页架构、HTML标签分类等基础知识，注重实用性，期望对学习者有所助益。" 在Web开发中，Web标准是一个至关重要的概念，它定义了如何构建网页以确保跨浏览器兼容性、可访问性、可维护性和性能优化。本教程的第一讲将带你走进这个领域，了解网页的基本结构和元素分类。首先，一个完整的网页通常由以下几个部分组成：声明、头部、主体和结束。声明位于文档的顶部，用来指定文档使用的HTML版本和类型，例如`<!DOCTYPE html>`声明告诉浏览器这是一个HTML5文档。头部包含元信息，如`<meta>`标签用于设置页面的字符集、描述等。标题`<title>`则定义了浏览器标签页上显示的网页标题。接着，我们来到了网页的主体部分，这是用户在浏览器窗口中看到的主要内容。主体由各种HTML标签组成，其中HTML标签可以大致分为块级元素和内联元素。块级元素，如`<div>`和`<p>`，它们各自占据一整行，可以在其中容纳其他元素，形成独立的区域。这对于布局和组织内容非常有用，因为它们能自然地创建清晰的视觉分隔。内联元素，如`<a>`和`<span>`，则不会单独占据一行，它们通常用于在文本中插入链接或进行特定内容的标记。内联元素可以在同一行内与其他内联元素并排显示，这在处理文本样式和链接时非常实用。理解这两种元素的区别是创建高效、美观网页的关键。在编写HTML时，正确使用块级和内联元素可以使代码更有序，页面结构更清晰。例如，你可以用块级元素来构建页面的大框架，然后利用内联元素来填充和修饰具体的内容。本教程鼓励初学者通过实践来深入理解这些概念，通过实例代码来学习和掌握。尽管作者谦虚地认为教程还不够完善，但它已经提供了一个很好的起点，对于想要学习Web标准设计的人来说，无疑是一份宝贵的资源。记住，不断学习和实践是成为优秀Web开发者的关键。

web标准教程，帮你走进标准教程，帮你走进web标准设计的世界标准设计的世界第一讲第一讲

本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不

要随便转载，写的不是很好，还不完善

一个网页的架构：声明，头部，主体，结束

复制代码

代码如下:

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

transitional.dtd">

//声明的一些规范，初学者不必去理会，该部分会自动生成

<head>

/**

*http-equiv="Content-Type" 表示描述文档类型

*content="text/HTML; 文档类型mime类型，这里为html,如果JS就是*text/javascript，

*charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8

*建议统一采用utf-8

<title>无标题文档</title>

//一个网页的标题

</head>

<body>

</body>

</html>

我要主要讲解的是主体部分，在这过程成中会对其他部分有一定的讲解和延伸。

在讲body之前，我先讲一下html标签的大体分类。主要是为接下来讲解网页的基本结构做铺垫。

html标签大体分为：块级元素和内联元素，那么何为块级元素何为内联元素呢？

块级元素：直白的说就是一块区域，独立占用一行空间的元素，如：div，p。

内联元素：与块级元素不同，就是不能占据一行空间的元素，如a，span。

我说的可能不是很专业，目的只是初学者便于理解。

举个例子，大家就懂啦（这里我只写了body中的内容，其他的内容大家自己补充）：

复制代码

代码如下:

<body>

<div>我是块级元素，我独占一块空间</div>

<span>我是内联元素元素，我不独占一块空间</span>*****

<span>我是内联元素元素，我不独占一块空间</span>

</body>

运行结果：

<body>

2 <div id="page">

3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper

5 <div id="header">

6 //我是头部！

8 </div>

10 <div id="content">

11 //我是内容！

13 </div>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38523728

粉丝: 3
资源: 973

Web标准设计入门：第一讲 - 网页架构与元素分类

web标准教程，帮你走进web标准设计的世界 第二讲

使用bootstrap框架设计，开发工具hbuilder，设计一个web网站，里面包含三个页面，一个主页面，两个从页面

kali安装使用nessus教程

帮我写web网页轮播图代码

请写一篇嘲笑室友平常不努力学习期末考试到图书馆内卷的简单Python

.NET core入门

写一个包含上述部分的电子文档管理系统python代码

用golang写一个数学公式识别系统

nginx: [emerg] "server" directive is not allowed here in /usr/local/nginx/conf/nginx.conf:47

nginx: [emerg] invalid number of arguments in "add_header" directive in /usr/local/nginx/conf/nginx.conf:92

最新资源

web标准教程，帮你走进web标准设计的世界第二讲