专栏首页Micro_awake web谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

谈谈html中一些比较"偏门"的知识(map&area;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.如何在页面上实现一个圆形的点击区域:

  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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQuery基础

    学习jQuery的时候,很快过了一遍,发现好多知识点不清晰。看来还是要写出来加深印象,平时多练习! jQuery是一个Javascript函数库,轻量级,“写得...

    用户1149564
  • JavaScript(六):错误处理机制

    1.Error()构造函数 javascript解析或执行语句时,一旦发生错误,js引擎会将其抛出! JavaScript原生提供了Error()构造函数,所有...

    用户1149564
  • es6(六):module模块(export,import)

    es6之前,社区模块加载方案,主要是CommonJS(用于服务器)和AMD(用于浏览器) 而es6实现的模块解决方案完全可以替代CommonJS和AMD ES6...

    用户1149564
  • iOS 中 HTTPS 证书验证浅析

    客户端发起请求,以明文传输请求信息,包含版本信息,加密套件候选列表,压缩算法候选列表,随机数random_C,扩展字段等信息。

    用户6094182
  • 速读原著-TCP/IP(SMTP协议)

    两个M TA之间用NVT ASCII进行通信。客户向服务器发出命令,服务器用数字应答码和可选的人可读字符串进行响应。这与上一章的 F T P类似。

    cwl_java
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 部分APP无法代理抓包的原因及解决方法

    HTTP应用层的抓包已经成为日常工作测试与调试中的重要一环,最近接触新项目突然之间发现之前的抓包手段都不好使了,顿时模块与模块之间的前端与服务之间的交互都变成了...

    lulianqi
  • asp.net web api 使用自签名SSL证书

    1自签名SSL证书的创建 创建自签名SSL工具xca为:https://sourceforge.net/projects/xca/ 创建过程 1)创建根证书 打...

    甜橙很酸
  • 吹弹牛皮之Unity Shader光圈遮罩效果

    ,时刻砥砺自己要不断学习进步。接上篇小菜的《吹弹牛皮之Unity Shader放大镜效果》发布之后,小菜一直在想同样的实现原理还能改造下做些什么事情呢?殊途同归...

    用户7698595
  • Selenium自动化测试-8.iframe处理

    在上一篇:Selenium自动化测试-获取元素属性信息,介绍了如何获取元素的内容、属性、状态信息。写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不...

    ITester软件测试小栈

扫码关注云+社区

领取腾讯云代金券