学习HTML笔记

参考教程:HTML 教程

元素:开始标签(start tag, opening tag)如<html>,结束标签(end tag, closing tag)。

空元素:没有内容的元素,如<br /> 未来的HTML不允许使用没有闭合的标签

属性:HTML开始标签可以拥有属性,以名称/值对的形式出现,如:id="value"。如值有双引号,则要用单引号,如:id='Bill "HelloWorld" Gates'

建议HTML标签和属性用小写字母,XHTML要求小写。

适用于大多数HTML元素的属性:class, id, style, title

<html> </html>网页

<body> </body>可见的页面内容

<h1> </h1>标题heading. h1, h2, h3, h4, h5, h6,仅用于标题,不能为产生大号文字而使用。因为搜索引擎会索引网页内容。

<p> </p>段落paragraph

<a href="http://www.w3school.com.cn">This is a link</a>链接。 a指anchor 锚的一种类型是在文档中创建一个热点,当用户激活或选中(通常是使用鼠标)这个热点时,会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分,或触发某些与因特网服务相关的操作,例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记,该标记可以被超链接引用。

<img src="w3school.jpg" width="104" height="142" />图像 图像的名称和尺寸以属性的形式提供。

<hr /> 水平线

<br /> 换行

<!-- This is a comment --> 注释

<b> 粗体文本

<big> 大号字

<em> 着重文字

<i> 斜体

<small>

<strong>

<sub>

<sup>

<del> 在文字上显示删除线

<ins> 在文字下显示插入线(下划线)

属性

style属性用于改变HTML元素的样式。

已被废弃deprecated的标签和属性

<center> <font> <basefont> <s> <strike> <u>

align, bgcolor, color

应该用style属性来定义字体、颜色、尺寸、对齐方式,例如

<p;color:red;font-size:20px;text-align:center">A paragraph.</p>

HTMLl链接(锚)

常规链接:<a href="http://www.w3school.com.cn">This is a link</a>

新窗口打开: <a href="http://www.w3school.com.cn" target="_blank">This is a link</a> target还可设为"_top"意味着如果这是在框架中,则跳出整个框架显示这个链接,否则不设_top的话,只在此框架中显示新链接。

邮件链接:<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> 或 <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>

命名锚:<a id="tips">an anchor</a>

创建指向锚的链接:<a href="#tips">A link</a> 或 <a href="http://www.w3school.com.cn/html_links.htm#tips">A link</a>

表格

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格标签

<table>表格 <caption>表格标题 <th>表格表头 <tr>表格行 <td>表格单元d指data <thead>表格页眉 <tbody>表格主题 <tfoot>表格页脚 <col>表格列 <colgroup>表格列组

表格属性

border="1" 边框,"0"表示没有边框

colspan="2"或rowspan="2",表示此单元格跨两列或两行,示例:http://www.w3school.com.cn/tiy/t.asp?f=html_table_span

cellpadding="10" 单元格边距(文本至单元格边框的距离)

cellspacing="10" 单元格间距

bgcolor="red" 背景颜色

background="/i/eg_bg_07.gif" 背景图片

align="left" 对齐方式

有序列表 ordered list (1, 2, 3)

<ol>

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ol>

<ol>改为<ul>就是无序列表(点,没有数字)unordered list <li>代表list item

自定义列表 <dl> <dt> <dd>

form 表单

表单是一个包含表单元素的区域,本身不可见。表单元素用于输入信息,比如文本域<textarea>、输入框type="text"、下拉列表<select>、单选框type="radio"、复选框type="checkbox"、按钮type="button"。如:

<form>

First name:<input type="text" id="firstname" />

</form>

<form>

<select id="cars">

<option value="volvo">Volvo</option>

<option value="fiat" selected="selected">Fiat</option>

</select>

</form>
图像 <img src="url" alt="description" align="middle"> align设为"left"或"right"时,图像将浮动到文本的左侧或右侧。<area>定义图像地图中的可点击区域
框架frameset 可包含多个frame,每个frame是一个单独的html。
HTML字符实体

最常用的字符实体

显示结果 描述 实体名称 实体编号
空格 &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;

HTML头部 <head> 定义关于文档的信息
<head>中允许的标签:<title> <base>(base url) <link>定义资源引用 <meta>定义元信息
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author" content="w3school.com.cn"><meta name="revised" content="Vince Yuan,8/1/07"><meta name="generator" content="Dreamweaver 8.0en"><meta name="description" content="HTML examples"><meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
重定向: <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn"> 实际上,应使用服务器端重定向
脚本

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

HTML4.0标准属性核心属性(Core Attributes):class, id, style, title语言属性(Language Attributes):dir(文本方向), lang, xml:lang键盘属性(Keyboard Attributes):accesskey(键盘快捷键), tabindex
事件属性事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用,并用引号引起来。

<a href="/index.html" onmouseover="alert('Welcome');return false"></a>

窗口事件(Window Events) 仅在 body 和 frameset 元素中有效。unload, on unload表单元素事件(Form Element Events)图像事件(Image Events) onabort(当图像加载中断时执行脚本)键盘事件(Keyboard Events) onkeydown, onkeypress, onkeyup

鼠标事件(Mouse Events) onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

 

转载自:http://www.cnblogs.com/vinceoniphone/archive/2012/04/14/2447835.html

本文来自Awnlab.com麦芒实验室,转载请注明出处,谢谢合作。