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学习笔记

时间： 2024-08-01 18:38:28

W3School -- HTML4.01学习笔记的相关文章

w3school之JavaScript学习笔记-未完待续

在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com.cn/js/js_intro.asp 写入HTML输出 document.write("html元素") 对事件作出反应 <button type="button" onclick="alert('Welcome!')">点击这里<

2015.12.01学习笔记

本日学习课程简介:RAID,LVM,ip配置, 磁盘列阵 RAID 即为「Redundant Array of Independent Drives」或「Redundant Array of Inexpensive Drives (or Disks)」的简写,一般俗称「磁盘阵列」,就是以两台或更多的硬盘,组成一个或增加传输速度,或增大总容量,或增加文件备份的大磁盘. NO RAID 正常的数据存储,一但磁盘损坏,数据丢失,无任何安全性 RAID0 将数据平均分散在所有硬盘内,传输速度快,但一台硬

2018.04.01学习笔记

1.js函数没有重载,如果定义两个名字相同的函数,则该名字属于后定义的函数 function fun3(){ console.log("first"); } function fun3(){ console.log("second"); } fun3();//输出second 2.不能基本给基本类型的值添加属性,尽管这样做不会导致任何错误 3.js中所有函数的参数都是按值传递的,也就是说基本类型的参数的改变不会影响它原来的的值 4.调用typeof操作符,后面不用括

01 3dmax基础教程学习笔记

学习笔记,如有错误请留言,谢谢 01 3dsmax界面介绍 02 界面UI布局 03 查看视点 04 视点显示控制 05 选择方法

【opengl 学习笔记01】HelloWorld示例

<<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比较踏实,哈哈. 我的主题是,好记性不如烂笔头. ================================================================ 1. 下载glut库 glut库地址为:www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut全称为:OpenGL Utilit

【Ext.Net学习笔记】01：在ASP.NET WebForm中使用Ext.Net

Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http://www.ext.net/download/示例地址:http://examples.ext.net/ 1.首先下载Ext.Net,地址:http://www.ext.net/download/ ,有两种框架选择,选择下载WebForms 当前版本是2.5.1,压缩包里面包含了不同版本,分别用在相应.

Puppet学习笔记(CentOS6.3+Puppet3.01)

Puppet学习笔记(CentOS6.3+Puppet3.01) 技术 Add comments Oct262012 下了决心,好好学习puppet,周末专门去参加一个puppet的培训,难得朋友那么热心,组织大家一起去学习.我就提前做一下功课. 2012年10月29日:参加完两天的培训,深刻体会到puppet的强悍,当然讲Puppet的朋友,还是非常有经验,不只是puppet经验,还有讲课的经验,学习一个新东西的经验.一个最大的收获:官方的文档非常好,把puppet读完,你就差不多. Cont

OpenCV学习笔记（01）我的第一个OpenCV程序（环境配置）

昨天刚刚考完编译原理,私心想着可以做一些与考试无关的东西了.一直想做和图像处理相关的东西,趁这段时间有空学习一下OpenCV,搭建环境真是一件麻烦的事情,搞了近三个小时终于OK了.先来张图: 大致描述一下步骤吧: 一.安装前准备 1.VS2012(网上看到很多用的VS2010,但是基本不影响) 2.OpenCV 安装包(我下载的是最新的2.4.9) 二.安装OpenCV 1.解压OPenCV 说是安装,其实就是解压,OpenCV的Windows安装程序就是一个自解压程序: 这里我解压到C:\Pr

HTTP 学习笔记01

HTTP   hypertext transfer protocol (超文本传输协议) TCP/IP 协议集中的一个应用层协议 用于定义WEB浏览器与WEB服务器之间交换数据的过程以及数据本身的格式 HTTP 1.0  会话方式 HTTP 1.1 方式 HTTP 请求消息结构 一个请求行,若干消息头,以及实体内容 其中的一些消息头和实体内容都是可选的,消息头和实体内容之间要用空行隔开. GET   方式下是没有实体内容的 POST .PUT.DELETE 方式下请求消息才可以包含实体内容 HT