html学习笔记

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> 标签的方式：

1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 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>&nbsp;</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,*">导航。

 

 

参考资料：http://www.w3school.com.cn/html/html_intro.asp