zoukankan      html  css  js  c++  java
  • HTML5小知识汇总

    1、关于<!DOCTYPE HTML>

    H5只需要<!DOCTYPE HTML>这样简单的声明,不用之前一长串代码,因为H5不是基于SGML,所以不需要对DTD引用,但是需要DOCTYPE规范浏览器的行为

    2、行内元素,块级元素,空元素

    行内元素:a b span img input select strong

    块级元素:div ul ol li dl dt dd h1 h2 p

    空元素:<br> <hr> <img> <link> <meta>

    3、页面导入样式时,link和@import有什么区别

    (1)link是XHTML元素,@import是css自带的

    (2)link引入的css是页面加载时同时加载,而@import引入的css是在页面加载完成后才加载的

    (3)@import至少需要ie9才完全支持,而link无兼容性问题

    (4)link方式的样式权重高于@import的权重

    4、H5有哪些新特性,移除了哪些元素?如何解决新标签的浏览器兼容性问题?

    新增元素:

    (1)内容元素:article footer header nav section

    (2)表单控件:date datetime datetime-local month week time email number range search tel url

    (3)控件元素:webworker websockt geolocation

    移除元素:

    (1)显现层元素:basefont big center font s strike tt u

    (2)性能较差的元素:frame

    5、如何区分 HTML 和 HTML5?
    答案解析:
    1)在文档类型声明上不同:
    HTML是很长的一段代码,很难记住,而HTML5却只有简简单单的声明,方便记忆。
    2)在结构语义上不同:
    HTML:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
    HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>

    7、HTML5的离线储存怎么使用,工作原理能不能解释一下?
    答案解析:
    localStorage 长期存储数据,浏览器关闭后数据不丢失;
    sessionStorage 数据在浏览器关闭后自动删除。

    10、常见兼容性问题?
    1)png24位的图片在IE6浏览器上出现背景;
    解决方案是:做成PNG8;
    2)浏览器默认的 margin 和 padding 不同。
    解决方案是:加一个全局的*{margin:0;padding:0;}来统一。
    3)IE6双边距bug:块属性标签float后,又有横行的 margin 情况下,在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。
    解决方法:加上_display:inline,使浮动忽略
    4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。
    解决方法:统一通过getAttribute()获取自定义属性。
    5)IE下,even对象有x,y属性,但是没有pageX,pageY属性,但是没有x,y属性;
    解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
    6)Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
    解决方法:可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
    7)超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active ;
    解决方法:改变CSS属性的排列顺序:L-V-H-A: a:link{ }  a:visited{ } a:hover{ } a:active{ } 

    11、如何实现浏览器内多个标签页之间的通信?
    答案解析:
    调用localstorge、cookies等本地存储方式

    12、webSocket如何兼容低浏览器?
    答案解析:
    Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

    13、支持HTML5新标签
    答案解析:
    1)IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式;
    2)当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
    <!--[if lt IE 9]> 
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
    <![endif]-->

    22、如何居中div? 如何居中一个浮动元素?
    答案解析:
    给div 设置一个宽度,然后添加 margin:0 auto 属性;div{200px; margin:0 auto; }

    23、居中一个浮动元素
    答案解析:
    确定容器的宽高  宽500 高300的层,设置层的外边距
    .div{500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green;left:50%;头:50%}

    25、为什么要初始化 CSS 样式
    答案解析:
    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
    当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
    最简单的初始化方法是:*{padding:0;margin:0} (不建议)
    淘宝的样式初始化:
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, 
            textarea, th, td { margin:0; padding:0; } 
            body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } 
            h1, h2, h3, h4, h5, h6{ font-size:100%; } 
            address, cite, dfn, em, var { font-style:normal; } 
            code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
            small{ font-size:12px; } 
            ul, ol { list-style:none; } 
            a { text-decoration:none; } 
            a:hover { text-decoration:underline; } 
            sup { vertical-align:text-top; } 
            sub{ vertical-align:text-bottom; } 
            legend { color:#000; } 
            fieldset, img { border:0; } 
            button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } 

    29、CSS实现垂直水平居中

    答案解析:

    一道经典的问题,实现方法有很多种,以下是其中一种实现:

    HTML结构:

    <div class="wrapper">

        <div class="content"></div>

    </div>

    CSS:

    .wrapper{position:relative;}

        .content{

            background-color:#6699FF;

            200px;

            height:200px;

            position: absolute;        //父元素需要相对定位

            top: 50%;

            left: 50%;

            margin-top:-100px ;   //二分之一的height,width

            margin-left: -100px;

        }

  • 相关阅读:
    《区块链100问》第33集:在交易平台投资区块链资产
    Python学习(三)数组属性方法总结
    Python学习(二)Numpy学习
    数学之美 第2章 自然语言处理:从规则到统计
    数学之美 第1章 文字和语言 vs 数字和信息
    Python学习(一)基础知识
    Python使用技巧(不定期更新)
    玩转Git三剑客——04. 创建第一个仓库并配置local用户信息、05. 通过几次commit来认识工作区和暂存区
    玩转Git三剑客——02. 安装Git、03. 使用Git之前需要做的最小配置
    玩转Git三剑客——01. 课程综述
  • 原文地址:https://www.cnblogs.com/xwlong/p/7999201.html
Copyright © 2011-2022 走看看