HTML基础总结
HTML的概念：
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的
HTML的主体结构：
1 <!DOCTYPE html> //html5文档声明，告诉浏览器当前的网页语法为html5 2 <html> 3 <head> 4 <meta charset="utf-8"> //给网页设置字符集编码 5 <title></title> 6 </head> 7 <body> //展示给用户看的内容都写在body标签当中 8 </body> 9 </html>
HTML的标签：
文本标签：
h1-h6标签可定义标题
1 <h1>这是标题 1</h1> 2 <h2>这是标题 2</h2> 3 <h3>这是标题 3</h3> 4 <h4>这是标题 4</h4> 5 <h5>这是标题 5</h5> 6 <h6>这是标题 6</h6>
p标签定义段落
<p>This is some text in a very short paragraph</p>
strong标签加粗
em标签来表示强调的文本，斜体
strong标签表示重要文本
u标签下划线
s标签删除线
br标签表示回车换行
hr标签表示水平线
span标签被用来组合文档中的行内元素。
blockquote标签表示块引用
pre标签可定义预格式化的文本，保持原有格式的一种标签。
a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
有序列表：ol (order list) 有序列表中的每一项用li表示type属性表示序号的类型：1表示数字， A/a表示字母，i/I表示罗马数字
1 <ol type=""> 2 <li>www</li> 3 <li>www</li> 4 <li>www</li> 5 </ol>
无序列表：ul unorder list有序列表中的每一项用li表示type属性表示序号的类型：circle表示。disc表示.square表示正方形
1 <ul> 2 <li>1-1</li> 3 <li>1-2</li> 4 <li>1-3</li> 5 </ul>
div标签:在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器，网页切割。
span:进行网页切割，包含普通的文本内容
<dl> 标签用于结合<dt> （定义列表中的项目）和 <dd> （描述列表中的项目）
1 <dl> 2 <dt>计算机</dt> 3 <dd>用来计算的仪器 ... ...</dd> 4 <dt>显示器</dt> 5 <dd>以视觉方式显示信息的装置 ... ...</dd> 6 </dl>
table标签:创建表格的四个元素：table、tbody、tr、th、td。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。
<th>…</th>：表格的头部的一个单元格，表格表头。也就是th标签中的文本默认为粗体并且居中显示。
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
单元格与单元格之间的间距：cellspacing
单元格与内容之间的空隙：cellpadding
img:图片标签
src属性、width属性和height属性(表示图片的宽度和高度)、alt属性(当图片加载失败的时候，显示的提示内容)
1 <img src="/i/eg_tulip.jpg" alt="无法显示图片" />
实体字符：
空格：
版权：©
<：<
>：>
from表单：用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中<form action=" " method=" ">
method:提交方法，有get和post两种提交方法。
input标签：输入框，是表单中最重要的部分
name：指定名字，
value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。
placeholder：通常用于提示：
type属性：
text：普通文本，标签的默认属性时text ，通常如输入用户名用的是text
passworld：密文文本，输入的内容不显示。如密码输入框
submit：提交按钮。上文提到过，要与action一起用。
radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中用checked设置
CheckBox：复选框，属性与单选框类似
textarea：文本域。可以输入多行文本
属性：cols：列数(宽度)，rows：行数(高度)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <form action="" method="" > 9 UserName: 10 <input type="text" name="username" placeholder="请输入用户名" enabled> 11 <br> 12 PassWord: 13 <input type="password" name="password" placeholder="请输入密码"> 14 <br> 15 Sex: 16 <input type="radio" name="sex" value="m" checked>男 17 <input type="radio" name="sex" value="w">女 18 <br> 19 Like: 20 <input type="checkbox" name="like" value="dance">跳舞 21 <input type="checkbox" name="like" value="sing" checked>唱歌 22 <br> 23 <!--多行文本输入域--> 24 <textarea name="main" id="" cols="100" rows="100" ">你好，我是.....</textarea> 25 26 <br> 27 <input type="submit" value="登录"> 28 <input type="button" value="按钮"> 29 <input type="reset" value="重置"> 30 </form> 31 </body> 32 </html>
表单和表格的综合使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table border="1" rules="all"> 9 <form> 10 <tr> 11 <td>用户名:</td> 12 <td><input type="text" name="username" placeholder="username ...."></td> 13 </tr> 14 <tr> 15 <td>密码:</td> 16 <td><input type="password" name="password" placeholder="password....."></td> 17 </tr> 18 <tr> 19 <td colspan="2"> 20 <input type="submit" value="登录"> 21 </td> 22 </tr> 23 </form> 24 </table> 25 </body> 26 </html>
HTML5新增标签：
语义化结构标签：
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容(ie不兼容)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>语义化结构标签</title> 6 </head> 7 <body> 8 <header> 9 <h1>网页标题</h1> 10 </header> 11 <nav> 12 <ul> 13 <li><a href="javascript:;">首页</a></li> 14 <li><a href="javascript:;">文档</a></li> 15 <li><a href="javascript:;">编辑</a></li> 16 </ul> 17 </nav> 18 <main> 19 <aside> 20 <section class="widget"> 21 <h4>最近文章</h4> 22 <ul> 23 <li><a href="javascript:;">JavaScript从入门到放弃</a></li> 24 </ul> 25 </section> 26 </aside> 27 </main> 28 <footer> 29 <ul class="links"> 30 <li><a href="javascript:;">关于我们</a></li> 31 <li><a href="javascript:;">服务条款</a></li> 32 33 </ul> 34 </footer> 35 </body> 36 </html>
新增多媒体标签：
<audio>：音频
1 <audio controls="controls"> 2 <source src="song.mp3" type="audio/mp3" /> 3 </audio>
<video>：视频
1 <video controls="controls"> 2 <source src="movie.mp4" type="video/mp4" /> 3 </video>
