欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端基础知识点

程序员文章站 2024-03-17 11:15:28
...
  • html
  1. 声明 !DOCTYPE html

    作用:它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
    用法:位于文档中的最前面的位置
  2. HTML中有110个标签分为13类

    基础标签、格式标签、表单标签、框架标签、图像、音频 | 视频、链接、列表、表格、样式/节、元信息、程序、main       
    
  3. 元素类型
    1. 块元素 (block)

    特点: a.块级元素会新起一行。一般块级元素可以包含行内元素和其他块级元素。
    b. 宽度缺省是它父级元素的100%,除非设定一个宽度
    c. 高度、行高、外边距、内边距都可以设置
    常见元素: address – 地址
    blockquote – 块引用
    center – 举中对齐块
    dir – 目录列表
    div – 常用块级容易,也是CSS layout的主要标签
    dl – 定义列表
    fieldset – form控制组
    form – 交互表单
    h1 – 大标题
    h2 – 副标题
    h3 – 3级标题
    h4 – 4级标题
    h5 – 5级标题
    h6 – 6级标题
    hr – 水平分隔线
    menu – 菜单列表
    noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
    noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
    ol – 有序表单
    p – 段落
    pre – 格式化文本
    table – 表格
    ul – 无序列表
    1. 行内块元素 (inline-block)

      特点:a.元素排列在一行
      b.宽度默认由内容决定
      c.元素间默认有间距
      d.支持宽高、外边距、内边距的所有样式的设置

    3.行内元素 (inline)

    特点:a.都在一行上,遇到父级元素边界会自动换行
    b.高、行高以及内外边距都不可以改变
    c.宽度与内容一样宽,且不可改变
    d.行内元素只能容纳文本或者其他行内元素
    e.对于行内元素,需要注意的是:设置宽度width无效,设置高度无效,可以通过设置line-height来设置,设置margin只有左右有效,上下无效,设置padding只有左右有效,上下无效
    常见元素:
    a – 锚点
    abbr – 缩写
    acronym – 首字
    b – 粗体(不推荐)
    bdo – bidi override
    big – 大字体
    br – 换行
    cite – 引用
    code – 计算机代码(在引用源码的时候需要)
    dfn – 定义字段
    em – 强调
    font – 字体设定(不推荐)
    i – 斜体
    img – 图片
    input – 输入框
    kbd – 定义键盘文本
    label – 表格标签
    q – 短引用
    s – 中划线(不推荐)
    samp – 定义范例计算机代码
    select – 项目选择
    small – 小字体文本
    span – 常用内联容器,定义文本内区块
    strike – 中划线
    strong – 粗体强调
    sub – 下标
    sup – 上标
    textarea – 多行文本输入框
    tt – 电传文本
    u – 下划线

    行内元素的间距问题:

    两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?
    1.重设字体
    将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。
    2.借助HTML注释
    在两个行内元素之间加入HTML注释,告诉浏览器这中间不是换行也不是空格,而是连接在一起的,这样也可以解决。
  • css

    1. 兼容性
      1. 权重层级

        a. 较长的 css selector 权重会大于较短的 css selector
        b. id selector 权重高于 class selector.
        c. 行内样式>id>class>elements
        d. 总是先考虑使用权重更高的 css 选择器, 而不是使用 !important
        **只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用 !important**
        **永远不要 在你写一个第三方插件时使用 !important**
        **永远不要在全站范围使用 !important
      2. ie兼容的参考网站

        a. https://www.cnblogs.com/xiaoyueyue165/p/6925148.html
        b. 媒体查询 选择器前缀写法
        兼容 ie8/9/ 10 @media screen\0{}
        兼容 ie9/10 @media screen and (min-width:0\0) {}
        兼容 ie8 @media \0screen{}
        兼容 ie7及ie6 @media screen\9{}
        兼容IE6/7/8 @media \0screen\,screen\9{}
        兼容ie10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
        c. CSS 属性前缀
        兼容ie6 _color:red;
        兼容ie7及以下 *color:red;
        兼容ie6/7 +color:red;
        兼容ie6-10 color:red\9;
        兼容ie8-10 color:red\0;
        兼容 ie9/10 color:red\9\0;
      3. 关于ie9 不兼容 input 属性placeholder

        思路:
        1.将span标签覆盖在input上;
        2.input 获取焦点隐藏span 失去焦点时存在值掩藏span 为空显示span;
        3.点击span标签时 input聚焦
        html:
        <!--[if lte IE 9]>
        <span class="span1">请输入受理编号</span>
        <![endif]-->
        <input type="text" class="hd_acceptnumber" value=""
        placeholder="请输入受理编号" onfocus="$('.span1').hide()" onblur="if($(this).val()!=''){$('.span1').hide()}else{$('.span1').show()}""/>
        js:
        $(".span1").on("click",function(){
        $(".hd_acceptnumber").focus();
        });
      4. 轮播图兼容

        注意点:
        1.Ie8 支持 swiper2.0版本 https://2.swiper.com.cn/
        2.Ie7 支持 jq swiper2.0
        兼容ie8以及ie7需要swiper 统一使用swiper2.0;下载测试包引入js\css
      5. Echart兼容

      6. 注意点:
        1.Ie8 不支持 rgba(0, 0, 0, 0.6)
        解决:filter 格式:progid:含义为区分,gradient渐变颜色
        progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) (alpha RR GG BB)
        2. Ie6-ie8 兼容
        解决:opacity:0.5;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        参考网址:https://segmentfault.com/a/1190000002433305
        3.垂直水平居中
        兼容:
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE9及以上支持 */
        注意点:
        1.Ie8 ie7兼容@media
        position: absolute;
        left: 50%;
        top: 50%;
        height: 600px;
        max-width: 1000px;
        margin-top: -300px; /* 高度的一半 */
        margin-left: -500px; /* 宽度的一半 */
      7. js兼容

        ie11-- ie9 document.querySelector()
        Ie7 -- ie8 document.getElementById()
        <!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注
        <!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注释
    <!DOCTYPE html> 是 HTML5 中唯一的 doctype,也被视作将网页 "升级" 到 HTML5 的第一步。
    很多国外网站的 <!DOCTYPE html> 和 <HEAD> 之间都会有一段注释,如:
    <!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
    <!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
    <!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
    <!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
    <!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
    改代码作用于 css,来写一些针对 IE 各版本的样式差异。
    先判断用户用的哪个 IE 版本,然后在标签上加上该版本的 class,这样可以方便 hack。
    css 文件是这样写的:
    .ie6 xxx {};
    .ie7 xxx {};
    这是目前最好的 hack 方式之一。 (这种写法在 菜鸟教程中被提及感兴趣可以去看看:https://www.runoob.com/tags/tag-doctype.html)

上一篇: Python笔记——文件读写

下一篇: