W3school的html教程学习笔记
换行
<br>
水平线
<hr>
预格式文本
<pre></pre>包围的文本会保留空行和空格
计算机输出标签
<code></code>代码
<kbd></kbd>键盘码：键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单
<tt></tt>打字机代码：呈现类似打字机或者等宽的文本效果
<samp></samp>计算机代码样本：字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。
<var></var>变量
地址标签
<address></address>
缩写
<abbr></abbr>定义缩写
<acronym></acronym>定义首字母缩写
<acronym title="World Wide Web">WWW</acronym>
title 可用于展示表达的完整版本
文字方向
<bdo></bdo>
如果浏览器支持双流向覆盖bi-directional override (bdo)，下一行会从右向左输出 (rtl)
<bdo dir="rtl">Here is some Hebrew text</bdo>
块引用
<blockquote></blockquote>浏览器会缩进处理会插入换行和外边距
<q></q>只加一个引号
删除和插入
<del></del>
<ins></ins>
一打有 <del>二十</del> <ins>十二</ins> 件
著作的标题
<cite></cite>浏览器通常会以斜体显示 <cite> 元素
锚
name
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
在新窗口打开链接
target="_blank"
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
跳出框架？
target="_top"
邮件链接
<a href="mailto:xxx"></a>
<a href="mailto:someone@microsoft.comsubject=Hello20%again">发送邮件</a>
使用 %20 来替换单词之间的空格
<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>
cc是抄送，bcc是密送，subject是主题，body是内容
在文字中排列图像
align
图像 <img src="/i/eg_cute.gif" align="bottom"> 底部与文本对齐，默认方式
图像 <img src ="/i/eg_cute.gif" align="middle">中部与文本对齐
图像 <img src ="/i/eg_cute.gif" align="top"> 顶部与文本对齐
创建图像映射
<map></map>
usemap属性
ismap属性怎么用？
<p>点击图像上的星球，去到图像详情。</p>
<img
src="/i/eg_planets.jpg" usemap="#planetmap" />
<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>
表格的标题
<caption></caption>
<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>跨两行
表格单元格边距与间距
cellpadding属性边距
cellspacing属性间距
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
表格背景
bgcolor属性背景颜色
background属性背景图片
在表格单元中排列内容
align属性
<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>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
表格的框架属性
frame属性
值有：box，above，below，hsides，vsides，不兼容ie
定义列表define
<dl></dl>list
<dt></dt>title
<dd></dd>detail
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
不同类型的无序列表，有序列表
<ul type="disc"></ul>无序列表，type：disc实心圆，circle圈，square实心方块
<ol type="A"></ol>有序列表，type：默认数字，A大写字母，a小写字母，I大写罗马数字，i小写罗马数字
框架
<frameset></frameset>
<frame></frame>
<noframes></noframes>
noresize属性
使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内
垂直框架
<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>
水平框架
<frameset rows="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>
为不支持框架的浏览器添加 noframes 标签。
<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">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>
混合框架
<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>
</html>
边框无法移动的框架
<html>
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
</html>
导航框架
<html>
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>
点击frame b以后的网页源代码
内联框架
<iframe></iframe>body里面的框架，某些浏览器不支持
<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
</body>
</html>
base标签
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
head标签包含的<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
文档描述
meta
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</head>
文档关键词
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
重定向用户
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>
<p>您将在 5 秒内被重定向到新的地址。</p>
</body>
</html>
html实体
如需显示小于号，我们必须这样写：<或 <
如需在页面中增加空格的数量，您需要使用 字符实体。
实体符号参考手册
<!DOCTYPE> 声明
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
版本html5： <!DOCTYPE html>
XHTMl
比html更严格
单选按钮
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
表单属性
<datalist> 元素
<datalist> 元素为<input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>
input 元素的输入类型
<input type="text">
type: text, password, submit, radio(单选)，checkbox(复选框), button, number，color，（date，month，week，time，datetime，tel）（火狐和IE不支持），range，email，search
<input type="number" name="quantity" min="1" max="5">
# 数字间隔为10
<input type="number" name="points" min="0" max="100" step="10" value="30">
# 可以选择颜色
<input type="color" name="favcolor" value="#ff0000">
#可显示为滑动控件
<input type="range" name="points" min="0" max="10">
# 输入邮箱
<input type="email" name="email">
# 搜索
<form action="/demo/demo_form.asp">
搜索谷歌：
<input type="search" name="googlesearch">
<input type="submit">
</form>
网友评论