关于html的一些总结
关于html的一些总结
疯狂菠萝 发表于1年前
关于html的一些总结
  • 发表于 1年前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

#html ###元素 1、base:设置相对URL的基础;
2、meta:提供关于文档的信息;
3、noscript:包含浏览器禁用脚本或不支持脚本时显示的内容。 ###划分内容 1、details:生成一个区域,用户将其展开获得更多详细知识;
2、summary:用在details元素中,表示该元素的标题或说明。
3、section:表示一个重要的主题或概念
4、header、footer:表示头部和尾部
5、nav:导航元素
6、hgroup:表示一组标题,其中只有第一个可出现在文档大纲中
7、 ###制表 1、caption:表示表格标题;
2、tr:一行单元格;
3、th:表示标题行单元格;
4、td:表示单元格; ###元素属性 1、target:告诉浏览器如何打开单元格 ###meta元素

<meta name="author" content="Yan de huan">
当前页的作者姓名
<meta name="description" content="myself">
当前页的说明
<meta name="robots" content="noindex">
告诉搜索引擎如何对待该文档,noindex:不要索引本页;noarchive:不要将本页存档或缓存;nofollow:不要顺着本页的链接继续搜索下去;
<meta http-equiv="refresh" content="5;http://www.baidu.com">
该代码作用让浏览器每隔5秒加载www.baidu.com
http-equiv属性的用途是指定所要模拟的标头字段名称,字段值则由content属性指定
meta元素的http-equiv属性允许使用的值
default-style:指定页面优先使用的样式表。对应的content属性值应与同一文档中某个style元素或link元素的title属性值相同;
content-type:这是另一种声明html页面所用字符编码的方法。如:
<meta http-equiv="content-type" content="text/heml charset=UTF-8">

###style 1、style元素的media属性用于确定所使用的设备,例如screen计算机显示屏幕;print打印文档;handheld手持设备 ###link 1、属性rel:说明文档与所关联 资源的关系类型,rel对应的值:

author:链接到文档的作者
help:链接到当前文档的说明文档
alternate:链接到文档的替代版本,比如另一种语言的译本
icon:指定图标资源
license:链接到当前文档的相关许可证
pingback:指定一个回探服务器。从其他网站链接到博客的时候他能自动得到通知
prefetch:预先获取一个资源
stylesheet:载入外部样式表
添加网站标志<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

###script执行顺序

defer:告诉浏览器要等页面载入和解析完毕之后才执行脚本
async:同时加载页面和脚本,异步执行脚本
例子:

<script defer src="...">

###表单

1、form元素的action属性或者button元素的formaction属性:指定表单数据发送到的URL
2、控制表单的自动完成功能:将表单form元素的autocomplete属性设置为禁用,他的值有两种,on和off,其默认值是on,表示允许浏览器填写表单。
3、自动聚焦到某个input元素:添加属性autofocus,例如:

<input autofocus>

4、对表单元素编组,fieldset元素,将input包裹住即可
5、为fieldset元素添加说明标签:legend元素,必须是fieldset元素的第一个子元素
6、使用表单外的元素 ###定制input元素 1、maxlength="Num":设置用户能够输入的字符最大数目;size="Num":设置文本框能够显示的字符数目
2、设置初始值和占位符提示:如果是提示用户输入什么样的数据,那就应该使用placeholder;如果想要提供一个默认值,使用value属性
3、input元素获取数值:

<input type="number" step="1" min="1" max="100" value="1">
step指定上下调节数值的步长;value初始值

4、获取指定范围内的数值

<input type="range" step="1" min="1" max="100" value="1">

5、获取颜色type="color"
6、获取搜索用词type="search"
7、用input元素生成图像按钮和分区相应图

<input type="image" src="accept.png" name="submit">

8、用input上传文件

<input type="file" name="filedata">

###其他表单元素及输入验证

1、optgroup元素可以用来在select元素的内容中建立一定的结构
2、输入验证:required--检查用户是否提供了一个值,如没有提供,则无法提交;使用方法如下:

<input type="text" required>	

3、确保输入值与指定模式匹配--使用pattern属性

<input type="text" pattern="^.*内容.*$">

4、同理确保输入值是邮箱

<input type="text" pattern="^>*@qq.com.*$">

###嵌入内容

1、创建客户端分区相应图--点击某张图像上的不同区域让浏览器导航到不同URL上,关键元素是map

<img src="" usemap="#mymap" alt="">
<map name="#mymap">
	<area href="" shape="" coords="" alt="">
	<area href="" shape="" coords="" alt="">
	<area href="" shape="" coords="" alt="">
</map>
map元素必须包含area元素,area元素的属性分为两类:
一、area所代表的图像区域被用户点击后浏览器导航到的URL;
二、代表不同的图像区域:
  shape属性和coords属性,其中shape属性的值有rect代表矩形,coords属性必须有四个用逗号隔成的整数组成,分别代表:图像的左边缘和矩形的左侧,上上,左右,上下;
  shape属性的值circle代表圆形区域,coords属性必须由3个整数组成,分别是:从图像左边缘到圆心的距离,上边缘到圆心的距离,圆的半径;
  shape属性的值default,这个值的意思是默认区域,shape属性使用这个值是不需要提供coords值
标签: 前端 html
共有 人打赏支持
粉丝 0
博文 2
码字总数 2490
×
疯狂菠萝
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: