W3School -- HTML4.01学习笔记

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 = "submit">),表单的内容会被传递到另外的文件,表单的action属性定义了目的文件的文件名,该文件通常会对表单传递的数据进行相关的处理。
 
框架:
框架结构标签<frameset>
                 框架结构标签(<frameset>)
  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
通过使用框架,可以再浏览器中不知显示一个页面,每个框架都独立于其他框架,缺点是:开发人员必须跟踪跟多的html文档,很难打印整张页面。
 
框架标签:<frame>定义了放置在每个框架中的html文档,noresize属性控制是否可以用鼠标调整边框的大小,赋值noresize
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="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 执行 --> 标签。

 

W3School -- HTML4.01学习笔记,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。