简介
HTML：超文本标记语言（英文：HyperText Markup Language，HTML）
html是一种用来说明页面排版方式的标记语言，标准有W3C确定，最新版本叫HTML5
W3C：万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会
学习资料W3C、W3C school
软件：mac os：TextWrangler；Windows：PSPad
HTML
HTML文件框架
<!DOCTYPE html> <!-- 指明是用html5编写的 -->
<html>
<head> <!-- 放：配置、选项、代码 -->
<title>我的页面</title> <!-- 在浏览器顶部（不同的浏览器显示的位置不一样）显示页面标题 -->
<meta charset=utf-8> <!-- 注意保存时需要保存成utf-8的 -->
</head>
<body> <!-- 放：正文 -->
我的第一个HTML页面
</body>
</html>
段落
<body>
我的第一个HTML页面<br><!-- 换行 -->
<hgroup> <!-- 标题组 -->
<h1>泰戈尔</h1> <!-- 一级标题，一共有六级标题 -->
<h2>Rabindranath Tagore</h2>
</hgroup>
<p><!-- 段落：结束后会空一行 -->
夏天的飞鸟，飞到我的窗前唱歌，又飞去了。
秋天的黄叶，它们没有什么可唱，只叹息一声，飞落在那里。
</p>
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。<!-- wbr：word break 表示：“如果需要，浏览器将在此换行“。浏览器窗口或者父级元素的宽度足够宽时，不换行；而当宽度不够时，主动在此标记处进行换行。一般作用于一个长单词的内部。 -->
</p>
<p>
世界上的一队小小的漂泊者呀，请留下你们的足印在我的文字里。
o troupe of little vagrants of the world, leave your footprints in my words.
</p>
世界对着它的爱人，把它浩翰的面具揭下了。它变小了，小如一首歌，小如一回永恒的接吻。
the world puts off its mask of vastness to its lover. it becomes small as one song, as one kiss of the eternal.
<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb<wbr>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>cc</p>
</body>字体样式
<!DOCTYPE html>
<html>
<head> <!-- 放：配置、选项、代码 -->
<meta charset=utf-8> <!-- 注意保存时需要保存成utf-8的 -->
</head>
<body>
<p><!-- 段落：结束后会空一行 -->
字体样式<b>加粗Bold</b><!-- 加粗 -->，<i>斜体Italic</i><!-- 斜体 -->。
<b>加粗Bold嵌套<i>斜体Italic</i>结束end</b>咯.
<tt>打字机字体Western monospaced fonts</tt><!-- 打字机字体，等宽西文字体 -->
<small>小一点small</small><!-- small -->
<del>删除delete</del><ins>插入insert</ins><s>过时的不提倡使用的s</s><br><!-- del、ins、s是格式不是结构 -->
sup上标,sub下标：a<sup>2</sup>+b<sub>0</sub><!-- sup上标,sub下标 -->
<mark>强调mark</mark><!-- mark强调，html5新增标记 -->
</p>
</body>
</html>短语格式
<!DOCTYPE html>
<html>
<head> <meta charset=utf-8> </head>
<body>
<em>Emphasize强调</em>
<strong>strong着重</strong>
<dfn>definition定义</dfn>
<code>code代码</code>
<samp>sample code例子代码</samp>
<kbd>kdb用户输入</kbd><!-- kdb：键盘、用户输入 -->
<var>variable变量</var>
<cite>cite引用</cite>
</body>
</html>特殊格式
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<address><!-- address表示地址 -->
<blockquote><!-- blockquote缩进（缩进一个tab加上/下面空一行），可嵌套 -->
Rm 401 CKP West Wing<br>
<blockquote>
<q>
玉泉 Camps
</q><!-- q小引用 --><br>
</blockquote>
浙江 U
</blockquote>
</address>
<pre><!-- 预格式化 -->
int main(){
print("Hello\n");
return 0;
}
</pre>
</body>
</html>属性
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<hr width=50%><!-- hr：Horizon水平线 --><!-- width=50%指水平线相对浏览器的宽度 -->
<hr width=50><!-- width=50指50个像素点 -->
<hr width=50% align=left size=10><!-- align=left靠左 --><!-- size=10水平线的宽度为10个像素 -->
<abbr title="中华人民共和国">PRC</abbr><!-- abbr缩写 --><!-- title提示浮云 -->
<h1 title="第一章">第一章 毕业舞会以后</h1>
<bdo dir=rtl>一二三<bdi>四五六</bdi>七八九十</bdo><!-- bdo定义文字方向 --><!-- dir=rtl：逆向 -->
<!-- bdi：html5的标记。指的是 bidi 隔离。允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。 -->
a<2<!-- <用< -->
a>2<!-- >用> -->
&<!-- &用& -->
<!-- 不可打断的空格 -->
&
Lü<!-- 小写的yu用ü -->
LÜ<!-- 大写的yu用Ü -->
</body>
</html>列表
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<p>
餐后的饮料有：
<ul><!-- unordered list不排序的列表/无序列表 -->
<li>绿茶</li><!-- list item列表项 -->
<li>红茶</li>
<li>咖啡</li>
</ul>
<ol start=-1><!-- ordered list排序的列表/有序列表 --><!-- start=-1列表从-1开始 -->
<li>绿茶</li><!-- list item列表项 -->
<li>红茶</li>
<li>咖啡：
<ul>
<li>不加糖</li>
<li>不加奶</li>
</ul>
</li>
</ol>
<dl><!-- definition list -->
<dt>方糖</dt><!-- dt：词条 -->
<dd>方的糖，甜的</dd><!-- dd：解释 -->
</dl>
</p>
</body>
</html>图片
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<p>
<img src="mama.jpg" alt="mama.jpg" width=50% height=400><!-- 在html中图片是一个字符 -->
<!-- alt规定在图像无法显示时的替代文本。 -->
<img src="/img/mama.jpg"><!-- src可用相对路径 -->
<img src="http://img2.quotes.ws.126.net/chart/stimechart3/0000001.png"><!-- src可用其它网站的图片的url --><!-- src可用三种格式的图片：.jpg .gif .png -->
我是文字哦^_^
<iframe src="http://news.163.com"></iframe><!-- iframe 元素会创建包含另外一个文档的内联框架（即行内框架） -->
</p>
</body>
</html>链接
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<p>
<a href="http://news.163.com/" target=_blank>网易新闻</a> <!-- 超链接,注意href加http://表示从互联网取 -->
<!-- target表示窗口在什么地方打开，target=_blank表示在新窗口打开 -->
<a href="second.html">second.html</a> <!-- 注意href不加http://表示从本地取 -->
<a href="#here">当前页面的段落id=here</a> <!-- 跳转到当前页面的指定id -->
<a href="second.html#here">second.html页面的段落id=here</a> <!-- 调整到其他页面的指定id -->
<!-- usemap在图片上建立影射 -->
<img src="mama.jpg" width=100 height=100 usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,50,50" href="http://news.163.com/" alt="news" target=_blank>
<area shape="circle" coords="75,75,25" href="http://www.163.com/" alt="home">
</map>
</p>
<p id="here"><!-- id="here" -->
点击上面的“当前页面的段落id=here”会跳到这里哦
</p>
</body>
</html>表格
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body>
<p>
前面
<!-- 在html中一张表格是一个字符 -->
<table border="1"><!-- border="1"有格子线，不加没有格子线 -->
<caption>表格</caption><!-- caption表格的标题 -->
<thead>
<tr>
<th>OS</th><!-- th表头 -->
<th>Chinese</th>
<th>French</th>
</tr>
</thead>
<tbody>
<tr>
<td>iOS5</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Windows</td>
<td></td>
</tr>
<tr>
<td colspan="3">Linux</td><!-- colspan规定此单元格可横跨的列数，rowspan规定此单元格可横跨的行数 -->
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
后面
</p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
