首页 > 代码库 > 练习-为网页添加icon图标;为网页添加关键字/作者;超链接;input的type属性有哪些常用属性值-form表单

练习-为网页添加icon图标;为网页添加关键字/作者;超链接;input的type属性有哪些常用属性值-form表单

  前  言

练习

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

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

 

1为网页添加icon图标

<link rel="icon" type="image/x-icon" href="http://www.mamicode.com/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="http://www.mamicode.com/#top">跳转到锚点
            
            2、其他页面锚链接
            ①徐跳转的页面设置锚链接
            ②在超链接的href属性,文件名.html#name
            <a href=http://www.mamicode.com/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:普通按钮,,没有任何卵用
  

 

练习-为网页添加icon图标;为网页添加关键字/作者;超链接;input的type属性有哪些常用属性值-form表单