初学“凸”型的html之浅谈-优快云博客

本文链接：https://blog.youkuaiyun.com/u010248552/article/details/24550565

本文分享了HTML学习过程中的经验和布局技巧，包括标签的作用、布局理解、图文布局及Dreamweaver使用的建议，旨在帮助读者设计出既实用又美观的网页。

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

如有错误，敬请指正，万分感谢！

学习一段时间的html，发现还是走了些弯路，其实假如有人指点还是可以更快学完的，然后直接进阶下一阶段学习。我也写点悟解与大家分享吧。

无论是从代码量还是内容的丰富程度，网页的结构比例都很形象：

html主要的工具就是tag（标签），它的一切都是由这些组成"<tags>"。

那我们来细数下“tag”的种类：

由开闭关系结构分为(举例说明)：

1. 2.<img /> 3. （在XHTML1.0也要求必须封闭： ）

由内容关系分为（举例说明）：

1.框架结构<body></body> 2.细节描述 3.辅助<hr>

下面我们就仔细而又大概的谈谈这个标签在html上的作用。

HTML的整体结构有点像“凸”这个字，有头有身子，但没有脚，有点奇怪（ps：难怪后来往HTML上加载的叫做脚本呢<script>）,其实我们打开的浏览器就是这个样子，上面有个凸出来的标题。何解这个“凸”字呢？大家看看他的结构框架代码就知道了：

 
  
  <head>……</head> 
 
 
 
   <body>……</body> 
  
  
   
 
在结构框架的下面我们就可以看到平常大家设计网页的主体内容了，每个标签代表着不同的作用，每个标签在网页上的“表现形式”我们用“属性”来描述出来，例如背景颜色的设计，边界大小的控制：
  <body bgcolor="#FFFFFF" margin="20px">……</body>
所以我们学习语言的时候，并不用去全部熟悉整个html系列的全部的tags，你只用了解一般常用的标签如何用，也不用去记，你需要的时候就去查html手册就行了，当然时间长了我们也基本记住了。下面我们就介绍下大家一般需要了解的内容标签：（更好的了解标签的意思，不仅锻炼英语又能加强学习记忆）
<p></p>——paragraph 文本编辑
<a src=“#url”></a>——anchor 锚，链接 
<img href=“#url”/>——image 图像 
<title></title>——标题 
<embed src="#url">——嵌入
<table><tr><td></td></tr></table>——table row,table data cell 表格结构

这些是很小的一部分，但利用这些就可以为你自己设计一个十分有用又可爱的首页了。

但最重要在html设计中布局的了解，以前以为可以各种想象的去创造，后来发现自己了解不够，布局成为很大的难题，其实布局就是画表格或是photoshop的切片设计，分割区域，然后用table表格设计如图：

现在的很多网页就是这种格式，把文字和图片拼接起来，话说这图片技术还是要仔细学学的，不过其实网页设计只是把美工的后台加以实现功能，也不用全学。

还有学习中有个设计细节很值得学习记载的，就是图文一行的布局，一般的声明一个内容，默认是占有一行的，即使一行中有大半没有被该内容占据。那么要使它充分被利用以及美观作用，我们一般用在<img>或中加入“align”这个属性进行改变，，那样这个<img>或就知道自己占有的地方是从那边算起到自己的本身大小所需的位置，见下图加以说明其作用(以三张照片为例)：

1.<img/><img/><img/>