文档章节

HTML

Ivy_Green
 Ivy_Green
发布于 2015/01/27 19:14
字数 3492
阅读 16
收藏 0

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

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

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

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

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

 

HTML 段落是通过 <p> 标签进行定义的。

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

 

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

 

HTML 链接是通过 <a> 标签进行定义的。在 href 属性中指定链接的地址。<a href=”地址连接” target=”_blank”></a> target属性令连接在新窗口打开

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。

提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例:

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">基本的注意事项 - 有用的提示</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。

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

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

 

HTML 图像是通过 <img src=”图像所在位置” alt=”图片无法显示时显示的文字” align=”bottom/top/middle/left/right”> 标签进行定义的,align定义文字和图片的相对位置,默认为bottom

如何把一幅普通的图像设置为图像映射?

<a href="/example/html/html_ismap.html">

<img src="/i/eg_planets.jpg" ismap />

</a>状态栏网址有坐标的变化

创建图像映射:

<html>

<body>

<p>请点击图像上的星球,把它们放大。</p>

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />定义图像

<map name="planetmap" id="planetmap">定义图像地图

<area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />定义图像地图中的可点击区域

<area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />

</map>

<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" "name" 属性。</p>

</body>

</html>

 

<hr /> 标签在 HTML 页面中创建水平线。

 

<b></b><strong></strong>都是加粗,<big></big>让字体变大,<em></em>是强调,字体倾斜,<i></i>是斜体,<small></small>让字体变小,<sub></sub>让文字在下半部分,<sup></sup>则是上半部分。

 

<pre></pre>是预格式文本,保留了空格和换行,适合显示计算机代码。还有<code></code><kbd></kbd><tt></tt><samp></samp><var></var>常用于显示代码。

 

<bdo dir="rtl">Here is some Hebrew text</bdo> 如果浏览器支持 bi-directional override (bdo)则输出txet werbeH emos si ereH

 

<blockquote></blockquote>使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。Blockquote是长引用,<q></q>是短引用

 

<del></del>文本删除线,<ins></ins>文本下划线

 

<link rel="stylesheet" type="text/css" href="mystyle.css"> 连接外部样式

 

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性,表格将不显示边框。表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

为了避免这种情况,在空单元格中添加一个空格占位符&nbsp;,就可以将边框显示出来。

<caption></caption>定义表格标题

Colspan=”合并的列数rowspan=”合并的行数cellpadding=”单元格内容与边框之间的距离cellspacing=”单元格与单元格之间的距离

<thead>  定义表格的页眉。

<tbody>  定义表格的主体。

<tfoot>   定义表格的页脚。

<col>       定义用于表格列的属性。

<colgroup>      定义表格列的组。

提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

提示:使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。如需学习更多有关 CSS 的知识,请访问我们的 CSS 教程。

提示:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

 

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

 

HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

 

表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义。<input type=”text/password/radio/checkbox/submit/button”></input>文本域或密码域或单选框或多选框或确认或按钮。

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。如下:

<form name="input" action="html_form_action.asp" method="get">

Username:

<input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

<form>    定义供用户输入的表单

<input>   定义输入域

<textarea>      定义文本域 (一个多行的输入控件)

<label>    定义一个控制的标签

<fieldset>        定义域

<legend>         定义域的标题

<select>           定义一个选择列表

<optgroup>     定义选项组

<option>          定义下拉列表中的选项

<button>         定义一个按钮

 

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

使用框架的坏处:

    开发人员必须同时跟踪更多的HTML文档

    很难打印整张页面

框架结构标签(<frameset>

        框架结构标签(<frameset>)定义如何将窗口分割为框架

        每个 frameset 定义了一系列行或列

        rows/columns 的值规定了每行或每列占据屏幕的面积

编者注:frameset 标签也被某些文章和书籍译为框架集。

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

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"

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

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

iframe 用于在网页内显示网页。

 

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

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

           背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k

           背景图像是否与页面中的其他图象搭配良好。

           背景图像是否与页面中的文字颜色搭配良好。

           图像在页面中平铺后,看上去还可以吗?

  对文字的注意力被背景图像喧宾夺主了吗?

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

 

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。大多数的浏览器都支持颜色名集合。

提示:仅仅有 16 种颜色名被 W3C HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。如果需要使用其它的颜色,需要使用十六进制的颜色值。

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

 

以下标签都可以添加到 head 部分:<title><base><link><meta><script> 以及 <style>

 

<base target="_blank" />使页面中的所有标签在新窗口中打开。无论有没有设target,放在head

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

<head>

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

<base target="_blank" />

</head>

 

<meta name="author" content="w3school.com.cn">标识了创作者和编辑软件,描述文档。

<meta name="description" content="HTML examples"><meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">描述文档并定义关键词

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />重定向页面,5秒内跳转到http://www.w3school.com.cn

元数据(metadata)是关于数据的信息。

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

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

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

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

 

title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够:

    定义浏览器工具栏中的标题

    提供页面被添加到收藏夹时显示的标题

显示在搜索引擎结果中的页面标题

 


© 著作权归作者所有

Ivy_Green
粉丝 0
博文 1
码字总数 3492
作品 0
私信 提问
51个css时间轴

51个纯css时间轴 51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。 纵向时间轴 时间轴截图 时间轴 时间轴: HTML ...

左辅
2017/12/21
0
0
分享HTML 5的参考手册,演讲稿,电子书和教程

今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我们谈论HTML5将成为Flash的替代品。现代...

未来十年
2012/01/07
0
0
网络爬虫引擎--simspider

simspider - 网络爬虫引擎 1.简介 simspider是一个轻巧的跨平台的网络爬虫引擎,它提供了一组C函数接口用于快速构建你自己的网络爬虫应用,同时也提供了一个可执行的爬虫程序用于演示函数接口...

calvinwilliams
2015/02/09
5.3K
1
分享3个博客HTML5模板

1.素材类别:半透明 博客html模板 个人博客 半透明html5博客主题,半透明,博客,博客html模板,个人博客,html5,灰色,半透明html5博客主题是一款适合用于个人博客主题,风格很不错. 半透明html5博...

向日葵饼干
2014/05/27
30
1
如何做优化才能提高在百度排名

4shared.com/photo/5NQeORB9/_20131105.html 4shared.com/photo/HXyeRNl-/_20131105.html 4shared.com/photo/jvPoYl-/20131105.html 4shared.com/photo/inYzb-GJ/_20131105.html 4shared.com......

zzhzyy
2013/11/05
44
0

没有更多内容

加载失败,请刷新页面

加载更多

Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。 语法: @import (keyword) "filename"; 以下是导入指令的相关详情: reference,使用较少的文件但不输出。 ...

凌兮洛
9分钟前
6
0
Docker下实现MySQL主从(读、写分离)同步配置

docker下实现两个(或多个)mysql容器的主、从数据库同步配置,首先要明白docker容器的相互通信关系,默认是使用的bridge模式: 也就是说,通过docker run命令创建docker容器是每个容器都有自己...

源哥L
19分钟前
11
0
一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
38分钟前
16
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
今天
23
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部