HTML5学习总结
事实证明，认真的写一篇博客，需要半天的时间。继续加油！
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用.
**转载请注明 出自 : luogg的博客园 ** 谢谢配合!
Html学习总结
- 什么是html:HyperTextMarket language，超文本标记语言,是用来描述网页语言，html使用标记标签来描述网页，html不是编程语言，是一种标记语言。
- 经历过得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5
- H5新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
- html都是由标签组成的
- html的基本格式:
<html>
<head>
放置一些属性信息，辅助信息。
引入一些外部的文件。（css，javascript）
它里面的内容会先加载。
meta：提供关于文档的信息
link：定义与外部资源的关系（css样式）
style：在文档内容定义样式
script：定义脚本程序，或者外联脚本文档
noscript：包含浏览器禁用脚本，或不支持脚本时显示的内容
</head>
<body>
存放真正的数据。
</body>
</html>
- DOCTYPE:声明文档的版本
- meta：告诉浏览器一些关于该文档的信息
- html注意事项:
- 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
- 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
- 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
h5全局属性:
文本元素
- br 换行
- wbr 软换行，在英文文章中，扩大缩小浏览器的时候，遇到某一个长单词的时候，<wbr>可以规定这个单词从哪里切开。
<a> 超链接，属性:
1. href：url。
2. targert：页面打开方式_blank新建页面打开
3. 锚点:也就是回到顶部那种。先在顶部定义一个id，然后在超链接中使用锚点跳去，href="#id";
4. 如果href中指定的协议，浏览器不能解析，就会调用应用程序，可以解析的程序就可以打开。
- abrr 缩略语
- b 不带任何强调意义的标记一段文字，加粗
- strong 表示重要内容，加粗
- em 表示着重强调一段文字，倾斜
- i 不带任何强调意义的标记一段文字，倾斜
- cite 表示作品标题，将作品名倾斜
- del 表示从文档中删除的文字
- s 表示文字已经不再准确，也是删除线
- u 不带强调意义的给一段文字加下划线
- ins 表示加入文档的文字，也是下划线
- small 表示小号字体
- sub 表示下标文字
- sup 表示上标文字
- q 表示引自其它的内容，被q标签修饰的自己加了引号表示引用
- pre 表示格式化一段文字，也可以用来引入一段代码
- span css中使用的添加样式的模块
- div会换行，span不会换行
- <!-- -->注释
html实体
也就是在网页中使用<，>,空格等。
<>
嵌入元素
1. 嵌入图像
- img标签嵌入图像
- src属性:表示图像的路径
- alt属性:表示图像若显示不出来显示的内容
- width/height属性:设置图像的宽和高
2. 嵌入一张网页
- iframe标签表示嵌入一张网页
- src属性:表示超链接文档的地址
- width/height:该区域的宽和高
- name:给iframe命名，方便以后a标签的target属性调用<a href="shiti_test.html" target="iframe">进入实体页面</a>
3. 视频/音频 video/audio
- scr:路径
- autoplay:自动播放视频
- controls:显示播放控件
- loop:循环播放
- width/height
4. 进度条
- progress标签
- max属性:规定任务一共需要多少工作 100%
- value属性:规定已经完成了多少任务 80%
分组元素
1. p 段落标签，在开始和结束的位置上都会留下一段空行
- 属性:align,对齐方式
2. hr 分割线
- 属性:width宽度 100px或者30%
- align:对齐方式
- size:粗细
- color:颜色
3. 有序列表ol li
- type:列表前的序标号
- start:从第几个开始
4. 无序列表ul li
5. 自定义列表
- dl:表示自定义列表
- dd:表示自定义列表项
- dt:表示自定义列表标题
6. 区域
- div:声明一块区域
- span:声明一块区域 一般用于用户名密码之后的提示，例如:该用户名已被注册。
- div与span的区别:div一长列，自动换行，span一短列，不换行。
7. 图片区域
- figure图片区域，里边套img标签和figcaption和a标签等
- figcaption:表示对图片的描述
<a href="http://item.jd.com/2600210.html" target="_blank"><figcaption><font size="2" color="red">华为P9:3999带回家</font></figcaption></a>
8. pre:格式化一段文字或者添加代码
表格元素(重要)
- 作用:格式化数据
- table 声明一个表格
属性:
- border 边框 border=1
- width 宽度
- cellpadding 文字与内边框的距离 cellpadding=10
- cellspacing 单元格间距 cellspacing=0
- tr 行
- align:对齐方式
- td 列
- width/height
- colspan 合并列
- rowspan 合并行
- th 表头，会加粗，并且会居中
- caption 表格的标题
- 给表格划分区域(不常用)
- thead、tbody、tfoot
语义元素(不多用)
- h1~h6:表示标题
- header:表示头部
- nav:表示导航
- footer:表示尾部
- address:表示文档或article的联系信息
- aside:表示侧边栏
- section:表示主题区域
- article:表示一段独立的内容
<article>
<h3>Internet Explorer 9</h3>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<!--header的使用方法-->
<header>
<h3>Welcome to my home page</h3>
<p>My name is Luogg</p>
</header>
<!--section的使用方法-->
<font color="blue" size="4">3.<section>的定义</font><br/>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<br/><br/>
<!--footer的使用方法-->
<font color="blue" size="4">4.<footer>的使用方法:</font>
<footer>
<p>作者 : Luogg</p>
<p>联系我 : <a href="http://www.cnblogs.com/luogg">luogg.blog.com</a></p>
</footer>
<!--新特性之nav导航标签的使用-->
<nav>
<a href="../right.html">回到主页</a>
</nav>
框架(就是在一个页面中展示多个页面)，框架标签不能写在body标签当中或下面。不然浏览器无法解析。
- frameset:框架结构
- ros:将页面分为n行
- cols:将页面分为n列
- frame:放在框架中的每个html文档
<frameset rows="20%,*">
<frame src="top.html">
<frameset cols="15%,*">
<frame src="left.html">
<frame src="right.html" name="right">
</frameset>
</frameset>
表单元素(重点)
- 作用:可以和服务器进行交互
- action:定义一个URL，当点击提交按钮时，向这个URL发送数据
- method(get/post):用于向action URL发送数据的HTTP方法。默认是get。
get和post区别：
1）get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2）get方式安全级别较低，post级别较高。
3）get方式数据的长度，post支持大数据。
- input 标签:定义输入字段，用户可在其中输入数据。
input 中 type属性:
1）type=text 文本框
2）type=password 密码
3）type=radio 单选按钮 name属性
4）type=checkbox 多选按钮
单选和多选都有默认值：checked="checked"
5）type=reset 重置按钮
6）type=submit 提交按钮
7）type=file 上传文件的输入项
8）type=button 按钮
9）type=image 图片（也是提交按钮，）
10）type=hidden 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）
选择标签
select /select>选择下拉框 option 表示内容 /option
文本域textarea
textarea 文本内容 /textarea
value属性:
对于按钮、重置按钮和确认按钮：定义按钮上的文本。
对于图像按钮：定义传递向某个脚本的此域的符号结果。
对于复选框和单选按钮：定义 input 元素被点击时的结果。
对于隐藏域、密码域以及文本域：定义元素的默认值。
注释：不能与 type="file" 一同使用。
注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。
- name属性:为 input 元素定义唯一的名称。
制作一个基本表单
form中的元素
<li>action:指定表单数据发送的目的地址</li>
<li>method:提交表单的方法(post,get)</li>
<li>enctype:数据发送的编码格式,默认的不能上传文件(若要在表单中上传文件,需要用到他的第二个属性,multipart)</li>
<li>autocomplete:自动补全功能,展示用户输入的历史记录</li>
<li>target:页面打开方式,默认self,_blank在新页面打开</li>
<li>name:为表单添加名字,将来JS脚本调用</li>
</ul>
<h2>input-type-text属性</h2>
<ul>
<li>maxlength:输入的最大字符长度</li>
<li>size:设置文本能够显示的字符数</li>
<li>placeholder:设置占位字符(提示字符)</li>
<li>list:双击文本框之后,会出现事先设置的提示列表,配合datalist-id,list使用</li>
<li>readonly:设置只读文本框</li>
<li>required:用户必须输入一个值</li>
<li>disabled:生成禁用文本框</li>
<li>name:表示input控件的名字,提交数据,接受数据时候使用</li>
<li>value:控件接受输入的值</li>
</ul>
<h2>input-type-password密码框属性同上.</h2>
<h2>input-按钮</h2>
<ul>
<li>type=button:普通按钮</li>
<li>type=reset:重置按钮</li>
<li>type=submit:提交按钮</li>
<li>value:按钮上的说明文字</li>
</ul>
<h2>数据限制类</h2>
<ul>
<li>type=file:文件上传. required属性:必须被选中</li>
<li>type=hidden:隐藏文本框.不让用户看见.</li>
<li>type=checkbox:复选框. checked/required/name:同一组复选框名必须相同.
value:复选框提交的数据的名称</li>
<li>type=radio:单选框. checked/name:分组</li>
<li>type=number:数值框. list:提示列表(目前无效)/min/max/step:步长/value初始值
readonly:只读文本框/required:必须输入值</li>
<li>type=range:滑块数值框 用法与number一样</li>
<li>type=email:邮件框 用法同text</li>
<li>type=url:网址框 用法同text</li>
<li>type=color:颜色框</li>
</ul>
<h2>其他控件</h2>
<ul>
<li>select:下拉列表. optgroup-label:给下拉项设置标题(分组)/option-value下拉项</li>
<li>textarea:多行文本框. rows/cols/placeholder占位符</li>
</ul>
<h2>补充</h2>
<ul>
<li>fieldset:对表单进行分组</li>
<li>legend:fieldset第一个元素,为分组添加说明标签</li>
<li>label:在表单中添加说明标签</li>
<li>autofocus:聚焦</li>
<li>disabled:禁用input元素</li>
</ul>
<h2>表单外部调用表单内部属性</h2>
<ul>
<li>将form设置id,然后form="id"即可调用</li>
<li>formtarget</li>
<li>formmethod</li>
<li>formenctype</li>
<li>formaction</li>
<li>form</li>
</ul>
