首页 > 代码库 > W3School -- HTML4.01学习笔记

W3School -- HTML4.01学习笔记

2024-07-15 01:56:45   223人阅读

HTML不是一种编程语言而是一种标记语言，标记语言是一套标记标签，HTML使用标记标签来描述网页。

 
标签属性：有一对尖括号包含关键字组成，一般成对出现，第一个标签叫开始标签（开放标签），第二个标签叫结束标签（闭合标签）。
 
HTML文档 == 网页 ，HTML文档描述网页，文档包含HTML标签和文本。
 
成对出现的标签，如<a></a>,其中结束标签的"/"前面不能有空格等，否则标签不会被识别。
 
HTML元素是指从开始标签到结束标签的所有代码。没有内容的元素被称为空元素，空元素在开始标签中结束。
 
HTML4.01对大小写不敏感，w3c推荐使用小写，在XHTML中强制使用小写。
 
属性：
HTML标签可以拥有属性，属性提供了有关标签的更多的信息。
 
属性总是以名/值对的形式出现，并且只存在于开始标签中。
 
小写属性，始终为属性值加引号。
 
标题：
 
标题（heading）是通过<h1>---<h6>标签来实现的
 
浏览器回自动的在标题前后添加空行，默认情况下，浏览器会自动在块级元素前后添加空行，如标题，段落等
 
请确保使用标题标签仅仅是为了实现标题，而不是为了实现字体和粗体的效果，因为搜索引擎使用标题为网页的结构和内容编制索引，同时用户可以通过标
 
题来快速的浏览网页，所以用标题来呈现文档结构是很重要的。
 
<pre></pre>:预格式化标签，保留文本中的空格和换行，比较适合显示计算机代码。
<big></big> : 定义大号字体。反之<small></small>
<em></em> : 定义着重文字。
<strong></strong> : 定义加重语气。
<kbd></kbd> :  定义键盘码。
<sample></sample>:定义计算机代码样本。
 
<a>超链接标签name属性的用法：
在跳转的目标标签<a>里面添加其name属性，并为该属性赋值，然后在跳转的入口处用<a>标签的href属性，为href属性赋值，赋值的格式为# + name属性值，这样单击这个超链接，那么页面就会跳转到规定了相应name值的地方。因为name属性只有<a>标签具有，难道只能在跳转的目的地用<a>标签定义才能跳转成功吗？显然不是，name属性也可以用id属性代替，这样只要规定某个标签的id属性，那么就可以跳转到这里来。
也可以跳转到其他页面的某个地方，只要在相应的在对应的href属性只里面加上该页面的地址然后再加上#和锚点值。
 

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

 

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

 

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

 
<img>标签的alt属性，用于在图像无法加载的时候，在图像位置现实的文本，为每个图像加上alt属性是个好习惯，这有助于更好的显示信息，而且对于那些使用纯文本浏览器的人来说是非常有用的。
当图像嵌入在文本中的时候，align属性用于控制图像与文本的对其方式，默认值为bottom，即图像的底部与文本持平。
 
表格：
 
<table>标签：border属性用于定义表格的边框，cellpadding定义单元格内部的padding，cellspacing定义单元格之间的距离。
<th>标签：表格头，用于表格表格的某行或者某列数据的意义，rowspan属性用于定义该单元格跨几行，colspan属性定义单元格跨几列。
<tr>标签：表格表示行的标签   。
<td>标签：表示具体的存放数据的单元格。
<caption>表格的标题。
<thead><tfoot><tbody><col><colgroup>标签后续学习补充、
每个单元格都有align属性，用于规定文本在单元格中的排列。
 
table标签的frame属性：

注释：frame 属性无法在 Internet Explorer 中正确地显示，在ie9及以上的版本中显示正常，ie8及以下显示效果不一致。

Table with frame="box":表格显示四个边框，内部单元格没有边框

Table with frame="above":表格只显示上边框

Table with frame="below":表格只显示下边框

Table with frame="hsides":表格显示上下边框

Table with frame="vsides":表格显示左右边框

列表：
列表可以嵌套。ul标签嵌套的话，type属性原则不重复，即外层是实心圆点，则内层变为空心圆点，在内层变为实现方块，若嵌套超过三层则往内部的列表一直为实心方块列表样式。ol嵌套则不会改变，一直为默认的数字列表。
<ul>标签：定义无序列表，type属性（disc，circle，square）定义列表前面是实心圆点，空心圆点，实心方块。
<ol>标签：定义有序列表，type属性（默认数字，A，a ，I，i）定义列表前面分别是数字，大写字母，小写字母，大写罗马字母，小写罗马字母。
<li>标签：有序和无序列表的列表项。
<dl>标签：自定义标签
<dt>标签：自定义标签的项目
<dd>标签：自定义标签项目的描述、
 
表单：
表单（<form></form>）是一个包含表单元素的区域。表单元素是指允许用户在表单中输入信息的元素。
多数情况下被用到的标签是<input>标签，输入类型有该标签的type属性决定。
type取值：text，radio ，checkbox、button、reset、submit。。。
<select></select>下拉列表。<option>下拉列表的选项，value属性表示选中该选项之后返回的变量值，若要默认选中某项，则为该项的selected赋值”selected“
<textarea rows = "" cols = "">:rows和cols分别表示该文本区域的面积。
 
<fieldset>标签和<legend>标签配合实现如下效果：
表单的action属性：当用户单击确认按钮的时候(<input type = "submit" value = "http://www.mamicode.com/submit">)，表单的内容会被传递到另外的文件，表单的action属性定义了目的文件的文件名，该文件通常会对表单传递的数据进行相关的处理。
 
框架：
框架结构标签<frameset>
                 框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
通过使用框架，可以再浏览器中不知显示一个页面，每个框架都独立于其他框架，缺点是：开发人员必须跟踪跟多的html文档，很难打印整张页面。
 
框架标签：<frame>定义了放置在每个框架中的html文档，noresize属性控制是否可以用鼠标调整边框的大小，赋值noresize
<frameset cols="25%,75%">   <frame src="http://www.mamicode.com/frame_a.htm">   <frame src="http://www.mamicode.com/frame_b.htm"></frameset>

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

 
<iframe>内联框架用于在网页中显示网页，frameborder属性决定是否显示周围的边框。<iframe>标签可以作为超链接打开的目标，用法：为<iframe>标签设置name属性，然后超链接标签<a>的target属性值赋值为iframe的name属性值，则该链接的网页将在iframe中打开。
 
颜色：
 

提示：仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果使用其它颜色的话，就应该使用十六进制的颜色值。

 
<!DOCTYPE>文档类型，帮助浏览器正确的显示网页，不是html标签。
 
在web世界里面有很多种文档，只有了解文档的类型，浏览器才能正确的加载他们。
同样的HTML也有很多版本，只有完全明白要加载的页面使用的HTML版本，浏览器才能正确的加载他们，它为浏览器提供一项信息，即HTML文档使用什么版本编写的。
 

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

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

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

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

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

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

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
放在<head>元素内的标签：

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head><base href="http://www.w3school.com.cn/images/" /><base target="_blank" /></head>

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">document.write("Hello World!")</script><noscript>Your browser does not support JavaScript!</noscript>

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

实例

JavaScript:

<script type="text/javascript"><!--document.write("Hello World!")//--></script>

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

 

xhtml与 HTML 相比最重要的区别：

文档结构

  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的，必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。<html xmlns="http://www.w3.org/1999/xhtml">
  • <html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的
在XHTML中不鼓励使用name属性，用id属性代替。

重要的兼容性提示：

你应该在 "/" 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容。

语言属性（lang）

lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。

如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang，像这样：

<div lang="no" xml:lang="no">Heia Norge!</div>

注释定义和用法

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：

<script type="text/javascript"><!--function displayMsg(){alert("Hello World!")}//--></script>

注释：注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。

 


联系
我们