标准结构
一、元素显示类型
1、认识元素显示类型
- 块状显示
块状状显示会把元素当作一个长方形的木板显示出来，如果为块状元素设置边框，则可以清晰地看见它的轮廓。它拥有清晰的宽、高、边界、边框、补自和背景等基本属性。
块状元素具有两个基本的特性。
第一，块状元素默认宽度都是100%，即块状元素会挤满一行显示。
第二，块状元素的末尾都会隐藏一个换行符，当然是看不见它的。但是可以看到效果，也就是说，块状元素后面不能够再跟着显示其他行内元素或者块状元素。 - 行内显示
行内显示没有块状显示的轮廓，因此可以形象地把它联想为一个皮纸袋子。如果为行内元素描一个边，有时显示的是不规则的。同时，行内元素正如它的名字所说的那样，多个行内元素并列显示在同一行内。
行内元素也具有两个基本的特性。
第一，行内元素没有高度和宽度，即使为它定义高度，但是浏览器在解析时也不会显示。
第二，行内元素的呈现效果与块状元素存在很大区别，这不仅仅体现在宽和高方面，它们可以并列显示，随行移动。 - 行内块状显示
行内块状显示是行内显示和块状显示的结合，拥有块状和行内元素的各自优势。但是默认状态下，元素不会显示该状态，需要使用CSS声明。 - 表格显示
表格也是一种块状元素，但是它还具有一些其他特性，如更严格的组织性，表格元素之间的严密协调性等。表格显示还包括表格、行、单元格、标题、列、组等不同的显示性质和效果。 - 列表显示
列表也属于块状元素，但是它拥有项目符号等一些其他特性。
2、块状元素
在网页设计中，块状元素主要用来定义页面结构、布局结构、构建网页基本框架和结构。HTML4默认的块状元素包括以下方面。
默认的块状元素包括以下方面。
- html、body、 frameset、 frame、 noframes、iframe:网页、框架基本结构块。
- form、fieldset、legend：表单结构
- div：布局结构块
- p：段落结构块。
- h1、h2、h3、h4、h5、h6：标题结构块。
- ol、ul、dl、dt、dd、menu、dir：列表结构块。
- col、colgroup:表格列结构块。
- center：居中结构块。
- pre：预定义结构块。
- address：引用结构块。
- blockquote:特定信息结构块。
- hr：结构装饰线。
- isindex:交互提示框。
- title:网页标题框。
在上面结构块列表中，div是网页布局最常用的元素，然后是段落、标题和列表元素，在网页布局中都是使用频率最高的元素。块状元素能够嵌套其他块状、行内等不同类型的元素，因此，它们主要负责网页结构的支撑和构建。
hr、isindex和title块状元素有点特殊，它们不直接参与到网页结构构建中。pre、address和blockquote主要用于网页内容排版中。center结构块虽然可以参与网页布局，但是可以使用CSS代替其功能，所以不建议选用元素。
3、行类元素
在网页设计中，行内元素主要用来定义特定语义信息。HTML4默认的行内元素包括以下方面。
- span:行内包含框。
- a、area：超链接和映射包含框。
- img：图像包含框。
- abbr、 acronym、 b、 bdo、big、 cite、 code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、 strike、 strong、sub、sup、tt、u、var：格式化信息包含框。
- button、 select、textarea、label:表单对象包含框。
- applet、object:可执行的插件或对象包含框。
- caption:表格标题包含框。
- noscript:无脚本包含框。
在行内元素中，使用最频繁的是span元素，该元素常用来作为修饰行内文本或对象的样式。
行内元素是不能用来进行网页结构构建的，虽然这样操作不会影响页面的解析效果，但是它不符合HTML结构嵌套规范，不建议使用。同时，也不建议在行内元素中包含其他块状元素，这样会严重破坏结构的逻辑关系。
4、其他元素
头部区域隐藏元素
- head:头部包含框。
- base:URL基础。
- basefont: 默认基础字体属性。
- link：链接。
- meta：元信息。
- script：脚本。
- style:样式。
行内块状元素 - input：输入框。
- optgroup:下拉项分组。
- option:下拉项。
列表项元素 - li：列表项。
结构内隐藏元素 - map：图像映射包含框。
- param:参数。
- br：换行。
表格系列类型元素 - table：表格框显示。
- tr：表格行显示。
- td：单元格显示。
- th:表格标题显示。
- tbody：表格行组显示。
- tfoot:表格脚注组显示。
- thead:表格标题组显示。
二、结构嵌套规则
1、分析结构乱套现象
示例一
<span>
<div>
<h2></h2>
<p></p>
</div>
</span>
严格说这种结构是不规范的，因为span元素内部不能够包含块状元素。但是浏览器斌没有提示错误或禁止解析，养成习惯后就觉得无所谓。
【示例2】
<ul>
<h2>标题</h2>
<li>列表</li>
<li>列表</li>
</ul>
这种用法也是不规范的。ul、ol、dl元素不能够直接包含标题元素，但是可以写成这样：
<ul>
<li><h2>标题</h2></li>
<li>列表</li>
<li>列表</Ii>
</ul>
【示例3】结构嵌套的随意性还有很多。把图像作为body元素的子元素直接插入到页面中，这 样是不妥的，一是结构嵌套有误，二是图像控制不方便。
<body>
<img src="" />
</body>
或者把一个块状元素包含在p、h1、h2、h3、h4、h5或h6元素中。
<p>段落文本<div>其他对象</div>
</p>
上面这种做法也是不建议使用的。总之，类似的这种无意识的错误还有很多。虽然它们都能够正确显示，但是结构嵌套得很滑稻
2、严谨的嵌套规则
在HTML中，元素嵌套需要遵循一定的规则，以确保页面结构的合理性和兼容性。以下是HTML中常见的嵌套规则：
-
块级元素（block-level elements）可以包含内联元素（inline elements）和其他块级元素。例如，
<div>、<p>、<ul>等块级元素可以包含<a>、<strong>、<em>等内联元素。 -
内联元素（inline elements）只能包含其他内联元素，不能在内部包含块级元素。例如，
<a>、<strong>、<em>等内联元素不能在内部包含<div>、<p>等块级元素。 -
某些元素有特定的嵌套规则，例如：
<li>元素只能在<ul>、<ol>或<menu>元素内。<dt>和<dd>元素只能在<dl>元素内。<thead>、<tbody>和<tfoot>元素只能在<table>元素内。<tr>元素只能在<table>、<thead>、<tbody>或<tfoot>元素内。<td>和<th>元素只能在<tr>元素内。
-
某些元素不能嵌套在任何其他元素内，例如：
<html>、<body>、<head>、<title>等。 -
避免过多的嵌套层次。过多的嵌套层次会导致HTML结构复杂，难以维护，并且可能导致性能问题。一般建议嵌套层次不超过3层。
要编写干净的HTML代码，需要遵循内容与表现分离的原则，尽量减少在HTML中添加样式和JavaScript代码。同时，使用HTML5语义化标签可以让页面结构更加清晰易懂。
3、HTML嵌套规则应用
在HTML开发中，正确应用嵌套规则是非常重要的。以下是一些关于HTML嵌套规则的应用示例：
- 标题和段落嵌套：
<h1>这是一个主标题</h1>
<p>这是一个段落。</p>
<h2>这是一个次级标题</h2>
<p>这是另一个段落。</p>
- 无序列表嵌套：
<ul>
<li>列表项1</li>
<li>列表项2
<ul>
<li>子列表项1</li>
<li>子列表项2</li>
</ul>
</li>
<li>列表项3</li>
</ul>
- 表格嵌套：
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>数据5</td>
</tr>
</tfoot>
</table>
- 表单嵌套：
<form>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
- 语义化嵌套：
<header>
<h1>页面标题</h1>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章正文。</p>
</article>
</main>
<footer>
<p>版权信息</p>
</footer>
以上示例展示了HTML嵌套规则的一些应用场景。在实际开发中，需要根据不同的需求选择合适的嵌套规则，以确保页面结构的合理性和兼容性。
三、案例实战：设计CSS禅意花园
1、认识CSS禅意花园
CSS Zen Garden（CSS禅意花园）是一个展示CSS样式设计能力的网站。该网站由Dave Shea于2003年创立，旨在展示如何使用CSS来创建一个美观的网页布局，而无需使用表格（table）和框架（frame）等传统方法。
CSS禅意花园提供了一个基本的HTML模板，其中包括一个标题、一段内容以及一个页脚。设计师们使用这个模板，仅通过修改CSS样式表来重新设计整个页面。这使得设计师能够专注于CSS本身，而不用担心HTML结构。
截至2023年，CSS禅意花园已经收集了超过360个设计作品，这些作品都是由世界各地的设计师使用CSS创建的。这些设计作品展示了CSS在布局、颜色、字体等方面的强大功能和创造力。
CSS禅意花园对于Web设计师来说，是一个学习和交流的宝库。通过研究这些设计作品，设计师可以学到许多关于CSS样式和布局的技巧。同时，CSS禅意花园也激发了许多设计师对于Web设计的热情，并推动了Web标准和CSS技术的发展。
2、定义网页结构
网页结构是指网页的布局和组织方式。一个好的网页结构应该清晰、一致，便于用户浏览和理解，同时也有利于搜索引擎优化（SEO）。在网页设计中，通常将网页结构划分为以下几个部分：
-
头部（Header）：通常包含网站的标题、LOGO、导航栏以及一些其他元素，如搜索框、登录/注册按钮等。
-
主体（Main/Content）：这是网页的主要内容区域，通常包括文章、图片、视频、下载链接等。在这个区域中，信息按照一定的层次和逻辑进行组织，便于用户阅读和理解。
-
侧边栏（Sidebar）：位于主体内容区域的左侧或右侧，通常包含辅助信息，如相关文章、标签云、广告等。
-
页脚（Footer）：位于网页页面的底部，通常包含版权信息、联系方式、友情链接、隐私政策等。
在设计网页结构时，应注意以下几点：
-
保持一致性：在整个网站中使用相同的布局和导航结构，使用户容易找到所需信息。
-
简洁明了：避免使用过多的元素和装饰，以免分散用户注意力。
-
易于导航：确保用户能够快速找到他们需要的信息，通过使用清晰的导航和内部链接来实现。
-
响应式设计：网站应该能够自适应各种不同的屏幕尺寸，包括移动设备。
-
SEO优化：使用合适的HTML标签和优化技巧，提高搜索引擎排名。
-
无障碍访问：确保网页结构能够被残障用户所访问，如使用alt属性为图片提供描述文本。
通过以上这些原则，可以设计出清晰、易于使用的网页结构，从而提高用户体验并增加网站流量。
3、设计嵌套结构
禅意花园犹如一篇散文，整个页面包含3部分。
- 站点介绍。
- 支持文本。
- 链接列表。
1.站点介绍
站点介绍部分犹如抒情散文，召唤你赶紧加入到CSS标准设计中来，该部分包含3段。 - 网页标题信息，包括主副标题。
- 内容简介，呼唤网友赶紧加入进来。
- 启蒙之路，回忆和总结当前标准之路的艰巨性和紧迫性。
2. 支持文本
支持文本部分犹如叙事散文，娓娓道来，详细介绍活动的内容，用户参与的条件、支持、好处等。 - 这是什么？
- 邀您参与。
- 参与好处。
- 参与要求。
另外末尾还包含了相关验证信息。
3. 链接信息
第三部分很简洁地列出了所有超链接信息。该部分也包含3小块链接信息。
4、构建基本框架
构建CSS禅意花园的基本框架包含以下几个关键步骤：
- 创建HTML结构
首先，创建一个简单的HTML结构，包括<html>、<head>、<body>以及一些基本的<div>元素，如header、main、sidebar和footer。在<head>部分，引入CSS样式表。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS禅意花园</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- 页面结构 -->
</div>
</body>
</html>
- 编写CSS样式
在CSS样式表中，定义基本的页面样式。包括body、容器、header、nav、main、aside和footer等元素的样式。您可以从简单的样式开始，然后逐步添加更多的样式和效果。
body {
font-family: Arial, sans-serif;
background-color: #fff;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li {
display: inline-block;
margin-right: 10px;
}
.navigation a {
color: #fff;
text-decoration: none;
padding: 5px;
}
.main {
background-color: #f5f5f5;
padding: 30px;
}
.aside {
background-color: #fff;
padding: 30px;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
- 添加内容
在HTML结构的相应位置添加内容，例如header中的网站标题和导航，main中的文章和侧边栏内容，footer中的版权信息等。
- 优化样式和结构
根据设计需求，进一步优化HTML结构和CSS样式。您可以添加媒体查询实现响应式设计，使用CSS动画和过渡效果增强用户体验，以及优化性能和可访问性等。
通过以上步骤，您可以构建一个基本的CSS禅意花园框架。在实际应用中，还需要根据设计需求进行更多的调整和优化。
5、设计局部结构
在CSS禅意花园中，设计局部结构主要包括以下几个部分：
- 页面头部（Header）
页面头部通常包括网站标题、LOGO、导航栏以及其他一些元素，如搜索框、登录/注册按钮等。以下是一个简单的页面头部结构示例：
<header class="header">
<h1>CSS禅意花园</h1>
<nav class="navigation">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">投稿指南</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
- 内容区域（Main）
内容区域通常包括文章、图片、视频、下载链接等。在这个区域中，信息按照一定的层次和逻辑进行组织，便于用户阅读和理解。以下是一个简单的内容区域结构示例：
<main class="main">
<article class="article">
<h2>最新设计作品</h2>
<div class="design-作品">
<!-- 设计作品内容 -->
</div>
</article>
<aside class="sidebar">
<h2>热门标签</h2>
<ul class="tags">
<li><a href="#">CSS</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">响应式设计</a></li>
<li><a href="#">禅意花园</a></li>
</ul>
</aside>
</main>
- 页面底部（Footer）
页面底部通常包含版权信息、联系方式、友情链接、隐私政策等。以下是一个简单的页面底部结构示例：
<footer class="footer">
<p>Copyright © 2023 CSS禅意花园. All rights reserved.</p>
</footer>
在实际应用中，您可以根据需求进一步细分或合并这些部分。同时，还需要根据设计需求添加更多的HTML标记和CSS样式。
6、正文版式设计
在CSS禅意花园中，正文版式设计是至关重要的。一个良好的正文版式可以使内容更易于阅读和理解，同时也能提高页面的美观性。以下是一些建议：
-
使用统一的字体样式：选择一种易读性较高的字体，如Arial、Helvetica、Georgia等。保持一致的字体样式、大小和颜色。
-
设定合适的行高：行高是每行文字之间的垂直间距。一个合适的行高可以使文字更容易阅读。通常，行高可以选择为字体大小的1.5-2倍。
-
设定文本对齐方式：选择合适的文本对齐方式，如左对齐、居中对齐或右对齐。通常情况下，左对齐是最常见的选择，因为它符合人们的阅读习惯。
-
段落间距：段落间距是段落之间的垂直间距。一个合适的段落间距可以提高文章的层次感和阅读体验。通常，段落间距可以选择为行高的1.5-2倍。
-
标题和子标题：使用标题和子标题来强调文章的结构，帮助读者更快地找到他们感兴趣的内容。可以使用不同的字体样式、大小或颜色来突出标题和子标题。
-
列表：当需要列出一系列项目时，使用有序列表或者无序列表。这可以使内容更加清晰且有条理。
-
强调文本：使用粗体、斜体或者下划线来强调关键词和重要语句。但要注意不要过度使用，否则会削弱强调的效果。
-
留白：留白是指页面上未被文字、图片等元素填充的空间。适当的留白可以让页面显得更加简洁、舒适，有利于阅读。
-
图文搭配：适当地使用图片、图表或其他视觉元素来辅助文字内容，可以提高读者的兴趣和理解能力。但需要确保图片和文本之间的平衡，不要过于分散读者的注意力。
在实际应用中，您可以根据设计需求进行调整和优化。注意保持页面布局的一致性，以便于读者阅读和理解。
扫一扫
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
