<!DOCTYPE html>表示HTML5文档申明，不区别大小写，通常这么写。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">表示HTML4文档申明。
1 <!DOCTYPE html> 2 <html lang="zh-CN"><!--lang="zh-CN"可以不写，作用不大，考虑文档规范性一般加上--> 3 <head> 4 <meta charset="utf-8"><!--无此行网页会显示乱码--> 5 <title>HTML页面设计</title> 6 </head> 7 <body> 8 这是中文 9 </body> 10 </html>
元素：开始标签到结束标签之间的所有内容，例:<h1>表示标题</h1>为一个元素。
Sublime给HTML快速注释快捷键：Ctrl+/。
<hr>单标签，加一条水平线。
<p>表示一个段落</p>
元素的属性：<p 属性名=属性值></p> 例<body bgcolor="blue">背景色，可设red、green、blue、yellow、orange、black等，或使用16进制格式#F5f5Dc</body>、<h1 align="center">对齐方式，默认left，可设right、center</h1>
文本元素：
<b>加粗文字</b>
<strong>强调文本，实际效果就是给文字加粗</strong>
<br>强制换行，br换行无段间距，p换行有段落间距。
有换行作用的标签：<h1></h1>-<h6></h6>、<p></p>、<br>
<i>文字倾斜italic</i>
<em>强调important，实际效果是倾斜</em>
<dfn>语义上表示定义术语，是对一个词或短语的解释，实际效果就是文字倾斜。</dfn>
<cite>语义上表示引用其他作品的标题，实际效果就是倾斜文字</cite>
<del>给文字加删除线</del>
<s>语义上表示不准确的删除，实际效果就是给文字加删除线</s>
<u>给文字加下划线underline</u>
<ins>实际效果也是给文字加下划线</ins>，语义上是添加一段文字，起强调作用。
<small>添加小号字体，语义上表示免责声明和澄清声明</small>
<sub>下标subscript</sub>
<sup>上标superscript</sup>
<abbr>表示一段文本的缩写，例WTO，在文本显示上没有实际效果</abbr>
<q>语义上表示引用来自其他地方的内容，实际效果是给文字加双引号</q>
<wbr>安全换行，abcdefghijklmnopqrstuvw<wbr>xyz，在浏览器窗口变小过程中如果不加<wbr>则整个一串字母会同时换下一行，如果加了<wbr>会先在<wbr>处换行。
<code>function(){}</code>用来表示计算机代码片段
<var>num</var>用来表示编程语言中的变量
<samp>表示程序或计算机的输出</samp>
kdb元素表示某部分内容是由用户利用键盘输入的，请按<kdb>Enter</kdb>键
<ruby>拼<rt>pin</rt></ruby><ruby>音<rt>yin</rt></ruby> <ruby>拼音<rt>pin yin</rt></ruby>给汉字加拼音，部分浏览器支持不友好。
<bdo dir="rtl">文字方向，默认是ltr，即left to right从左向右，可设rtl，即right to left从右到左</bdo>
<mark>给文字加上黄色背景</mark>
<time>语义上表示日期时间，无特殊效果2017-04-16 16:18</time>
<span>表示一般性文本，无特殊效果</span>
<a href="https://www.sogou.com/">搜狗</a>链接到网站<br>
<a href="https://www.sogou.com/" target="_blank">搜狗</a>链接到网站<br> target默认值为_self表示在当前窗口打开，可省；_blank为表示在新窗口打开。
<a href="content10.pdf">本地文件</a>链接到本地文件<br>
<a href="http://www.163.com"><img src="D:图片图片.jpg"></a>图片链接<br>
<a href="mailto:188888888889999@qq.com">给我发邮件</a>发送邮件
<a href="mysqlconnectorjava.zip">下载文件</a>浏览器遇到无法解析的内容会自动下载
<a href="#1">锚点1</a>
<a href="#id2">锚点2</a>
<a href="#name3">锚点3</a> <br><br><br>
<a id="1">锚点1</a>id表示元素的身份证，具有唯一性。 <br><br>
<a id="id2">锚点2</a> <br><br>
<a name="name3">锚点3</a>name表示元素的名称，可以重复 <br><br><br>
<img src="D:图片图片.jpg" alt="图片无法显示时的替代文字" width="50%" height="100" title="当鼠标滑到图片上则显示此文字">指定图片的宽高，可用像素或百分比，如果只指定宽高其中之一则宽高比例不变，高度若设为百分比则无效，因为浏览器的高度不是固定的，所以高度只对像素有效。
<ul type="square">
<li>无序列表unordered list</li>
<li>type默认值为disc实心圆，可设circle空心圆、square实心正方形</li>
</ul>
<ol start="6">
<li>有序列表ordered list</li>
<li>type默认为数字</li>
<li value="11">有序列表ordered list</li>
<li>type默认为数字</li>
</ol>
<ol type="A">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="a">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="I">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="i">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<dl>自定义列表
<dt>列表项1</dt>
<dt>列表项2
<dd>列表项内容</dd>
<dd>列表项内容2</dd>
</dt>
</dl>
<table border="1">
<caption>表格标题</caption>
<colgroup span="1" style=" 50px"></colgroup><colgroup span="2" style=" 100px"><col style="background: green"><col style="background:blue"></colgroup><colgroup span="1" style=" 200px"></colgroup>
<thead>
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
</thead>
<tbody style="background: red">
<tr><td colspan="2">单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td></tr>
<tr><td rowspan="2">内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</tbody>
<tfoot>
<tr><td>内容</td></tr>
</tfoot>thead、tbody、tfoot的作用是维护表头表体表尾的位置，不会因代码中的位置改变而发生显示改变
</table>
|
符号 |
实体名称 |
实体数值 |
称号名称 |
|
  |
  |
空格 |
|
|
< |
< |
< |
小于 |
|
> |
> |
> |
大于 |
|
& |
& |
& |
连接 |
|
“ |
" |
" |
双引号 |
|
± |
± |
± |
正负值 |
|
© |
© |
© |
著作权 |
|
® |
® |
® |
注册商标 |
|
其他符号可网上查，建议使用实体数值，因为浏览器支持更友好。 |
|||
一个表格实例：
<table align="center" border="1">
<caption><font color="green"><b>特殊符号的使用</b></font></caption>
<colgroup style="background: yellow"></colgroup><colgroup span="2" style="background: orange"></colgroup><colgroup style="background: yellow"></colgroup>
<thead style="background: blue">
<tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr>
</thead>
<tbody>
<tr align="center"><td></td><td>&nbsp</td><td>&#160</td><td>空格</td></tr>
<tr align="center"><td><</td><td>&lt</td><td>&#60</td><td>小于</td></tr>
<tr align="center"><td>></td><td>&gt</td><td>&#62</td><td>大于</td></tr>
<tr align="center"><td>&</td><td>&amp</td><td>&#38</td><td>连接符号</td></tr>
<tr align="center"><td>"</td><td>&quot</td><td>&#34</td><td>双引号</td></tr>
<tr align="center"><td>±</td><td>&plusmn</td><td>&#177</td><td>正负值</td></tr>
<tr align="center"><td>©</td><td>&copy</td><td>&#169</td><td>著作权</td></tr>
<tr align="center"><td>®</td><td>&reg</td><td>&#174</td><td>注册商标</td></tr>
</tbody>
<tfoot style="background: gray">
<tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr>
</tfoot>
</table>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"><!--meta是个单标签，且只能放在head标签中使用--> 6 <meta name="作者" content="你的姓名"> 7 <meta name="keywords" content="HTML5"> 8 <meta http-equiv="refesh" content="1;http://www.sogou.com"> 9 <title></title> 10 <style type="text/css"> 11 .class1{background: red;} 12 P{color:green} 13 #div1{background: pink;width: 100%;height: 600px} 14 #div2{background: green;width: 100%;height: 10%} 15 </style><!--内部样式表：给下面的所有p元素统一样式，如果有冲突则以具体元素设置的为准。--> 16 </head> 17 18 <body style="margin: 0"><!--margin:0设置整个页面无边距--> 19 20 <pre>空 格 21 换行 pre为previous，即保留原来的格式 22 </pre> 23 24 <p>通用属性id、class、style、title、dir、lang可以在任何元素标签里设置</p> 25 <p>其他通用属性：accesskey元素快捷键、tabindex元素移动顺序、draggable元素拖动、contenteditable元素是否允许编辑、hidden隐藏元素、spellcheck元素检查、contextmenu元素快捷菜单、data-yourvalue自定义属性</p> 26 <p>name和id必须是大小写字母开头，其后可跟字母数字下划线点号，name和id是区别大小写的</p> 27 <p>属性值为数值时必须是正整数，不能为0或负数或小数</p> 28 <p>width、height单位默认为像素px，可省单位px，但在style中必须注明单位px，否则达不到效果。</p> 29 30 <div id="div1"> 31 <div id="div2">div通用块元素上</div> 32 <div style="background: yellow; 20%;height: 80%;float: left;">左</div><div style="background: red; 80%;height: 80%;float: left;">右</div> 33 <div style="background: blue; 100%;height: 10%;clear: left;">底</div> 34 </div><!--width和height值要跟px，否则无效果。--> 35 36 <!-- 37 <table> 38 <tr><td><a href="http://sogou.com" target="myframe"><img src="搜狗.jpg" alt="搜狗"></a></td><td rowspan="2"><iframe src="http://www.sogou.com" frameborder="1" width="800" height="800" name="myframe"></iframe>iframe内联框架，src为默认打开的网页，frameborder为框架的边框，width、height可设像素或百分比。</td></tr> 39 <tr><td><a href="http://163.com" target="myframe"><img src="网易.jpg" alt="网易"></a></td></tr> 40 </table> 41 --> 42 43 <hr> 44 45 <p style="color:red">样式基础</p><!--内联样式表--> 46 <p class="class1">样式基础</p> 47 <p style="font: bold;">样式基础</p> 48 <p>样式基础</p> 49 50 <hr> 51 52 <link rel="stylesheet" type="text/css" href=""> 53 54 <hr> 55 56 <table align="center" border="1" cellpadding="10" cellspacing="0"><!--cellpadding设置表格内容与单元格边框的距离，cellspacing设置单元格与单元格之间的距离及单元格与表格外边框之间的距离。--> 57 <caption><font color="green"><b>特殊符号的使用</b></font></caption> 58 <colgroup style="background: yellow"></colgroup><colgroup span="2" style="background: orange"></colgroup><colgroup style="background: yellow"></colgroup> 59 <thead style="background: blue"> 60 <tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr> 61 </thead> 62 <tbody> 63 <tr align="center"><td></td><td>&nbsp</td><td>&#160</td><td>空格</td></tr> 64 <tr align="center"><td><</td><td>&lt</td><td>&#60</td><td>小于</td></tr> 65 <tr align="center"><td>></td><td>&gt</td><td>&#62</td><td>大于</td></tr> 66 <tr align="center"><td>&</td><td>&amp</td><td>&#38</td><td>连接符号</td></tr> 67 <tr align="center"><td>"</td><td>&quot</td><td>&#34</td><td>双引号</td></tr> 68 <tr align="center"><td>±</td><td>&plusmn</td><td>&#177</td><td>正负值</td></tr> 69 <tr align="center"><td>©</td><td>&copy</td><td>&#169</td><td>著作权</td></tr> 70 <tr align="center"><td>®</td><td>&reg</td><td>&#174</td><td>注册商标</td></tr> 71 </tbody> 72 <tfoot style="background: gray"> 73 <tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr> 74 </tfoot> 75 </table> 76 77 <hr> 78 79 <ul> 80 <li class="class1">无序列表</li> 81 <li style="list-style-type: none;">无序列表</li><!--list-style-type: none作用是去掉前面的点--> 82 <li style="background: red">无序列表</li> 83 </ul> 84 85 </body> 86 </html>