谈谈html中一些比较偏门的知识(maparea；iframe；label)

1.空元素(void)：没有内容的元素。

常见的有：<br>,<hr>（显示一条水平线）,<input>,<link>,<meta>（描述文档内元数据，如描述，编码，作者，关键字）；

不常见的有：<area>,<base>,<col>,<command>,<embed>,<keygen>,<param>,<source>,<track>,<wbr>

　　ps：很多不经常用，所以含义也无法记清。可以访问菜鸟教程在搜索框中输入相应的标签进行搜索查看！

关于hr：

                        < hr  color="red">
                    

　　ps：上述这行代码：改变水平线颜色；但如果要在css中设置，color:red不会生效（因为color设置的是字体颜色），可以考虑采用border:1px solid red来进行变色。

关于link：

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

　　ps：上述这行代码：设置标签页的图标（头像），href属性值后缀可以为.icon,.png等

2.块元素&行元素：css标准规定：每个元素都有默认的display值。

块元素：display: block;　　　　　　　　　　常见有：div ul ol li dl dt dd h1~h6 p

行内元素（内联元素）：display：inline;　　　　常见有：a b span img input select strong(加重语气)

3.XHTML：XML格式编写的html

xhtml：可扩展的超文本标记语言
xhtml：与html 4.0.1 几乎是相同的
xhtml：更严格纯净的html版本
xhtml：2001年1月发布的W3C标准推荐
xhtml：得到所有主流浏览器的支持

与html重要区别体现：

文档结构：

xhtml doctype是强制性的
<html>中的XML namespace属性是强制的
<html>,<head><title>,<body>均是强制性的

元素语法：

元素必须正确嵌套
元素必须始终关闭；如<br />
元素必须小写
元素必须有一个根元素

属性语法：

属性必须小写
属性值必须用引号包围
属性值不能简写

4.HTML<base>

                        < base  href="http://www.g.cn" target="_blank">
                    

　　ps：该标签作为html中所有链接标签的默认链接（个人不建议使用）

5.img

始终添加alt属性：

                        < img  src="" alt="">
                    

　　ps：当图片加载失败时，alt属性可以告诉用户相关信息；同时有利于纯文本浏览用户（这个应该比较少吧）；有利于爬虫抓取，利于seo。

说到alt,就得说说title：

　　title：鼠标悬停相关元素上时，会出现提示文本。

定义图像可点击区域(map,area)：

                            < img  src="test.png" alt="a" usemap="#amap">
                        
                                 < map  name="amap">
                        
                                     < area  shape="rect" coords="0,0,10,10" href="1.html">
                        
                                     < area  shape="circ" coords="" href="">
                        
                                     < area  shape="poly" coords="" href="">
                        
                                 </ map >

　　"rect"：x1,y1,x2,y2：左上角和右下角坐标
　　"circ"：x,y,radius：圆心坐标和半径
　　"poly"：多边形，x1,y1,x2,y2......：各顶点坐标；如果第一对坐标与最后一对坐标不一致，浏览器会添加一对坐标进行闭合图形

6.如何在页面上实现一个圆形的点击区域：

map+area或者svg
border-radius
纯js实现：首先判断一个点在不在圆上面，获取鼠标坐标

7.a标签书签形式：

最常见效果：返回顶部

1 2	`<` `a` `id="test">顶部</` `a` `>` `<` `a` `href="#test">返回顶部</` `a` `>`

8.iframe语法：可以在同一个浏览器窗口显示多个页面：

                        < iframe  src="3.html" width="200px" height="200px" ></ iframe >
                    

　　不显示边框：

                        < iframe  src="3.html" width="200px" height="200px" frameborder="0"></ iframe >
                    

iframe缺点：

阻塞主页面的onLoad事件；
搜索引擎的检索程序无法解读这种页面，不利于seo；
iframe和主页共享连接池，而浏览器对相同的域连接有限制，会影响页面的并行加载；

9.label标签：定义表单间控制关系，当用户点击标签时，浏览器会自动将焦点转到相应的表单控件上。

< form >

< label for="name">点击这里,鼠标光标焦点转至输入框中</ label >

< input type="text" name="name" id="name">

</ form >

谈谈html中一些比较偏门的知识(maparea；iframe；label)相关推荐

AI（人工智能）下一个偏门行业赚钱的契机
当有人问AI(人工智能)是什么? 很多人也许都能说上几句,但理解也就是简单的局限在概念上,实际上自己也不清楚自己懂多少. 现在的这一情景,可不就像极了二十年前的互联网.那个年代,好多人都听说过互联网, ...
ue4相机_[UE4]偏门实用技巧合集
前言:不论是玩游戏,还是玩软件,我对操作和技巧都有着痴迷的追求.而且是个快捷键狂魔.[SD plugin] 快捷键创建节点重新排布插件(nuke UE4风格) 从这个工具就能看出来,我对快捷键的执着, ...
Hive _偏门常用查询函数（二）附带实例（列转行、窗口函数）
接上篇博客: Hive _偏门常用查询函数(一)附带实例 https://blog.csdn.net/qq_41946557/article/details/102904642 列转行 1．函数说明 ...
SRC漏洞挖掘之偏门资产收集篇
写这篇文章的目得,就是跟大家分享一下平时我挖src漏洞的一些经验,当自己挖到某个站点的漏洞时,往往就会欣喜若狂的往src平台上提交,得到的结果却是 "漏洞已重复,感谢提交" ,其实 ...
华为二面!!！被问常用API，这也太偏门了吧，我秀了一波hhhh~
华为二面!!!被问常用API,这也太偏门了吧,我秀了一波hhhh~ 常用API 一.API概述二.Scanner类代码三.Random类代码四.* ArrayList类 **存储基本数据类型 ...
ue4 改变枢轴位置_[UE4]偏门实用技巧合集
前言: 不论是玩游戏,还是玩软件,我对操作和技巧都有着痴迷的追求.而且是个快捷键狂魔. 从这个工具就能看出来,我对快捷键的执着,对工作效率极致提升的吹毛求疵. 戴巍:[SD Plugin] 快捷键创建 ...
微信公众号推广一些常用方法和Dd_g自己使用的一些偏门的方法
前面21条方法都是网上到处有的,常用的一些方法.最后我还分享了小编自己的一些偏门的方法. 一.合作互推虽然是微博上的玩法,但据称效果还不错!这也是最好最快的方法.微信互推的效果远比微博互推的效果好. ...
该如何从教育行业转行做IT——我的真实经历给出的偏门答案
"我需要,最狂的风,和最静的海."--顾城本文是对想要入行IT,但是没时间没钱上IT培训班的小伙伴的一些小小的建议,我即将要说的是最近发生在我自己身上的事,这些可以成为" ...
一个月捞偏门可挣20万？来看看！
随着生活成本逐渐增加,年轻人的薪资已经支撑不起自己的消费需求,越来越多的人在空余时间不再"躺平",而是接二连三地搞起了副业.国家发改委也鼓励副业创新,相信大多数人都会有些许心动.我 ...

谈谈html中一些比较偏门的知识(maparea；iframe；label)

iframe缺点：

谈谈html中一些比较偏门的知识(maparea；iframe；label)相关推荐

最新文章

热门文章