HTML定义:
一种超文本标记语言 (Hyper Text Markup Language),不是编程语言,而是一种标记语言(markup language)。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。
我的理解就是html就是一种标记,不需要转换成二进制,当浏览器阅读它的时候,由浏览器内部自己去翻译它然后执行。就好像我们写程序的时候,需要记录一些东西,那么就定义一套自己的规矩,读取的时候我们用自己的规矩去读, 而html文件就是外部文件。
HTML语法:
由开始标签<>和结束标签</>组成。比如<p>,</p>。大小写不敏感,推荐用小写,以适应以后的XHTML。
空元素在开始标签中关闭,如<br />。
最好有结束标签,有些浏览器能识别,但是为了标准化最好能有结束标签。
HTML可拥有属性,属性总是以名称/值对的形式出现。属性总是在 HTML 元素的开始标签中规定。如:<a href="http://www.w3school.com.cn">This is a link</a>。
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill "HelloWorld" Gates'。
可嵌套标签。
其他语法可参看参考资料。
不过重点记录一下一些不容易记的标签:
1. <pre></pre>,预留格式,指保留原本格式,比如提行,空格。
2. <abbr title="etcetera">etc.</abbr>, <acronym title="World Wide Web">WWW</acronym>,在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。提示框。
3. <bdo dir="rtl">
Here is some Hebrew text
</bdo>
bpo从右往左写。Here改成ereH。
4. <blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>
长引用会有格式显示。短引用会自动加引号。
5. <del>删除线,<ins>下划线。
6. <a href="/index.html">本文本</a>,<a href="http://www.microsoft.com/">本文本</a> 超链接。图像也可以作为超链接如下:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
有两种使用 <a> 标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
name 属性规定锚(anchor)的名称。
name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
<a name="tips"
>Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
<a href="http://www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>
如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。
<a href="/index.html"
target="_top">请点击这里!</a>
跳出框架。
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>,%20是空格。
7. 表格
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
表格的表头使用 <th> 标签进行定义。
<tr><th>Heading</th>
<th>Another Heading</th>
</tr>
表格中的空单元:<td></td>或者
<td> </td>后者在空单元格中添加一个空格占位符,就可以将边框显示出来。
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
带标题。
<th colspan="2">电话</th>或者<th rowspan="2">电话</th>跨列或行的表头。
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
带cellpadding,有padding的表格。
cellspacing同上,但指的是边框线条宽度。
<table border="1"
bgcolor="red">和<table border="1"
background="/i/eg_bg_07.gif">可改变表格背景颜色或背景图片。
同理属性还有width,align等。
8. frame 属性无法在 Internet Explorer 中正确地显示。
<table frame="box">,或者frame等于above,below,hsides,vsides等显示边框线条。
9. 无序列表
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有序列表
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
不同类型符号列表:
<ul type="disc">或者circle,square,规定其显示符号。
10. 表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
input 输入域,
<input type="text" name="firstname" />或者type为
radio,
<form>
<input type="radio" name="sex" value="male" />
Male
<br /><input type="radio" name="sex" value="female" />
Female
</form>
复选框:
<form>
<input type="checkbox" name="bike" />
I have a bike
<br /><input type="checkbox" name="car" />
I have a car
</form>
type还有button等。
<fieldset>
<legend>健康信息:</legend>
<form>
<label>身高:<input type="text" /></label>
<label>体重:<input type="text" /></label>
</form>
</fieldset>
本例演示如何在数据周围绘制一个带标题的框。
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面。
11. 插入图像
<img src="/i/eg_mouse.jpg" width="128" height="128">,gif相同。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<body background="/i/eg_background.jpg">
添加背景图片。
img也支持align属性。
usemap属性也支持。
<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>
12. 布局<table border="0" width="100%" cellpadding="10">
13. frame分布,可拖动,垂直布局使用cols,水平布局使用rows。
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
混合框架:
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
无法处理框架时的选择。
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>
不能改变框架尺寸的设置属性:
<frame src="/example/html/frame_a.html" noresize="noresize" />
内联框架<iframe src="/i/eg_landscape.jpg"></iframe>,老的浏览器不一定支持。
<frame src="/example/html/link.html#C10">跳转至框架内指定节。
<frameset cols="180,*">导航。