zoukankan      html  css  js  c++  java
  • 一些易忘记的常识HTML,不定期添加

    --行内元素不能嵌套块元素,这种格式在w3c校验无法通过。

    块级元素也有嵌套顺序:

    哪些块元素里面不能放哪些块元素呢?先把所有的块元素再次划分成几个级别的,<html>是在最外层,<html>下一级里面只会 有<head>、<body>、<frameset>、<noframes>,而我们已经知道了可视的元素只会出现在<body>里,所以我们把<body>划在第一个级里面。

    接着,把不可以自由嵌套的元素划在第三个级,其他的就 归进第二个级。

    所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记 的<h1>-<h6>、<caption>; 段落标记的<p>;分隔线<hr>和一个特别的元素<dt>,它只存在于列表元素<dl>的子一级。

    为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把<ul>嵌在<div>里面,也可以把<div>嵌 在<li>里面。

    在HTML里有几个元素是比较特别的:<ul>、<ol>、<dl>、<table>,它们的子一层必 须是指定元素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须 是<dt>或者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容 的<td>或者<th>。

    --flash层级问题

    flash背景透明

    火狐实现Flash背景透明,需要在embed标签中,添加属性wmode="Transparent";而IE则需要在object标签中间,添加<param name="wmode" value="Transparent" />

    flash在最底层

    在embed标签中,添加属性wmode="opaque"

    --em和strong的区别

    HTML4.01的说明:

    em:Indicates emphasis(表示强调)

    strong:Indicates stronger emphasis(表示更强烈的强调)

    区别一:浏览器中,em默认用斜体表示,strong用粗体表示。

    区别二:从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认样式。

    区别三:HTML5草案的解释:

    1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.

    2. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

    em表示内容的着重点(stress emphasis),strong表示内容的重要性(strong importance),strong不会改变所在句子的语意,em则会。

    e.g.:

    <p><em>cats</em>are cute animals</p>强调猫,讨论的是哪种动物聪明可爱。

    <p>cats<em>are</em>cute animals</p>强调讨论猫是不是聪明可爱。

    <p>cats are<em>cute</em>animals</p>强调的是聪明可爱,讨论的是猫究竟是聪明可爱还是愚蠢讨厌。

    <p><strong>warning.</strong>This dungeon is dangerous.<strong>Avoid the ducks.</strong>Take any gold you find.<strong><strong>Do not take any of the diamonds</strong>,they are explosive and<strong>will destory anything withinten meters.</strong></strong>You have been warned.</p>

    strong表示的是重要性上的强调,不会引起句子意思的变化。最后注意em和strong都能多重嵌套,比如使用两个strong来表示内容很重要。

    --傲游浏览器中的:hover下划线不能显示情况

    傲游浏览器急速模式下,a标签使用了宋体,那么鼠标经过是不能正常显示下划线(前提:a:hover{text-decoration:underline;})

    --base css渲染速度

    ● 通配符的避免使用,消耗性能*{}

    ● 滤镜的避免使用,消耗性能{filter:gray}

    ● 绝对定位使用过多,会让网页变得非常慢,这一点FF比IE表现还差。(还要看绝对定位这个标签里面的内容多少,待印证){position:absolute}

    ● background背景平铺次数

    ● 属性尽可能去继承(尽可能让属性的子能继承父,而不是覆盖父)

    ● css路径别太深 #a #b #c h1{ font-size:14px}

    ● 别放空的class或没有的class在html代码中

     --about ie6 hack

    ● a标签嵌套img会有边框,那是超链接的默认样式。img{border:none}

    ● 条件注释(可能会增加额外的HTTP请求数?)

    ● css选择器。ie6不支持子选择器:先针对ie6使用常规申明选择器,然后再用子选择器针对ie7+和其他浏览器

    .content{color:red}/* ie6 */

    div>p.content{color:blue}/* other browser */

    ● ie6背景闪烁。原因是ie6没有将背景图缓存,每次触发hover的时候都会重新加载。可以用js设置ie6缓存这些图片:

    document.execCommand("BackgroundImageCache",false,true);

    ● 最小高度。ie6不支持min-height,但它却认为height就是最小高度。使用ie6不支持的!important

    #container{min-height:200px;height:auto!important;height:200px;}

    ● 最大高度。js计算

    var con = document.getElementById("container");

    con.style.height = (con.scrollHeight > 199) ? "200px" : "auto"

    //函数化

    function setMaxHeight(elem,height){

      var con = document.getElementById(elem);

      con.style.height = (con.scrollHeight > (height-1)) ? height + "px" : "auto";

    }

    ● 最小宽度。js计算

    var con = document.getElementById("container");

    con.style.width = (con.clientWidth < 500) ? "500px" : "auto";

    //函数化

    function setMinWidth(elem,width){

      var con = document.getElementById(elem);

      con.style.width = (con.clientWidth < width) ? width + "px" : "auto";

    }

    ● 最大宽度。js计算

    var con = document.getElementById("container");

    con.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

    //函数化

    function setMaxWidth(elem,width){

      var con = document.getElementById(elem);

      con.style.width = (con.clientWidth > (width - 1)) ? width + "px" : "auto";

    }

  • 相关阅读:
    delphi参数传递
    Delphi OO
    Delphi Excel
    Delphi Register
    西安前端交流会
    web前端开发教程系列-4
    web前端开发教程系列-3
    web前端开发教程系列-2
    web前端开发教程系列-1
    露个脸
  • 原文地址:https://www.cnblogs.com/archrjoe/p/2442938.html
Copyright © 2011-2022 走看看