添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
性感的灯泡  ·  Call to undefined ...·  1 月前    · 
逆袭的电梯  ·  WPF ...·  1 年前    · 
淡定的长颈鹿  ·  Ubuntu默认的awk awk: ...·  1 年前    · 
  • 内容元素: header , nav , footer , section
  • 表单控件: calender , date , time , email , url , search
  • 本地存储: localStorage 长期存储数据,浏览器关闭后数据不会丢失, SessionStorage 数据在浏览器关闭之后自动删除
  • 媒介播放: video , audio
  • 绘画使用: canvas
  • 二. 语义化的理解:

  • HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
  • 在没有css样式的情况下也能以一种文档显示,并且是容易阅读的
  • 利于SEO,语义化和搜索引擎建立良好的关系,有利于爬虫抓取更多有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重
  • 便于团队开发和维护,语义化更具可读性,便于阅读,维护和理解
  • 三. XHTML和HTML有什么区别?

  • XHTML文档必须拥有根元素
  • XHTML元素必须被正确的嵌套
  • XHTML元素必须被关闭
  • 标签名必须用小写字母
  • 四. C3新特性有哪些?

  • 动画: animation
  • 2D,3D转换: transform
  • 过度: transition
  • 边框圆角:border-radius, 阴影:box-shadow
  • 盒子模型: box-sizing
  • 文字阴影: text-shadow
  • 背景: background-size, background-origin背景图片原点
  • 渐变: linear-gradient
  • 伸缩布局: flex
  • 颜色: rgba()
  • 五. 清除浮动有几种方式?

  • 父级元素设置height
  • 结尾处加空div标签clear:both
  • 父级元素设置overflow: hidden / auto
  • 使用伪类:after 必须设置content: '';
  • 六. 媒体查询的原理是什么?

  • H5的新特性,使用@media查询,你可以针对不同的媒体类型定义不同的样式
  • 七. 流式布局

  • 按照页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变,使用%百分比定义宽度,高度大都 是用px来固定,可根据可视区域和父元素的实时尺寸来调整,尽可能适应各种分辨率
  • 八. 响应式布局

  • 主要实现不同屏幕分辨率的终端上浏览网页的不同展示方式,通过响应式设计能使网站在手机和平板上有更好的浏览阅读体验
  • 九. 性能优化

    网络通信方法 :(降低请求次数,降低传输量)

  • 图片的压缩
  • 启用CDN托管服务
  • 启用gzip压缩(网络传输的压缩),二进制压缩,大概可以压缩为原来的1/3
  • 代码层 : (节省内存)

  • 尽量不使用闭包
  • 杜绝无效的循环
  • 递归过程优化(添加缓存)
  • 业务相关的业务逻辑优化
  • 十. 如何居中一个元素

  • 行内元素水平居中
  • 父容器使用text-align: center设置
  • 块级元素水平居中
  • 将左右外边距设置为auto: margin: 0 auto
  • 将父元素设置为相对定位,子元素绝对定位,向右移动子元素,距离为父容器的一半,然后在向左移动自身的一半
  • <div class= "parent">
        <div class= "child"></div>
    </div>
    <style>
        .parent {
            position: relative;
        .child {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
    </style>
    
  • 父元素设置为flex布局,使用justify-content: center
  • 父元素设置为flex布局,子元素使用margin: 0 auto
  • 浮动元素水平居中
  • 利用flex布局,使用justify-content: center实现水平居中
  • 绝对定位元素水平居中
  • 通过子元素绝对定位,外加margin: 0 auto实现
  • <div class= "parent">
        <div class= "child"></div>
    </div>
    <style>
        .parent {
            position: relative;
        .child {
            position: absolute;
            margin: 0 auto;  /*水平居中*/
            left: 0;        /*不能省略,且为0*/
            right: 0;       /*不能省略,且为0*/
    </style>
    
  • 单行行内元素垂直居中 使用行高=高line-height
  • 多行行内元素垂直居中
  • 使用flex布局,调整主轴方向为纵向flex-direction: column,在使用justify-content: center
  • 块级元素垂直居中
  • 使用绝对定位距离顶部50%,并设置margin-top向上偏移元素高度的一半(已知高度)
  • <div class= "parent">
        <div class= "child">固定高度的块级元素垂直居中</div>
    </div>
    <style>
        .parent {
            position: relative;
        .child {
            position: absolute;
            top: 50%;
            height: 100px;
            margin-top: -50%;
    </style>
    
  • 使用绝对定位+transform(未知高度)
  • <div class= "parent">
        <div class= "child">未知高度的块级元素垂直居中</div>
    </div>
    <style>
        .parent {
            position: relative;
        .child {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
    </style>
    
  • 使用flex布局中align-items: center属性,使子元素垂直居中
  •     <div class= "parent">
            <div class= "child" style="width: 100px; height= 100px;"></div>
        </div>
        <style>
            .parent {
                position: relative;
            .child {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -50px 0 0 -50px;
        </style>
    
  • 绝对定位+margin: auto(不需要知道宽高,不兼容低版本IE)
  •     <div class= "parent">
            <div class= "child" style="width: 100px; height= 100px;"></div>
        </div>
        <style>
            .parent {
                position: relative;
                height: 200px;   /*父容器必须有高度*/
            .child {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
        </style>
    
  • 绝对定位+translate
    .parent {
        position: relative;
        height: 200px;   /*父容器必须有高度*/
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    
  • flex布局 主轴对齐,侧轴对齐(不兼容低版本IE)
    .parent {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    
  • 父元素flex布局,子元素直接margin: auto即可(最简单的,也不兼容低版本IE)
    .parent {
        height: 100px;
        display: flex;
    .child {
        margin: auto;
    

    十一 . meta标签有哪些特性? viewport的原理是什么

  • meta标签可以用来做SEO优化,指定移动端viewport的展现形式,设置http请求,告诉浏览器缓存静态资源的模式等等
  • meta标签的作用取决于定义的属性和属性值
  • charset: 定义文档的字符编码
  • name: 把content属性连接到某个名称
  • content: 定义与http-equiv或name属性相关的信息
  • http-equiv: 把content属性关联到http头部
  • 不同的浏览器的默认初始值不同 --->引入全局控制样式
  • 块级标签float后,又有横行的margin的情况下,在IE6显示margin比设置的大 --->在float的标签样式控制中加入display:inline,将其转化为行内属性
  • 设置小于10px高度标签,在IE6,7中无法正常显示设置高度 ---> 给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度
  • 图片之间默认有间距 --->使用float属性为img布局
  • 行内元素设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug ---> 在display:block后面加入display:inline;display:table
  • 十三. 盒子模型

  • margin(外边距)+padding(内边距)+border(边框)+content(内容)
  • 十四. 浮动元素引起的问题和解决办法?

  • 浮动会引起一下问题:
  • 由于浮动元素已脱离文档流,所以父元素无法被撑开,影响与父级元素同级的元素
  • 与浮动元素同级的非浮动元素(内联元素)会跟随其后,也是由于浮动元素脱离文档流,不占 据文档流中的位置
  • 如果该浮动元素不是同级第一个浮动的元素,则他之前的浮动也会应该浮动,否则容易影响页面结构
  • 清除浮动的常用方法:
  • 父级元素设置height
  • 结尾处加空div标签clear:both
  • 父级元素设置overflow: hidden / auto
  • 使用伪类:after 必须设置content: '';
  • 十五. flexbox的使用场景

  • flex布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可以控件的能力,flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局.
  • 十六. inline和inline-block的区别?

  • inline元素设置宽高属性无效
  • inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会换行,其宽度随元素的内容而变化
  • inline元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都会产生边距效果,垂直方向的padding-top,padding-bottom,magin-top,margin-bottom不会产生边距效果
  • 十七. transition和animation 的区别

  • transition需要事件触发,所有没法再网页加载时自动发生
  • transition不会重复发生,除非再次触发
  • transition只能定义开始状态和结束状态,不能定义中间状态
  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性
  • animation是调用关键帧声明的动画.@keyframes就是关键帧
  • Bpuns JavaScript
    • 1874
  • 私信
  •