zoukankan      html  css  js  c++  java
  • 谈谈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>
    

      

      

  • 相关阅读:
    redis相关问题
    redis的持久化功能
    redis运维常用的server端命令
    Redis运维时需要注意的参数
    redis模拟消息订阅
    redis设置密码
    redis简单的事务
    Redis的配置文件详解
    Linux中安装redis的phpredis扩展
    css动画属性--小球移动
  • 原文地址:https://www.cnblogs.com/why-not-try/p/7846559.html
Copyright © 2011-2022 走看看