目录
6-1 创建一个简单的 HTML 文档的示例
6-2 HTML文档的基本结构
6-3 根元素和树结构
6-4 块级元素和行内元素
6-5 通用属性
6-6 HTML 中的大小规范
6-1 创建一个简单的 HTML 文档的示例
现在已经在一定程度上了解了如何编写 HTML,让我们来创建一个 HTML 文档。下面的示例是一个非常简单的 HTML 文档示例,但是如果您使用文本编辑器复制并粘贴此内容并以“.html”扩展名保存,它将成为一个 HTML 文档。此外,如果将创建的 HTML 文件上传到网络服务器,则可以将其发布为网页。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页标题</title>
</head>
<body>
<h1>网页标题</h1>
<p>您已经创建了一个网页!</p>
</body>
</html>
6-2 HTML文档的基本结构
一个 HTML 文档可以分为三个主要部分:
声明 HTML 版本的部分
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN " " http://www.w3.org/TR/html4/loose.dtd ">
<html>
HTML 文件头
<head>
<meta http-equiv=" Content-Type " content=" text/html; charset=utf-8 ">
<title>网页标题</title>
</head>
HTML 文档正文部分
<body>
<h1>网页标题</h1>
<p>您已经创建了一个网页!</p>
</body>
</html>
1. 声明 HTML 版本的部分
声明 HTML 版本的部分声明了文档中使用的 HTML 版本。HTML4.01有以下三种文档类型声明(DTD)。声明其中一个 DTD 以匹配网页的 HTML 描述。
HTML4.01 Strict DTD
<!DOCTYPE HTML PUBLIC ” -//W3C//DTD HTML 4.01//EN ” ” http://www.w3.org/TR/html4/strict.dtd “>
严格的 DTD 不能使用弃用元素和属性。
HTML4.01 Transitional DTD
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
不如 DTD 严格,可以使用已弃用 元素、属性等,但不使用框架。
HTML4.01 Frameset DTD
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
框架被添加到过渡 DTD。
2.<head>标题部分
头部部分是<head>和</head>之间的范围,表示与文档相关的头部信息,如文档的字符编码、标题、作者等。大多数标题信息对浏览器来说是不可见的,但它是告诉我们文档内容的重要信息。
3. <body>身体的一部分
body部分是<body>和</body>之间的范围,也就是文档的正文。这部分写的内容会显示在浏览器上。
6-3 根元素和树结构
在一个HTML文档中,整个header和body都被包围在<html>~</html>中,通过将它们包围在<html>~</html>中,就定义了这个文档是一个HTML文档。
html 元素称为根元素,是文档的“根”。HTML 文档以 html 元素开始,其中包含 head 和 body 元素,并进一步包含 p 元素。它可以改写为一种结构,其中排列各种元素,使得 html 元素是根,分支和叶子被扩展。这样的结构称为树结构。
在 HTML 中,可以为每个元素确定可以是子元素的元素类型。通过遵循这些元素排列规则并创建具有正确树结构的文档,网页可以很容易地被程序处理,信息可以更有效地使用。
6-4 块级元素和行内元素
在 HTML 定义的元素中,<body> ~ </body> 中使用的大部分元素都被归类为块级元素或行内元素。。这种分类定义了规则,例如哪些元素可以放在哪些元素内。
块级元素
块级元素是构成文档的基本元素,例如标题、段落和表格,并且被识别为单个块。在浏览器中的显示往往被视为一个单独的块,一般浏览器在前后插入换行符。
块级元素包括:
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol >、<p>、<pre>、<table>、<ul>
行内元素
内联元素是主要用作块级元素内容的元素,被视为句子的一部分。例如,<p> 元素中的 <strong> 元素是用于强调段落的一部分的元素。在一般的浏览器中,它显示为句子的一部分,前后不换行。
行内元素包括:
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font >, <i>, <img>, <input>, <kbd>, <label>, <q>, <s>, <samp>, <select>,
<small>, <span>, <strike>, <strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
放置规则
块级元素可以包含其他块级元素和行内元素。另一方面,字符数据和其他行内元素可以放在行内元素内,但块级元素不能放在行内元素内。
正确:将内联元素放在块级元素中
<p>这将是一个<strong>段落。</strong> </p>
错误:将块级元素放置在内联元素中
<strong><p>这将是一个段落。</p></strong>
6-5 通用属性
HTML 和 XHTML 中定义的元素具有大多数元素共有的属性。此类属性称为通用属性,但常用的通用属性包括:
样式属性
style 属性用于将样式表直接应用于元素。style 属性对于在 HTML 文档中部分指定样式很有用。
类属性
class 属性用于给元素一个类名。在一个文档中可以多次指定相同的类名。此属性对于将相同样式应用于文档中的多个位置很有用。
id 属性
id 属性用于给元素一个唯一的名称(标识符)。在一个文档中不能多次指定相同的 ID 名称。由于一个文档中只有一个,所以可以唯一标识以id命名的位置,并可以应用样式表和脚本。
标题属性
title 属性用于指定元素的附加信息。例如,在解释链接目的地或图像时使用它。它的显示方式取决于浏览器,但似乎经常显示为工具提示。
语言属性
lang 属性用于指定元素内容的语言。为汉语指定 zh-cmn-Han,为英语指定 en 作为属性值。例如,当英文句子混入汉语句子时,考虑到对语音浏览器的影响,指定lang属性。
目录属性
dir 属性用于指定元素内容的显示方向和阅读方向。如果要从左到右显示就指定ltr,像英文或者横排日文,如果要从右到左显示就指定rtl。
6-6 HTML 中的大小规范
在 HTML 中指定元素的显示大小时,指定元素的宽度和高度的长度。在 HTML 中有三种指定长度的方法:像素数、百分比 ( % ) 和长度比率。
1.以像素为单位指定
将像素数指定为整数值。
<table width=" 500 ">到</table>
像素数是一个单位,屏幕上1个像素的长度为1。实际显示在显示器上的尺寸取决于该显示器的分辨率,因此这并不意味着无论您在哪个显示器上显示它,实际尺寸都完全相同。
2.指定为百分比 ( % )
它指定为水平和垂直可显示区域(长度)的百分比 ( % )。
<table width=" 50% ">到</table>
3.按长度比指定
使用星号 (*) 指定长度比率。这种指定方法用于将长度分成多个部分,比如写“*,3*”,则长度将按1:3的比例进行分割。
如果同时指定以像素为单位的长度或百分比 ( % ) 和长度比率,则首先分配像素或百分比 ( % ) 的数量,其余长度用星号 ( * ) 代替。除以指定的比率经过 。
<frameset cols=" 200,3*,* ">
<frame src=" hidari.html ">
<frame src=" naka.html ">
<frame src=" migi.html ">
</frameset>