练习-为网页添加icon图标;为网页添加关键字/作者;超链接;input的type属性有哪些常用属性值-form表单
前 言
练习
学习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:普通按钮,,没有任何卵用