说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获!

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.如何在页面上实现一个圆形的点击区域:

  1. map+area或者svg
  2. border-radius
  3. 纯js实现:首先判断一个点在不在圆上面,获取鼠标坐标

7.a标签书签形式:

最常见效果:返回顶部

<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中一些比较"偏门"的知识(map&area;iframe;label)的更多相关文章

  1. 谈谈CSS中一些比较"偏门"的小知识

    前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象:同时也希望有需要的人能有收获! 1.常见的浏览器内核: 以IE为代表 ...

  2. Javascript中那些偏门的知识

     1.(functiong(){})() 和 (function(){}())有细微差别,()是强制运算符,第一种写法强制返回函数本身,然后调用:第二种写法是强制返回函数执行的结果. 2.json格式 ...

  3. javascript中的一些偏门知识

    undefined能够被重写 undefined = "now it's defined"; alert( undefined ); 浏览器测试结果: 浏览器 测试结果 结论 ie ...

  4. 谈谈Java中的集合list、set、map之间的区别

    参考文献:https://www.cnblogs.com/IvesHe/p/6108933.html 我这里只总结其区别,具体的说明,请查看参考文献,讲的很详细. A.list接口,实现子类有:arr ...

  5. element-项目用到偏门方法~

    开发项目的时候,组件库的使用有时会为我们节省开发时间,提高开发效率,但组件库样式有时与我们的设计图出入很大,还有的方法也很偏门,主要官方文档有时候对于一些方法和属性介绍的也比较少,以下是我在工作中总结 ...

  6. 对QT的理解——能在公司里不做Java,不做很偏门的产品,不使用偏门的语言,还有钱挣,要有感恩的心

    我的理解: QT做应用软件可以很强大,界面足够漂亮(最有意思的是QSS,让我刮目相看),应该是足够了.同时QT也提供了源码,不过超级复杂,难以理解,所以还是无法深入底层.另外它提供了一个额外的好处,就 ...

  7. 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持

    谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持 在本篇文章上一部分Order Processing的例 ...

  8. 谈谈JAVA中的安全发布

    谈谈JAVA中的安全发布 昨天看到一篇文章阐述技术类资料的"等级",看完之后很有共鸣.再加上最近在工作中越发觉得线程安全性的重要性和难以捉摸,又掏出了<Java并发编程实战& ...

  9. 谈谈WPF中的CollectionView与CollectionViewSource (1)

    原文:谈谈WPF中的CollectionView与CollectionViewSource (1) 谈谈WPF中的CollectionView与CollectionViewSource (1)     ...

随机推荐

  1. Python生成器表达式

    https://www.cnblogs.com/liu-shuai/p/6098218.html 简介: 生成器表达式并不真正的创建数字列表,而是返回一个生成器对象,此对象在每次计算出一个条目后,把这 ...

  2. 转:Web项目的WEB-INF目录使用说明以及重定向与转发

    原文地址:https://www.cnblogs.com/shenxiaoquan/p/5819359.html 原文内容: 总结一下这篇文章的内容: WEB-INF下面的内容都是只能由服务器级别才能 ...

  3. tomcat去掉项目名称

    进入tomcat的conf目录,查看server.xml,找到<Host></Host>,在里面添加<Context path="" docBase= ...

  4. 1-4-bootloader架构学习

    1-4-bootloader架构学习 1.一般情况下嵌入式 Linux 系统中的软件主要分为以下几部分: 1) 引导加载程序:其中包括内部 ROM 中的固化启动代码和 BootLoader 两部分. ...

  5. 【托业】【新托业TOEIC新题型真题】学习笔记10-题库七-P7

    1.to request a review of information 要求审查资料 2.inform of 将…告知(某人); 3.flammable [ˈflæməbl]adj.易燃的,可燃的; ...

  6. linux 查看网卡流量:nload

    nload命令用于查看网卡流量,用法如下: [root@mysql test]# yum install -y epel-release [root@mysql test]# yum install ...

  7. svn 部署 配置

    创建目录并配置 建立版本库目录 创建一个项目名叫wy 在/data/svndata/wy mkdir -p /data/svndata/wy 建立项目版本库 创建一个新的Subversion项目wy, ...

  8. pymongo模块 目录

    MongoDB pymongo模块 MongoDB pymongo模块 查询 MongoDB pymongo模块 插入数据 MongoDB pymongo模块 更新数据 MongoDB pymongo ...

  9. ORACLE-osi分层模型.md

    一. 标准化组织ISOISO:国际标准化组织   ( International Organization for Standardization )OSI:开放系统互联   ( open syste ...

  10. IE8“开发人员工具”(上)

    认识“开发人员工具” 开发人员工具在IE8的工具菜单下,或者直接点击F12快捷键也可以呼叫出来. 提供一系列的小工具,让你可以方便的查找页面的bug,包括html代码.css代码和JavaScript ...