HTML
-
(Hyper Text Markup Language) —— 超文本标记语言
-
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
-
开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
-
HTML 文档由嵌套的 HTML 元素构成。
-
HTML 提示:使用小写属性
- 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
- 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号
-
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
-
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,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。如果需要使用其它的颜色,需要使用十六进制的颜色值。
-
应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
-
HTML5 之前的 HTML 版本是HTML 4.01
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题(head)
<p> 与 </p> 之间的文本被显示为段落(paragraph)
HTML 标题
HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。在 href 属性中指定链接的地址。
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址,通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。。
定义图像的语法是:<img src="url" />如:
<img src="w3school.jpg" width="104" height="142" />
替换文本属性(Alt)alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat">
背景图像:
gif 和 jpg 文件均可用作 HTML 背景。
如果图像小于页面,图像会进行重复。<body background="/i/eg_background.jpg">
文字与图片对齐:
align="bottom";align="middle" ;align="top" bottom 对齐方式是默认的对齐方式。
align ="left"带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
align ="right"带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
创建图像映射:
img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
如:
<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" />
HTML 水平线
HTML 水平线通过<hr /> 标签在创建。
<hr />
HTML 注释
HTML 注释
<!-- This is a comment -->
HTML 折行
HTML 折行(换行)是通过<br /> 标签定义的,它没有结束标签。<br>和<br/>功能一样,<br> 在所有浏览器中的显示都没有问题,但使用 <br /> 也是更长远的保障。
<p>This is<br />a para<br />graph with line breaks</p>
浏览器会自动地在段落的前后添加空行,使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!
HTML 短引用
HTML 通过<q> 用于短的引用浏览器通常会为 <q> 元素包围引号。
<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>
HTML长引用
HTML 通过<blockquote>用于长引用
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
使用 blockquote 元素的话,浏览器会插入换行缩进处理和外边距,而 q 元素不会有任何特殊的呈现
HTML长引用
HTML 通过<abbr>缩写或首字母缩略语,对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
<abbr title="World Health Organization">WHO</abbr>
HTML 定义
HTML 通过<dfn>定义项目或缩写的定义
1. 如果设置了 <dfn> 元素的 title 属性,则定义项目:
<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>
2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素,则 title 定义项目:
<p>The<dfn><abbr title="World Health Organization">WHO</abbr></dfn>
was founded in 1948.</p>
上两者结果:The WHO was founded in 1948.
3.否则,<dfn> 文本内容即是项目,并且父元素包含定义。
<p>The<dfn>WHO</dfn> World Health Organization was founded in 1948</p>
The WHO World Health Organization was founded in 1948.
如果您希望简而化之,请使用第一条,或使用 <abbr> 代替。
HTML地址
HTML 通过<address>联系信息,此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML著作标题
HTML 通过<cite>用于著作标题,浏览器通常会以斜体显示 <cite> 元素。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
HTML双向重写
HTML 通过<bdo>用于双向重写(bi-directional override)文字方向反转
<bdo dir="rtl">Here is some Hebrew text</bdo>
HTML链接
HTML 通过==标签在中创建链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。有两种使用== 标签的方式:1.通过使用 href 属性 - 创建指向另一个文档的链接2.通过使用 name 属性 - 创建文档内的书签
<a href="url">Link text</a>
href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。
target="_blank"可以定义在新窗口打开文档
name 属性规定锚(anchor)的名称。
1.您可以使用 name 属性创建 HTML 页面中的书签。
2.书签不会以任何特殊方式显示,它对读者是不可见的。
3.当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
4.命名锚的语法:
<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 这个命名锚了。
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
| 标签 | 描述 |
| :----- | :--------------------------- |
| <img> | 定义图像。 |
| <map> | 定义图像地图。 |
| <area> | 定义图像地图中的可点击区域。 |
HTML 表格
HTML 通过
<table>
创建表格每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
没有边框: border=“0”
带有普通的边框:border=“1”
带有粗的边框:border=“8”
带有很粗的边框:border=“15”
表格中的空单元格:
在空单元格中添加一个空格占位符,就可以将边框显示出来。
<td> </td>
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
带有标题的表格
<caption>我的标题</caption>
横跨两列的单元格:
<th colspan="2">电话</th>
横跨两行的单元格:
<th rowspan="2">电话</th>
单元格边距(cellpadding):
cellpadding=“10”
单元格间距(cellspacing)
cellspacing=“10”
框架(frame)属性:
frame=“box”,框着
frame=“above”,上线
frame=“below”,下线
frame=“hsides”,上下线
frame=“vsides”,左右线
向表格添加背景颜色或者背景图像
<h4>背景颜色:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景图像:</h4>
<table border="1"
background="/i/eg_bg_07.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
向表格单元添加背景颜色或者背景图片
<html>
<body>
<h4>单元背景:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/i/eg_bg_07.gif">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
属性(少用或者不用):
<h1 align="center"> 拥有居中排列的附加信息
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息。
<p style="background-color:PowderBlue;font-size:30px;font-family:times;color:green">This text is 30 pixels high</p>拥有字体,颜色,背景颜色等
在表格单元中排列内容:
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left"