• HTML&CSS常见问题整理(一)


    1.什么是HTML5?

    HTML5是最新的html标准。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地只是各种媒体的嵌入,HTML5的语法是向后兼容的。

    设计目的:HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas标记。HTML5还引进了新功能,可以真正改变用户和文档的交互方式,包括:

    1.新的解析规则增强了灵活性

    2.新属性

    3.淘汰过时的或冗余的属性

    4.一个HTML5文档到另一个文档间的拖放功能。

    (目前市场上智能手机使用量所占比例比较大)

    2.HTML5中什么是不同的新的表单元素类型?

    新的input类型有:

    email(自动验证email格式)

    url(自动验证url格式)

    number(只能输入数字)

    range(类似于音量滑动条)

    Date pickers(date,month,week,time,datetime.datetime-local)(自带日期选择)

    color(颜色选择,但兼容性还不太好)

    search(搜索域,类似百度的类似搜索提示)

    datalist(自动验证内容是否在可选择选项中)

    telephone

    3.HTML5的页面结构同HTML4或者更前的HTML有什么区别?

    (主要区别在于HTML5的标签语义化)

    一个典型的WEB页面包含头部、尾部、导航、中心区域、侧边栏。现在如归我们想在在HTML4的HTML区域中显示这些内容,我们可能要使用的是div标签。但是在HTML5总我们可以通过为这些区域创建元素名称使他们更加清晰,也使得你的HTML更加可读。比如:

    header---代表HTML的头部

    article---代表文章包含的内容

    section---使用内容article去定义区域或者把分组内容放到区域里

    aside---代表页面的侧边栏

    4.哪些浏览器支持HTML5?

    几乎所有的高版本浏览器Safari,Chrome,Firefox,Opera,IE8以上的浏览器都支持HTML5

    5.为什么HTML5里面我们不需要DTD?

    DTD--Document Type Definition文档类型定义

    HTML5没有使用SGML或者XHTML,它是一个全新的东西,因此不需要参考DTD,对于HTML5,你仅需放置下面的文档类型diamante告诉浏览器识别这是HTML5文档即可。

    6.HTML5的离线储存?

    localStorage 长期存储数据,浏览器关闭后数据不丢失
    sessionStorage 数据在浏览器关闭后自动删除

    7.浏览器是怎么对HTML5的实现储存资源进行管理和加载的呢?

    在线的情况下,浏览器发现html头部有manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行存储。
    离线的情况下,浏览器就直接使用离线存储的资源。

    8.请描述一下cookies,sessionStorage和localStorage的区别?

    a.cookies在浏览器和服务器间来回传递,sessionStorage和localStorage不会。

    b.sessionStorage和localStorage的存储空间更大

    c.sessionStorage和localStorage有更多丰富易用的接口

    d.sessionStorage和localStorage各自独立的存储空间

    9.页面可见性(Page Visibility)API可以有哪些用途?

    在页面被切换到其他后台进程的时候,自动暂停音乐和视频的播放。

    10.HTML5的form如何关闭自动完成功能?

    给不想要提示的input设置autocomplete=off

    11.一个div,要求实现当内容过少时,div的最低高度为200px,当内容较多时,div的高度被内容撑开。

    设置min-height:200px;

    12.实现一个布局,分左中右三栏,左栏固定宽为200px,右栏固定150px,中栏碎屏幕宽自动适应,写出html和css()

    13.a标签的四个伪类是什么?如何排序?为什么?

    a标签共有四个伪类,分别为active,hover,link,visited,他们分别表现了a的四种不同状态

    排序:为了产生预期的效果,在CSS定义中,hover必须位于link和visited之后,active又必须位于hover之后。

    注释:伪类的名称对大小写不敏感,且伪类可与CSS配合使用

    14.如何实现浮动元素居中?

    15.已知一个div内有一个img,两者的高度均不知道,但图片的高度一定小于div的高度,用CSS实现图片在div内的垂直居中。

    类似题目(淘宝UED:使用纯CSS效果实现未知尺寸的图片在200px的正方形容器中水平和垂直居中,图片高宽均小于200px)
    难点在于:
    1.垂直居中
    2.图片是个置换元素,有些特殊的特性

    16.HTML静态页面出现中文乱码如何解决?

    出现乱码一般是因为编码方式的问题,先检查一下是utf-8还是gbk,适当修改

    17.下列标签既是行内属性标签又可以设置宽高的标签是(d)

    A.div B.span C.input Dimg E.h1

    18.用一两句话说一下你对“盒模型”这个概念的理解,和它都涉及到哪些CSS属性

    网页设计中常听到的盒模型所涉及到的属性名:内容(content)、填充(padding)、边框(border)、边界(margin)

    这些属性我们可以用日常生活中的常见事物---盒子作为一个比喻来理解,所以叫它盒子模型

    CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

    19.外边距、内边距、边框有几种书写方式,列举说明

    外边距:margin

    margin-top,margin-right,margin-bottom.margin-left;

    简易写法:
    margin:2px 4px
    margin:2px 6px 10px
    margin:1px 2px 3px 4px

    内边距:padding

    padding-top,padding-right.padding-bottom,padding-left

    简易写法:

    padding:10px 一个值表示同时控制四个方向
    padding:2px 4px 两个值表示第一个值控制上下 第二个值控制左右
    padding:2px 6px 10px 三个值表示第一个值控制上 第二个值控制右和左 第三个值控制下 左边找右边
    padding:1px 2px 3px 4px 四个值表示每个值单独控制上右下左

    边框:border

    设置边框样式:border-style(none 不显示边线,dotted 点线,dashed 虚线,solid 实线,double 双线)
    设置边框的粗细:border-width(像素或者百分比)
    设置边框的颜色:border-color()

    简易写法:长度 样式 颜色

    注意:设置边框的颜色和长度之前必须先设置边框的样式,因为边框样式默认是none不显示边框。

    20.有上下两个div,上一个div设置margin-bottom:10px,下一个div设置margin-top:5px;那么两个div最后的间距是多少?

    10px

  • 相关阅读:
    Unity热更新06-XLua热补丁-05
    Unity热更新06-XLua热补丁-04
    Unity热更新06-XLua热补丁-03
    Unity热更新06-XLua热补丁-02
    Unity热更新06-XLua热补丁-01
    [SQLite][database disk image is malformed]数据库恢复
    VMware 安装MAC
    c#编写的服务中访问网络位置的共享文件夹
    Android Socket发送信息时闪退
    一个简单的Log类
  • 原文地址:https://www.cnblogs.com/shireyhu/p/7839784.html
Copyright © 2020-2023  润新知