html 第2章 HTML 元素和基本结构

[复制链接]
ARCHY明星会员实名认证 发表于 2012-7-14 14:02:44 [html] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
本章讲解HTML 的基本结构、HTML 控制标记的格式和最常用的控制标记,也就是创建文档结构所需的元素。例如:标题、段落、页面分隔、注释等等。

HTML 文档是由 HTML 元素构成的文本文件,HTML 元素是通过使用 HTML 标签进行定义的。

一、HTML 的基本结构
  1. <html>   <!--根控制标记-->
  2. <head>      <!--头控制标记-->
  3. <title>标题</title> <!--标题标记-->
  4. </head>      <!--头控制标记(尾)-->
  5. <body>
  6. 网页内容显示区域
  7. </body>
  8. </html>     <!--根控制标记(尾)-->
复制代码
以上就是一个最基本的网页,把后面的注释去掉,复制到记事本,然后把txt格式修改为htm就是最简单的一个网页。

1、<html>…</html>根控制标记开头和结尾成对出现,双标签

2、<head>…</head>头控制标记

  2.1<title>很单纯的文件标题声明

  2.2<meta>控制标记的动态文件转换声明

  2.3<base>超链接网址基准参考点

  2.4Javascript 和VBScript 程序

  2.5stylesheet 可用来设置排版来的声明

  2.6<link>可引用外部文件,如CSS 排版样本

3、<title>…</title>设置浏览器的视窗标题

4、<body>…</body>页面可见内容

二、HTML 控制标记的格式

HTML 标签是用来标记 HTML 元素的,被 < 和 > 符号包围,这些包围的符号叫作尖括号,HTML 标签是成对出现的(也有单标签),例如 <b> 和 </b>,位于起始标签和终止标签之间的文本是元素的内容,HTML 标签对大小写不敏感,<b> 和 <B> 的作用的相同的。

1、<标记名称>单一型,无设置值的。如:<br>
2、<标记名称属性=”属性值”>单一型,有设置值的。如:
  1. <hr width=”80%”>
复制代码
3、<标记名称>…</标记名称> 对称型,无设置值。如:
  1. <title>…</title>
复制代码
4、<标记名称属性=”属性值”>…</标记名称> 对称型,有设置值。如:
  1. <body bgcolor=”red”>…</body> <font size= ”7”>…</font>
复制代码
三、 最常用的控制标记

1、换行、跳行<br>

格式:<br>无属性设置

2、段落<p>

格式:<p align=”排列方式”>…</p>

属性名称  属性值  说明
align    left    往左靠(默认)
      center   往中靠
      right   往右靠

3、水平直线<hr>

格式:<hr>

属性名称    属性值       说明

size 像素绝对设置,以数字表示,属性值越大,线越粗

百分比相对设置,以%表示,属性值越大,线越粗

width 像素绝对设置,长度不会应视窗的改变而改变

百分比相对设置,长度会随着视窗宽度而改变

noshade   实体线

4、向中对齐<center> (被废弃的标签)

格式:<center>…</center>

5、背景色与文字设置

格式:<body bgcolor=”背景色” text=”文字颜色”>

整体页面的边距,行距
  1. <body leftmargin=”像素” topmargin=”像素”>
复制代码
6、标题文字设置

格式:
  1. <h1>…</h1>
  2. <h2>…</h2>
  3. <h3>…</h3>
  4. <h4>…</h4>
  5. <h5>…</h5>
  6. <h6>…</h6>
复制代码
属性名称  属性值  说明
 align    left   靠左
      center  靠中
      right   靠右

7、特殊字符设置

格式:
  1. < lt;
  2. > gt;
  3. & amp;
  4. “ quot;
复制代码
8、在HTML 备注

格式:
  1. <!--…-->
复制代码
9、实体字符控制标记
  1. <b>…</b>    粗
  2. <i>…</i>     斜
  3. <s>…</s>    删
  4. <u>…</u>   下划
  5. <tt>…</tt>   电报
  6. <sub>…</sub> 下标
  7. <sup>…</sup> 上标
复制代码
10、语意字符控制
  1. <address>…</address>  地址
  2. <big>…</big>      大字
  3. <del>…</del>       删除
  4. <ins>...</ins>      修改
  5. <samll>…</small>    小字
  6. <strong>…</strong>   加强语气(加粗)
  7. <em>...</em>      加强语气(倾斜)
复制代码
11、<font>字体控制(被废弃的标签)

格式:<font>…</font>
属性名称 属性值 说明
 size    0-7  字体大小
 color  英文或十六颜色
 face   字体  字体

12、格式化
格式:<pre>…</pre>
让书写的文字格式化!

13、引用文本

格式:<blockquote>...</blockquote>
属性名称 属性值 说明
cite    url   被引用的地址

我们刚才讲到:HTML 标签对大小写是不敏感的:<b> 和 <B> 的作用的相同的。但在书写代码的时候尽量使用小写html标签。万维网协会 (W3C) 的标准是:建议在 HTML 4 中使用小写标签,而在 XHTML(下一代 HTML)中,必须使用小写标签。


推荐阅读:

第1章 XHTML 学前准备

第3章 排列清单UL控制标记

第4章 表格table基本格式和使用方法

第5章 图像 -- 背景图片 插入图片等

第6章 超链接 a标签的使用

第7章 表单from的功能结构

第8章 Flash MP3等多媒体的结构和使用

第9章 其他标记marquee、脚本和meta
参与人数 1帮币 +1 收起 理由
资源56 + 1 赞一个!

查看全部评分总评分 : 帮币 +1





上一篇:第1章 XHTML 学前准备
下一篇:第3章 排列清单控制标记

大神点评24

 发表于 2012-7-14 17:16:28
转播微博
非一般感觉明星会员实名认证 发表于 2012-7-15 07:46:54 [html] 显示全部楼层
不错 赞一个
神马都是浮云... ...
375714119 发表于 2012-9-29 03:44:57 [html] 显示全部楼层
不错 赞一个
圈圈哥 发表于 2012-11-21 21:50:48 [html] 显示全部楼层
新手学习 正是我需要的
天天加分 发表于 2012-11-27 10:24:06 [html] 显示全部楼层
分析的还是很到位的啊!!
好玩的手机游戏http://www.88130.cn
rstar 发表于 2012-12-7 20:13:02 [html] 显示全部楼层
顶帖。。。
www.ycbbs.net  www.0359rencai.com www.0359fdc.com   www.yc115.com
anyta 发表于 2012-12-30 00:07:27 [html] 显示全部楼层
顶帖
心静如水 发表于 2013-1-1 18:15:51 [html] 显示全部楼层
          不错
东兴酷爱 发表于 2013-2-27 00:53:23 [html] 显示全部楼层
第三点是不是有点问题啊
wl5451 发表于 2013-5-2 20:07:19 [html] 显示全部楼层
慢慢学习吧!
965177646 发表于 2013-5-19 03:24:33 [html] 显示全部楼层
我来看看
weilide 发表于 2013-5-27 10:44:18 [html] 显示全部楼层
学习了,专业术语,需要慢慢消化
菜小驴 发表于 2013-6-22 10:11:22 [html] 显示全部楼层
新手学习必备之精品
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表