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

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. MySQL InnoDB加锁超时回滚机制（转）

    add by zhj: 看来我对MySQL的理解还有待深入,水还是挺深的啊,MySQL给记录加锁时,可以通过innodb_lock_wait_timeout参数设置超时时间, 如果加锁等待超过这个时间 ...

  2. mysql连接池不能回避的wait timeout问题（转）

    起因 我们的项目组一直在使用albianj作为开发框架在开发应用.使用至今倒也是没有出现很大的问题,但最近加过监控的接口基本上都会在使用一段时间后,突然之间执行数据库操作变得很慢.虽然会变慢,但持续的 ...

  3. 在function module 中向数据库插入数据

    http://www.sapjx.com/abap-function-module.html 1: 应该在function module 中向数据库插入数据

  4. MySql语句常用命令整理---多表查询

    首先第一张表还是我们单表查询之前用到t_employee,我们在另外新建一个表t_dept(部门表)建表命令如下: drop table if exists t_dept; CREATE TABLE ...

  5. network error:software caused connection abort

    使用Putty链接阿里云香港服务器报这个错误. vim /etc/ssh/sshd_config 找到如下配置 #ClientAliveInterval 540 #ClientAliveCountMa ...

  6. 部分还款-还款试算接口-python

    一.swagger-ui中 二.python中调用接口,出现的问题: 解决办法: import requests # 还款试算接口 ur1='http://10.253.43.83:8399/repa ...

  7. Centos 中 vi 和vim 的区别

    它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面. vim的这些优势主要体现在以下几个方面:1.多级撤消我们知道在vi里,按 u只能撤消上次 ...

  8. TestNG-详解preserve-order的作用与测试case的执行顺序

    在TestNG xml配置文件中,关于<test>的配置里面,有一个属性叫preserve-order,一开始以为这个属性可以用来控制测试case(那些被@Test注解标注的方法)的执行顺 ...

  9. Go cookie

    Web状态,对于我们从c/c++转过来的人来说还是很重视的啊 但,如何用好cookie来让我心顺畅,目前还是有点障碍 可能是我没能完全理解cookie 但是,如果由浏览器客户端决定自己绑定那个cook ...

  10. JavaScriptSerializer的日期转换方案

    1.转换后过滤替换(通用) /// <summary> /// 日期转换 /// </summary> /// <param name="str"&g ...