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

Posted 2020-09-17 渡劫的机器猫

  前  言

练习

　学习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：//[email protected]  发邮箱
            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：普通按钮，，没有任何卵用