一、HTML是什么
HTML是一种超文本标记语言，
通过它可以建立网页（文字、图片、音乐、视频、链接、程序），
人们可以通过通过浏览器进行访问。
二、HTML历史
HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准
三、Html、CSS、js的关系
1. HTML实现网页内容。
2. CSS实现网页样式。
3. JavaScript实现动态特效。
四、html语法结构
1.类型声明 html
2.文档头部 head
3.文档体 body
4.文档元素
1 <!DOCTYPE html><!--类型标签：文档类型--> 2 ?3 <html> 4 <head><!--头部标签：文档属性--> 5 <meta charset="UTF-8"> <!--中文字符定义--> 6 <title></title> <!--标题标签：标题名称--> 7 </head> ?8 ?9 <body> <!--文档标签：文档内容-->10 </body>11 </html>12
五、元素
1.元素是指从开始标签到结束标签的所有代码。 <开始标签 属性="属性值"> 内容 <结束标签>
2.单标记元素在开始标签中关闭，为了规范要在后面加“ /”。
3.大多数html元素都是可以嵌套的。
开始标签 元素内容 结束标签
<p> hello world! </p> 双标签
<br /> 单标签
六、属性
我们能为元素定义属性，属性为元素提供更多的信息，属性能定义文本样式、排列方式、标签名等等。
开始标签 属性 元素内容 结束标签
<a href="http://www.baidu.com" > 超链接 </a>
href 规定元素的链接地址
七、格式化
用不同的标签元素来表达不同的内容就是格式化；作用是让我们的代码更加规范，能够被爬虫识别，定义样式更加方便。
我们表达段落用p标签 <p>这是段落</p>
我们表达链接用a标签 <a href="http://www.baidu.com" target="_blank">超链接</a>
我们表达斜体用i标签 <i>这是斜体</i>
八、各标签功能
?1 ------------------------------------元素------------------------------------- ?2 ??3 ??4 <!DOCTYPE html> ?5 <html> ?6 ????<head> ?7 ????????<meta charset="UTF-8"> ?8 ????????<title>html元素</title> ?9 ????????<style> 10 ????????????????a:link {color: #D86C01;} ????????/* 未访问的链接 */ 11 ????????????????a:visited {color: #D86C01;} ?????/* 已访问的链接 */ 12 ????????????????a:hover {color: #50C07D;} ???????/* 鼠标移动到链接上 */ 13 ????????????????a:active {color: #D86C01;} ??????/* 选定的链接 */ 14 ?????????????????15 ????????????body{ 16 ????????????????width: 800px; 17 ????????????????margin-left: 80px; 18 ?????????????????19 ????????????} 20 ????????????p,ul,address,blockquote,pre{ 21 ???????????????? 22 ????????????????background-color: #D3D3D3; 23 ????????????} 24 ?????????????25 ????????????#list{ 26 ????????????????width: 200px; 27 ????????????????position: fixed; 28 ????????????????left: 900px; 29 ?????????????????30 ????????????} 31 ?????????????32 ????????????#list a{ 33 ????????????????text-decoration:none; 34 ?????????????????35 ?????????????????36 ????????????} 37 ????????</style> 38 ????</head> 39 ????<body> 40 ?????????41 ????????<div > 42 ????????????<h3>目录</h3> 43 ????????????<a href="#1">1.标题文本--h1-h6</a><br> 44 ????????????<a href="#2">2.加粗文本--b</a><br> 45 ????????????<a href="#3">3.斜体文本--i</a><br> 46 ????????????<a href="#4">4.重要文本--strong</a><br> 47 ????????????<a href="#5">5.强调文本--em</a><br> 48 ????????????<a href="#6">6.较小文本--small</a><br> 49 ????????????<a href="#7">7.插入线--ins</a><br> 50 ????????????<a href="#8">8.删除线--del</a><br> 51 ????????????<a href="#9">9.下划线--u</a><br> 52 ????????????<a href="#10">10.地址--address</a><br> 53 ????????????<a href="#11">11.短引用--q</a><br> 54 ????????????<a href="#12">12.长引用--blockquote</a><br> 55 ????????????<a href="#13">13.单行代码--code</a><br> 56 ????????????<a href="#14">14.多行代码--pre</a><br> 57 ????????????<a href="#15">15.段落--p</a><br> 58 ????????????<a href="#16">16.换行--br</a><br> 59 ????????????<a href="#17">17.水平线--hr</a><br> 60 ????????????<a href="#18">18.版权号--& copy</a><br> 61 ????????????<a href="#19">19.注册商标--& reg</a><br> 62 ????????????<a href="#20">20.有序列表--ol/li</a><br> 63 ????????????<a href="#21">21.无序列表--ul/li</a><br> 64 ?65 ?????66 ????????</div> 67 ????????<!--页面目录区域--> 68 ?????????69 ?????????70 ?????????71 ????????<div> 72 ????????<h3 >1.标题文本（h1-h6）</h3> 73 ????????<p> 74 ????????????<ul> 75 ????????????????<li><h1>标题文本</h1></li> 76 ????????????????<li><h2>标题文本</h2></li> 77 ????????????????<li><h3>标题文本</h3></li> 78 ????????????????<li><h4>标题文本</h4></li> 79 ????????????????<li><h5>标题文本</h5></li> 80 ????????????????<li><h6>标题文本</h26></li> 81 ????????????</ul> 82 ?????????????83 ????????</li> 84 ????????</p> 85 ?????????86 ????????<h3 >2.加粗文本（b）</h3> 87 ????????<p> 88 ????????????普通文本 ???| 例：<b>加粗文本</b> 89 ????????</p> 90 ?????????91 ????????<h3 >3.斜体文本（i）</h3> 92 ????????<p> 93 ????????????普通文本 ???| 例：<i>斜体文本</i> 94 ????????</p> 95 ?????????96 ????????<h3 >4.重要文本（strong）</h3> 97 ????????<p> 98 ????????????普通文本 ?| 例：<strong>重要文本，表现与加粗文本类似</strong> 99 ????????</p>100 101 ????????<h3 >5.强调文本（em）</h3>102 ????????<p>103 ????????????普通文本 ?| 例：<em>重要文本，表现与斜体文本类似</em>104 ????????</p>105 ????????106 ????????<h3 >6.较小文本（small）</h3>107 ????????<p>108 ????????????普通文本 ?| 例：<small>较小文本，文字缩小</small>109 ????????</p> ???????110 111 ????????<h3 >7.插入线（ins）</h3>112 ????????<p>113 ????????????普通文本 ?| 例：<ins>表现与下划线类似，通常与删除线配合使用</ins>114 ????????</p> ???115 116 ????????<h3 >8.删除线（del）</h3>117 ????????<p>118 ????????????普通文本 ?| 例：<del>可删除文本</del>119 ????????</p>120 ????????121 ????????<h3 >9.下滑线（u）</h3>122 ????????<p>123 ????????????普通文本 ?| 例：<u>避免单独使用下划线，以免让用户误以为是超链接</u>124 ????????</p> ???125 ????????126 ????????<h3 >10.地址（address）</h3>127 ????????<p>128 ????????????普通文本 ?| 例：<address>蓝桥街199号</address>129 ????????</p>130 ????????131 ????????<h3 >11.短引用（q）</h3>132 ????????<p>133 ????????????普通文本 ?| 例：<q>引用一句话，前端的核心能力在于解决实际问题，能够用简单代码实现需求。</q>134 ????????</p> ???????135 136 ????????<h3 >12.长引用（blockquote）</h3>137 ????????<p>138 ????????????普通文本 ?| 例：<blockquote>引用一段话,效果就是跨一行独立出来并且与上下文相隔。</blockquote>139 ????????????<p>这是下文。</p>140 ????????</p> ???141 142 ????????<h3 >13.单行代码（code）</h3>143 ????????<p>144 ????????????普通文本 ?| 例：<code>a=1 b=2 c=a+b pingt(c)</code>145 ????????</p>146 ????????147 ????????<h3 >14.多行代码（pre）</h3>148 ????????<p>149 ????????????普通文本 ?| 例：150 ????????????<pre>151 ????????????????a=1;152 ????????????????b=2;153 ????????????????c=a+b;154 ????????????????pingt(c)155 ????????????156 ????????????</pre>157 ????????</p>158 ????????159 ????????<h3 >15.段落（p）</h3>160 ????????161 ????????<p>这就是段落</p>162 163 ????????<h3 >16.换行（br）</h3>164 ????????<p>这就是<br>换行</p>165 ????????166 ????????167 ????????<h3 >17.水平线（hr）</h3>168 ????????<p>169 ????????????<hr>170 ????????</p> ??171 ????????172 ????????<h3 >18.版权号（& copy）</h3>173 ????????<p>©</p>174 175 ????????<h3 >19.注册商标（& reg）</h3>176 ????????<p>®</p>177 ????????178 ????????<h3 >20.无序列表（ul/li）</h3>179 ????????<p>180 ????????????<ul>181 ????????????????<li>无序列表</li>182 ????????????????<li>无序列表</li>183 ????????????????<li>无序列表</li>184 ????????????</ul>185 ????????</p> ???????186 187 ????????<h3 >21.有序列表（ol/li）</h3>188 ????????<p>189 ????????????<ol start="10">190 ????????????????<li>有序列表</li>191 ????????????????<li>有序列表</li>192 ????????????????<li>有序列表</li>193 ????????????</ol>194 ????????</p>195 ????????196 ????197 ????????198 ????????199 ????????</div>200 ????????<!--正文区域-->201 ????????202 203 ????</body>204 </html>205 206 207 208 ----------------------------------超链接-------------------------------------209 210 <!DOCTYPE html>211 <html>212 ????<head>213 ????????<meta charset="UTF-8">214 ????????<title>html超链接</title>215 ????????<style>216 ????????????????a:link {color: blue} ????????/* 未访问的链接 */217 ????????????????a:visited {color: blue} ?????/* 已访问的链接 */218 ????????????????a:hover {color: red} ???????/* 鼠标移动到链接上 */219 ????????????????a:active {color: blue} ??????/* 选定的链接 */220 ????????????body{221 ????????????????width: 800px;222 ????????????????margin-left: 80px;223 ????????????}224 ????????????p,ul,address,blockquote,pre{225 ????????????????226 ????????????????background-color: #D3D3D3;227 ????????????}228 ????????????229 ????????????.list{230 231 232 ????????????}233 ????????????234 ????????</style>235 ????</head>236 ????<body>237 ????????238 ????????<div >239 ????????????<h3>目录</h3>240 ????????????<a href="#1">1.超链接--a</a><br>241 ????????????<a href="#2">2.回到顶部--a</a><br>242 ????????????<a href="#3">3.插入图像--img</a><br>243 244 ????245 ????????</div>246 ????????<!--页面目录区域-->247 ????????248 ????????249 ????????250 ????????<div>251 ????252 ????????253 ????????<h3 >1.超链接（a）</h3>254 ????????<p>255 ????????????<a href="http://www.baidu.com">外部链接</a><br>256 ????????????<a href="../index.html" >本地链接</a><br>257 ????????????<a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>258 ????????????<a href="mailto:15928171898@163.com"?subject=邮件主题内容&body=邮件内容">邮件链接</a><br>259 ????????????<a href="http://www.taobao.com"><img src="../images/logo.gif" alt="图像链接" title="图像链接"/></a><br>260 ????????</p> ???????261 262 ????????<h3 >2.回到顶部（a #）</h3>263 ????????<p>264 ????????????<a href="#">回到顶部</a>265 ????????</p> ???266 267 ????????<h3 >3.插入图像（img）</h3>268 ????????<p>269 ????????????<img src="../images/xxgk.jpg"/>270 ????????</p>271 ????????272 ????273 ????????</div>274 ????????<!--正文区域-->275 ????????276 277 ????</body>278 </html>279 280 ------------------------------------表格--------------------------------------281 282 <!DOCTYPE html>283 <html>284 ????<head>285 ????????<meta charset="UTF-8">286 ????????<title>html表格</title>287 ????????<style>288 ????????????????a:link {color: blue} ????????/* 未访问的链接 */289 ????????????????a:visited {color: blue} ?????/* 已访问的链接 */290 ????????????????a:hover {color: red} ???????/* 鼠标移动到链接上 */291 ????????????????a:active {color: blue} ??????/* 选定的链接 */292 ????????????body{293 ????????????????width: 800px;294 ????????????????margin-left: 80px;295 ????????????}296 ????????????p,ul,address,blockquote,pre{297 ????????????????298 ????????????????background-color: #D3D3D3;299 ????????????}300 ????????????301 ????????????table,tr,th,td{302 ????????????????border-collapse:collapse;303 ????????????????border: 1px solid #0099FF;304 ????????????????width: 500px;305 ????????????????height: 30px;306 ????????????????padding: 2px; ???????????????307 ????????????????308 ????????????}309 ????????????310 ????????????311 ????????????table,tr,th{312 ????????????????background-color:#A9A9A9;313 ????????????????text-align: center;314 ????????????????color: #000000;315 ????????????????316 ????????????} ???????????317 ????????????????????????318 ????????????table,tr,td{319 ????????????????background-color:#D8D8D8;320 ????????????????text-align: center;321 ????????????????color: #000000;322 ????????????????323 ????????????}324 ????????????325 326 ????????????327 328 ????????????329 ????????</style>330 ????</head>331 ????<body>332 ????????333 ????????<div >334 ????????????<h3>目录</h3>335 ????????????<a href="#1">1.表格--table</a><br>336 337 338 ????339 ????????</div>340 ????????<!--页面目录区域-->341 ????????342 ????????343 ????????344 ????????<div>345 ????346 ????????347 ????????<h3 >1.表格（table）</h3>348 ????????<p>349 ????????350 ????????????<!--351 ????????????????表格标签：table ???表格摘要：summary ??表格标题：caption352 ????????????????表头thead 表格体：tbody 能将表格分段显示 ?表尾tfoot353 ????????????????表格行：tr ????????表格行标题：th ?????表格行内容：td354 ????????????-->355 ????????????356 ????????<table summary="表格摘要：本表记录了2012-2013年库存，记录包含u盘和耳机库存量">357 ????????????<caption>2012-2013年库存记录</caption>358 ????????????359 ????????????<tr><th>产品名称</th> <th>品牌</th> ??<th>库存量（个）</th> ?<th>入库时间</th></tr>360 ????????????<tr><td>耳机</td> ????<td>联想</td> ??<td>500</td> ?????????<td>2012-1-2</td></tr>361 ????????????<tr><td>U盘</td> ?????<td>金士顿</td> <td>120</td> ?????????<td>2012-8-10</td></tr>362 ????????????<tr><td>U盘</td> ?????<td>爱国者</td> <td>133</td> ?????????<td>2012-3-25</td></tr>363 ????????????<tr><td>耳机</td> ????<td>联想</td> ??<td>600</td> ?????????<td>2013-8-2</td></tr>364 ????????????<tr><td>U盘</td> ?????<td>金士顿</td> <td>320</td> ?????????<td>2013-5-10</td></tr>365 ????????????<tr><td>U盘</td> ?????<td>爱国者</td> <td>533</td> ?????????<td>2013-2-25</td></tr> ???????????366 ????????????<tr><td span="2">金额合计:</td> ?<td>10000</td> ?367 ????????????368 ????????</table>369 ????????<br />370 ????????371 ????????<table>372 ????????????<tr><th>产品名称</th> <th>品牌</th> ??<th>库存量（个）</th> ?<th>入库时间</th></tr>373 ????????????<tr><td>耳机</td> ????<td>联想</td> ??<td>500</td> ?????????<td>2012-1-2</td></tr>374 ????????????<tr><td>U盘</td> ?????<td>金士顿</td> <td>120</td> ?????????<td>2012-8-10</td></tr>375 ????????????<tr><td>U盘</td> ?????<td>爱国者</td> <td>133</td> ?????????<td>2012-3-25</td></tr>376 ????????????<tr><td>耳机</td> ????<td>联想</td> ??<td>600</td> ?????????<td>2013-8-2</td></tr>377 ????????????<tr><td>U盘</td> ?????<td>金士顿</td> <td>320</td> ?????????<td>2013-5-10</td></tr>378 ????????????<tr><td>U盘</td> ?????<td>爱国者</td> <td>533</td> ?????????<td>2013-2-25</td></tr> ???379 ????????????<tr><td colspan="3">金额合计:</td> ?<td>10000</td></tr>380 ????????</table>381 ????????382 ????????<br />383 ????????<table>384 ????????????<tr>385 ????????????????<th>表格1</th>386 ????????????????<th>表格2</th>387 ????????????</tr>388 ????????????<tr>389 ????????????????<td> ???????????????????390 ????????????????????<ul>391 ????????????????????????<li>梨子</li>392 ????????????????????????<li>桃子</li>393 ????????????????????????<li>苹果</li>394 ????????????????????</ul>395 ????????????????</td> ???396 ????????????????397 ????????????????<td>398 ????????????????????你喜欢吃的水果有399 ????????????????</td>400 ????????????</tr>401 ????????</table>402 ????????403 ????????404 ????405 ????????</div>406 ????????<!--正文区域-->407 ????????408 409 ????</body>410 </html>411 412 413 ---------------------------------表单--------------------------------------414 <!DOCTYPE HTML>415 <html>416 ????<head>417 ????????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />418 ????????<title>html表单</title>419 420 ????</head>421 ????<body>422 ????????<form action="save.php" method="post">423 ????????????单行文本框：424 ????????????<input type="text" />425 ????????????426 ????????????<br>427 ????????????428 ????????????单行密码框：429 ????????????<input type="password" />430 ????????????431 ????????????<br>432 ????????????433 ????????????多行文本框：434 ????????????<textarea rows="2" cols="10" >默认值</textarea>435 ????????????436 ????????????<br><br><br>437 ????????????438 ????????????单选框：439 ????????????男<input type="radio" name="sex" ?/>440 ????????????女<input type="radio" name="sex" ?/>441 ????????????442 ????????????<br>443 ????????????444 ????????????多选框：445 ????????????苹果446 ????????????<input type="checkbox" name="fruits" ?/>447 ????????????梨子448 ????????????<input type="checkbox" name="fruits" ?/> ???????????449 ????????????桃子450 ????????????<input type="checkbox" name="fruits" ?/> ???????451 ????????????452 ????????????<br><br><br>453 ????????????多选下拉框：454 ????????????<select multiple="multiple">455 ????????????????<option>苹果</option>456 ????????????????<option>梨子</option>457 ????????????????<option>桃子</option>458 ????????????????<option>樱桃</option>459 ????????????</select> ???????????460 461 ????????????462 ????????????<br>463 ????????????单选下拉框：464 ????????????<select>465 ????????????????<option>苹果</option>466 ????????????????<option>梨子</option>467 ????????????????<option>桃子</option>468 ????????????????<option>樱桃</option>469 ????????????</select>470 ????????????<br><br><br>471 ????????????472 ????????????附件上传：<input type="file"/><br>473 ????????????<a href="download/my.rar" target="_blank">文件下载：</a>474 ????????????<br><br><br>475 ????????????476 ????????????<input type="submit" ?value="提交" />477 ????????????<input type="reset" ??value="重置" />478 ????????479 480 ????????</form>481 ????????482 ?????????483 ????</body>484 </html>html笔记
原文地址：http://www.cnblogs.com/zhangzexiang/p/7496708.html