html -基础知识

参见w3school/html

1.HTML 元素语法

  • HTML 元素以开始标签 起始
  • HTML 元素以结束标签 终止
  • 元素的内容 是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭 (以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

注释:未来的 HTML 版本不允许省略结束标签。W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐 使用小写,而在未来 (X)HTML 版本中强制 使用小写。

2.HTML 属性

HTML 标签可以拥有属性 。属性提供了有关 HTML 元素的更多的信息

属性总是以名称/值对的形式出现,比如:name="value"

属性总是在 HTML 元素的开始标签 中规定。

 

注释:属性和属性值对大小写不敏感 。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而 XHTML 要求使用小写的属性/属性值。

 

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题

 

HTML 4.01 / XHTML 1.0 参考手册

3.HTML 标题

默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行 ,比如段落、标题元素前后。

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

应该将 h1 用作主标题(最重要的,SEO惯用手法) ,其后是 h2(次重要的),再其次是 h3,以此类推。

4.HTML 段落

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!

当显示页面时,浏览器会移除源代码中 多余的空格和空行。所有连续的空格或空行都会被算作一个空格

 

5.HTML 文本格式化实例

<pre> 这是 预格式文本。 它保留了 空格 和换行。 </pre> <p>pre 标签很适合显示计算机代码:</p> <pre> for i = 1 to 10 print i next i </pre>

6.HTML 样式

style 属性的作用:

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

 

在 HTML 4 中,有若干的标签和属性是被废弃的 。被废弃(Deprecated)的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。

标签 描述
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色

对于以上这些标签和属性:请使用样式代替!

 

7.HTML 链接

使用 Target 属性,你可以定义被链接的文档在何处显示。

name 属性用于创建 HTML 内部的书签。书签不会以任何特殊方式显示,它对读者是不可见的。当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。

8.HTML 列表

列表项内部可以使用段落、换行符、图片、链接以及其他列表 等等。

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

9.HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat"


>

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

10.HTML 背景

如果你打算使用背景图片,你需要紧记一下几点:

  • 背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后,看上去还可以吗?
  • 对文字的注意力被背景图像喧宾夺主了吗?

<body> 标签中的背景颜色(bgcolor )、背景(background )和文本(text )属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃 。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表(CSS) 来定义 HTML 元素的布局和显示属性。

 

11.HTML 框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame)

Frame 标签定义了放置在每个框架中的 HTML 文档。

 

重要提示: 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内.

 

停止在 HTML 标签内部使用表现样式属性。 使用小写字母编写标签。记得关闭标签。决不要在没有 </p> 标签的情况下结束一个段落。

 

12.验证 HTML文件

HTML 文档是根据文档类型声明进行验证的。如果希望 HTML 文件被正确地验证,就要将恰当的 DTD 添加到文件的第一行。

HTML 4.01 Strict DTD 包含没有被反对使用或者不出现在框架中的元素和属性:

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

HTML 4.01 Transitional DTD 包含 strict DTD 中所有的内容,外加被反对使用的元素和属性:

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

HTML 4.01 Frameset DTD 包含 transitional DTD 中所有的内容,外加对框架的支持:

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

13.字符实体

字符实体有三部分:一个和号 (&),一个实体名称,或者 # 和一个实体编号,以及一个分号 (;)。

要在 HTML 文档中显示小于号,我们需要这样写:&lt; 或者 &#60;


最常用的字符实体

显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;

 

其他一些常用的字符实体

显示结果 描述 实体名称 实体编号
&cent; &#162;
£ &pound; &#163;
¥ 日圆 &yen; &#165;
§ &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide;

&#247;

 

14.Head 标签

头元素内的元素不会被浏览器显示出来。

根据 HTML 标准,仅有几个标签在 HTML 的头部分是合法的。它们是:<base>, <link>, <meta>, <title>, <style> 和 <script>。

 

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

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

 

<meta>标签

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn"> 重定向到新的地址

开发人员不应使用此技术强迫用户转到不同的页面,因为这样会使页面的可用性变差。相反,应使用服务器端重定向来进行自动页面定向。

 

注释:<meta> 标签永远位于 head 元素内部。

注释:元数据总是以名称/值的形式被成对传递的。

 

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

 

必需的属性
属性 描述 DTD
content some_text 定义与 http-equiv 或 name 属性相关的元信息 STF

 

可选的属性
属性 描述 DTD
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
把 content 属性关联到 HTTP 头部。 STF
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 content 属性关联到一个名称。 STF
scheme some_text 定义用于翻译 content 属性值的格式。 STF

 

15.HTML URL(统一资源定位器)

语法规则:

scheme://host.domain:port/path/filename


Scheme 定义因特网服务的类型 。最流行的类型是 http

domain (域)定义因特网域名 ,比如:w3school.com.cn。

host (主机)定义此域中的主机。如果被省略,缺省的支持 http 的主机是 www

:port (端口)定义主机的端口号 。端口号通常是被省略的。缺省的端口号是 80

path (路径)定义服务器上的路径 (一个辅助的路径)。如果路径被省略,资源(文档)会被定位到网站的根目录。

filename (文件名)定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html,或者依据 WEB 服务器设置的其他文件名。

URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。

 

16.HTML 脚本

使用 <script> 标签进行定义。请注意你可以使用 type 属性来指定脚本语言。

 

应对老版本的浏览器方法:

JavaScript:

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

17.HTML 4.0 事件属性

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为。

 

仅在 body 和 frameset 元素中有效。

窗口事件 (Window Events)
属性 描述
onload 脚本 当文档载入时执行脚本
onunload 脚本 当文档卸载时执行脚本

 

仅在表单元素中有效。

表单元素事件 (Form Element Events)
属性 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

 

该属性可用于 img 元素:

图像事件 (Image Events)
属性 描述
onabort 脚本 当图像加载中断时执行脚本

 

在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。

键盘事件 (Keyboard Events)
属性 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

 

在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。

鼠标事件 (Mouse Events)
属性 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

 

 

你可能感兴趣的:(html,框架,浏览器,XHTML,脚本,文档)