前 言
练习
学习HTML5有两个月了，每天都要学习新的知识，感觉以前学过的有点不熟悉了，复习巩固一下，发表一篇博客园。
本章复习的是HTML5中的基础语言/js的使用
1为网页添加icon图标
<link rel="icon" type="image/x-icon" href="img/logo.png"/>
rel：用于标明被连接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标
type：表明被连接文件时什么类型。可以省略。
href：表明连接文件的地址
rel：用于标明被连接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标
type：表明被连接文件时什么类型。可以省略。
href：表明连接文件的地址
2为网页添加关键字/作者
<!--作者-->
<meta name="author" content="http://www.jredu100.com" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页,Web前端开发" />
<!--网页描述-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
<meta name="author" content="http://www.jredu100.com" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页,Web前端开发" />
<!--网页描述-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
3相对路径的确定
1、使用position: relative; 设置元素为相对定位的元素；
2、定位机制：
① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
2、定位机制：
① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
4超链接
[超链接a]
1.href：超链接的跳转地址。可以写网络连接，或本地html文件的相对路径，确定方式同img的src路径
2.title：鼠标指上后显示的文字
3.target：设置超链接打开窗口的位置。-slef 自身页面打开（默认） -blank新页面打开、
4.rel：表明即将跳转的页面，与当前页面的关系；
rel='prev'即将跳转页面，是当前文档的前一篇文章。
rel='next'即将跳转页面，是当前文档的后一篇文章。
rel='prefetch'，当前文档加载完成后，利用空余网速，预加载即将跳转的网页
[功能性链接]
mailto：//123456789@qq.com 发邮箱
tencent：//message/？uin=123456789 与QQ聊天
[锚链接]
1、本页面锚链接
①设置一个锚点：<a name="top"></a>用name属性表示锚点名称
②在朝链接的href属性中，使用#name 跳转到制定的锚点位置：
<a href="#top">跳转到锚点
2、其他页面锚链接
①徐跳转的页面设置锚链接
②在超链接的href属性，文件名.html#name
<a href=aaaa.html#第二节锚点>
注：由于谷歌/ie的兼容问题，需要在锚点中，插入一个空格 才能生效：
<a name="top"> </a>
1.href：超链接的跳转地址。可以写网络连接，或本地html文件的相对路径，确定方式同img的src路径
2.title：鼠标指上后显示的文字
3.target：设置超链接打开窗口的位置。-slef 自身页面打开（默认） -blank新页面打开、
4.rel：表明即将跳转的页面，与当前页面的关系；
rel='prev'即将跳转页面，是当前文档的前一篇文章。
rel='next'即将跳转页面，是当前文档的后一篇文章。
rel='prefetch'，当前文档加载完成后，利用空余网速，预加载即将跳转的网页
[功能性链接]
mailto：//123456789@qq.com 发邮箱
tencent：//message/？uin=123456789 与QQ聊天
[锚链接]
1、本页面锚链接
①设置一个锚点：<a name="top"></a>用name属性表示锚点名称
②在朝链接的href属性中，使用#name 跳转到制定的锚点位置：
<a href="#top">跳转到锚点
2、其他页面锚链接
①徐跳转的页面设置锚链接
②在超链接的href属性，文件名.html#name
<a href=aaaa.html#第二节锚点>
注：由于谷歌/ie的兼容问题，需要在锚点中，插入一个空格 才能生效：
<a name="top"> </a>
5form表单
[form表单]
1.两个重要属性
action：表单需要提交的服务器地址
method：表单提交数据的方法：get/post
>>>[get与post的区别]
①get传参数使用url传递，所有参数在地址栏可见，不安全，get传参数数据有限；
②post传参使用http请求传递，比较安全；post可以传递大量数据；
但是，get请求的传输速率要比post快。
>>>url传参的形式：链接url地址？name1=value1&name2=value2
2.input的常用属性：
①type：设置input的输入类型
②name：给input输入框起名。一般情况下，name属性必不可少。因为，传递数据时，使用name=value（输入内容）的形式传递
③value：input输入框的默认值
④placeholder：输入框的提示内容。 当input有默认的value或者输入时，placehoder消失。
3.input-type属性的常用属性
①text：文本输入框
②password：密码输入框，输入内容默认显示小黑点。
③radio：单选项 checkbox多选项
>>> 使用radio时，value属性必填。提交时，提交的为value中的默认值
>>> radio凭借name属性，确定是否属于同一组，那么相同为同组，只能选一个
>>> 使用checked="checked"属性，设置默认选中项
④file：文件上传
>>> 使用accept="类型"，设置只能双唇的文件类型， imge/*任意格式图片
⑤submit：提交按钮。将所有表单数据，提交至后台服务器
⑥reset：重置表单数据按钮。跟submit一样具有提交功能。
⑦imge：图形提交按钮。跟submit一样具有提交功能。
>>> 使用src属性，选择图片路径
⑧button：普通按钮，，没有任何卵用
1.两个重要属性
action：表单需要提交的服务器地址
method：表单提交数据的方法：get/post
>>>[get与post的区别]
①get传参数使用url传递，所有参数在地址栏可见，不安全，get传参数数据有限；
②post传参使用http请求传递，比较安全；post可以传递大量数据；
但是，get请求的传输速率要比post快。
>>>url传参的形式：链接url地址？name1=value1&name2=value2
2.input的常用属性：
①type：设置input的输入类型
②name：给input输入框起名。一般情况下，name属性必不可少。因为，传递数据时，使用name=value（输入内容）的形式传递
③value：input输入框的默认值
④placeholder：输入框的提示内容。 当input有默认的value或者输入时，placehoder消失。
3.input-type属性的常用属性
①text：文本输入框
②password：密码输入框，输入内容默认显示小黑点。
③radio：单选项 checkbox多选项
>>> 使用radio时，value属性必填。提交时，提交的为value中的默认值
>>> radio凭借name属性，确定是否属于同一组，那么相同为同组，只能选一个
>>> 使用checked="checked"属性，设置默认选中项
④file：文件上传
>>> 使用accept="类型"，设置只能双唇的文件类型， imge/*任意格式图片
⑤submit：提交按钮。将所有表单数据，提交至后台服务器
⑥reset：重置表单数据按钮。跟submit一样具有提交功能。
⑦imge：图形提交按钮。跟submit一样具有提交功能。
>>> 使用src属性，选择图片路径
⑧button：普通按钮，，没有任何卵用