一些小结汇总

1.常用浏览器及对应内核

    Safari浏览器(苹果浏览器):Webkit内核
    Google浏览器:Blink内核
    Firefox:Gecko内核
    Edge浏览器:Chromium内核
    IE浏览器:Trident内核


2.10个块标签和10个行标签
    
    块标签:独占一整行
        h1-h6, p , hr ,div ,tbale ,tr, ul ,ol ,dt ,dd li 
                    
    行标签:一行内可以插入多个标签
        b, span ,i ,u ,small ,big ,ins, em , sup,    sub,del
        

3.什么是html属性
    
    html属性 :给html元素提供的附加信息
    html属性一般描述于开始标签,写在开始标签里
    html属性通常是以  属性名="属性值" 成对出现    
        键值对:key="value",单键对应单值
    html属性属性名和属性值 ,推荐英文字母小写
    html属性不分主次,不分先后 

4.图片标签的属性 src width height alt title 

    src width height alt title 
    source:源头,
    alt:替换 当图片破损无法正常显示时,替换当前文本
    title:当鼠标悬浮在当前元素时,在鼠标右下角显示文本内容

5.alt title有什么作用

    alt:替换 当图片破损无法正常显示时,替换当前文本
    title:当鼠标悬浮在当前元素时,在鼠标右下角显示文本内容

6.锚链接如何实现

    在需要跳转的位置插入
    <h1 id="locate">跳转地点</h1>

    在跳转按钮处插入
    <a href="#locate">跳转按钮</a>
    

7.字体小图标的实现代码

    <link rel="shorcut icon" type="image/x-icon" href="链接地址">

    link引用标题logo,rel声明该属性与本文档之间的关系,type声明该属性的类型,href属性引用链接地址来实现调用


    

8.form表单的action 和method有什么作用

    action=“链接地址”            链接方式
    method=“get / post”        提交方式
    
9.input有哪些常用的属性

    name:元素名称
    type:定义元素的类型

    value:输入框的预输入值    
    palceholder:提示信息

    checkded:规定预选项
    maxlength:规定用户输入的最大字符长度
    autofocus:自动获取焦点
    
    disabled:禁用
    readonly:只读

10.input的type有哪些属性值

    

    text:文本输入框类型
    password:密码输入框类型 (字符不可见)

    label可以使选框与文字捆绑
    checkbox:多选框  
    radio:单选框 配合name使用 

    file:上传文件
    number:数字输入框

    submit:提交按钮(默认提交)
    reset:重置数据
    button:按钮

    date:日期选择框
    datetime-local:日期加时间
    image:图片类型 (默认提交)

11.textarea如何禁止拉伸

    设置resize=none

12.前端分为哪三层?
    
    结构层HTML:负责搭建网页的基本结构

    表现层CSS:负责设计网页的表现样式

    行为层JS:负责实现网页的交互设计

13.css的选择器及优先级

    通配符选择器:*
    标签选择器:标签名
    class选择器(类选择器):.+class名
    id选择器:#+id名
    !important
    
    组合选择器:
        子代选择器:使用>隔开,选择直接子代元素
        后代选择器:使用空格隔开,选择所有符合选择的后代元素    
        相邻兄弟选择器:使用+隔开,选择本元素后的同一父级下的单个元素
        后续兄弟选择器:使用~隔开,选择本元素后的同一父级下同种的多个元素
        多个元素选择器:使用,隔开,可以同时选择多个不同级别和标签的元素


    !important(10000)>id选择器(100)>class选择器(10)>标签选择器(1)>通配符选择器
        组合选择器计算为属性值权重的相加
    

14.文本样式有哪些属性
    
    color:颜色
    text-align:水平对齐方式
    line-height:行高
    vertical-align:垂直对齐方式
    text-decoration:定义文本修饰线
    text-index:首行缩进
    text-shadow:文本阴影
    letter-spacing:文本间隔
    word-spacing:字体间距
    text-transform:元素字母的大小写

    unicode-bidi:返回文本是否重写
    (unicode-bidi:bidi-override)
        {
            direction:rtl;
            <--定义文本的重写方向,从右往左-->
        }

    white-spacing:设置元素中空白的处理方式(多用于设置空格等空白间隔的解析方式)


15.链接属性有哪些?顺序

    :link
    :hover
    :active
    :visited

16.字体属性有哪些?

    font-size:字体大小
    font-style:字体样式
    font-weight:字体粗细
    font-family:字体系列
    

17.背景属性有哪些?

    bgcolor:背景色
    bgimg:背景图

        基于背景图片实现
        bgsize:背景图显示大小
        bgposition:背景图相对于原图所显示的位置
        bgreport:背景是否重复
        background-attachment:背景图是否随着页面滚动而进行滚动

18.什么是盒模型?box-sizing有哪些值?有什么区别

    在html中规定网页元素如何显示,元素与元素之间的相互关系
    
    box-sizing
        content-box:标准盒模型(W3C标准)
            盒子宽高为 内容+内边距+边框 的和

        border-box:怪异盒模型(IE浏览器默认标准)    
            盒子的宽高直接为所设置的宽高,包含了内容宽高,内边距宽高,外边距宽高,更适合由外向里布局
            直接定义固定宽高并对内容的宽高进行挤压,来限定内容的位置或写入一个固定的盒子

19.如何隐藏元素?有什么区别

    (1)display:none:直接使文本脱离标准文档流,不占据具体位置,导致页面重新排序,需使用display:block来进行显示
                    子元素无法继承,但是会被隐藏,具有单独的display属性,无法脱离父元素单独显示
                    因元素本身不占据位置且隐藏,导致无法触发事件
                    无法触发transition的动画效果


    (2)visibility:hidden:不会脱离文档流,元素隐藏时占据页面位置,需要使用visibility:visible来进行显示
                    子元素会继承该属性,跟随父元素进行隐藏,且可设置单独的visibility属性,可以脱离父元素进行单独显示
                    该元素也无法触发事件(暂认为该元素的隐藏方式为“徒留其形”,“可闻不可见”占据本身文档流但不具备被交
                                       互的能力,但自身所占据的排序等不被影响,类似于插入一个无法进行的交互的iform窗口)
                    可以触发transition的动画效果,但是较为鸡肋


    (3)opacity:0 :不会脱离文档流,元素隐藏时占据页面位置,需要改变opacity的属性值
                    子元素会继承该属性并在其基础上叠加,不可脱离父元素单独显示,同样具有opacity属性
                    该元素可以触发事件,且可以触发transition动画


20.浮动的作用?弊端?如何清除浮动?
        
    让元素显示在同一行内

    会导致父元素高度塌陷,会脱离文档流导致网页格式错误

        在最后一个浮动元素侯建加入一个空的块级元素并赋予样式 clear:both
        给浮动元素的父元素设置 overflow: hidden; 或 overflow: auto; 属性,通过触发BFC(块级格式化上下文)来清除浮动。
        给父元素设置高
        给父元素设置伪元素 :after/ :before
                        {
                            content:‘’”;
                            display:block;
                            clear:both;
                            overflow:hidden
                        }
    

21.定位有哪些值?有什么区别

    position    指定了元素的定位类型

        relative    生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素
                不脱离文档流,占据位置

        absolute    生成绝对定位的元素,相对于第一个设有position的父元素进行定位。
            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 
            脱离标准文档流  不占位置  

        fixed        生成固定定位的元素,相对于浏览器窗口进行定位。
            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。   
            脱离标准文档流  不占位置

        sticky:吸顶效果

            top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
            right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
            bootom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
            left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。
            z-index:元素的在z轴的前后顺序


22.弹性布局有哪些属性
    
    flex-direction:子级的排列方向
    flex-wrap:定义换行
    justify-content:主轴对齐方式
    align-items:单轴对齐方式
    align-content:多轴对齐方式
 
23.响应式布局如何实现

    通过以下方式实现
        @media 设备  and (区间) and (区间)
        {
            CSS样式
        }

24.px % vh vw em rem分别代表什么

    px:像素
    %:相对于父级元素的百分比
    vh:相对于屏幕的高
    vw:相对于屏幕的宽
    em:相对于父级元素的大小
    rem:相对于根元素的字体大小

25.图片留白如何解决
    
    图片独占一行时:设置    display:block / float:left 即可
    一行多张图片时:display:flex
                float:left
                font-size:0

26.超出文本显示...


27.盒子绝对居中(自身宽高已知和自身宽高未知)

    子元素宽高已知:

    子元素宽高未知:设置position:absolute,四个位置设为0,margin为auto

    宽高未知:设置position:absolute   top:50%; left:50%;
            使用平移transform:translate(-50%,-50%)平移自身-50%的距离
        


28.满屏的品

<!DOCTYPE html>
    <html>
        <head>
            <title>满屏的品</title>
            <style>
                *    {
                        margizn:0;
                        padding:0;
                        list-style:none;
                        text-decoration:none;
                    }
                div
                    {
                        width:20vh;
                        height:20vh;
                        background-color:skyblue;
                        position:fixed;
                    }
                .d1
                    {
                        top:0;
                        transform:translateX( calc(50vw - 50%));
                        
                    }
                .d2
                    {
                        bottom:0;
                        left:0;
                    }

                .d3
                    {
                        bottom:0;
                        right:0;
                    }


            </style>
        </head>

        <body>
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </body>
    </html>

29.h5有哪些新特性


    1.语义化标签:就是使用合理,正确标签来展示内容(用正确的标签做正确事)。
                有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同标签来赋予不同权重。
                header 头部标签
                nav  导航标签
                main 主体内容
                article 内容标签
                section  块标签  类似于div 
                aside 侧边栏标签
                footer 尾部标签

        2. h5新增多媒体标签 视频 音频
                audio:音频
                    src:需使用音频地址
                    controls 控制组件
                    autoplay 自动播放
                    loop 循环播放
                video:视频 
                    src:需使用视频地址
                    controls 控制组件
                    width 视频宽
                    height 视频高
                    autoplay 自动播放
                    loop 循环播放
                    preload 是否等待加载完播放
                        auto:一边加载一边播放
                        metadata:加载完后在播放
                        none:页面加载完后不加载视频
                    poster 页面加载时等待的画面图片
                    muted 静音  
                    
        3. h5 新增 input 表单属性 :
                required 属性 : 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空 
                placeholder 属性 : 用于设置表单的提示信息
                multiple 属性 : 可以 选择多个文件提交 
                autofocus 属性 : 设置了该属性 , 可以自动进行聚焦
                autocomplete 属性 : 属性值为 off / on , 浏览器会记录之前输入的值,默认值是 on , 自动补全默认是打开的 ;使用自动补全 , 需要满足以下两                个条件 :为表单添加 name 属性,自动补全的内容需要之前提交成功过

30.css3有哪些新特性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值