前  言

练习

　学习HTML5有两个月了，每天都要学习新的知识，感觉以前学过的有点不熟悉了，复习巩固一下，发表一篇博客园。

　本章复习的是HTML5中的基础语言/js的使用

 

1为网页添加icon图标

<link rel="icon" type="image/x-icon" href="img/logo.png"/>

 rel：用于标明被连接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标

 type：表明被连接文件时什么类型。可以省略。

 href：表明连接文件的地址

 

2为网页添加关键字/作者

　　　　 <!--作者-->

            <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生效。

 

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的兼容问题，需要在锚点中，插入一个空格&nbsp; 才能生效：

                <a name="top">&nbsp;</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：普通按钮，，没有任何卵用