每日思考(2019/12/10)

Posted ericzlin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每日思考(2019/12/10)相关的知识,希望对你有一定的参考价值。

题目概览

  • html的元素有哪些(包含H5)?
  • CSS3有哪些新增的特性?
  • 写一个方法去掉字符串中的空格

题目解答

html的元素有哪些(包含H5)?

  • 布局标签

    div 标签定义文档中的分区或节(division/section),可以把文档分割为独立的、不同的部分,主要用于布局。
    aside 标签的内容可用作文章的侧栏,html5新增标签
    header 标签定义页面的头部(介绍信息),html5新增标签
    section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,html5新增标签
    footer 标签定义文档或节的页脚,通常包含文档的作者、版权信息、使用条款链接、联系信息等等,html5新增标签
    article 标签规定文章独立的其他内容,比如:标题、内容、评论,html5新增标签
  • 文本标签、a标签、媒体标签

    h1-h6 标签可定义标题
    p 标签定义段落
    b/strong 标签加粗
    em 标签来表示强调的文本,斜体
    strong 标签表示重要文本
    u 标签下划线
    s 标签删除线
    br 标签表示回车换行
    hr 标签表示水平线
    span 标签被用来组合文档中的行内元素
    blockquote 标签表示块引用
    pre 标签可定义预格式化的文本,保持原有格式的一种标签。
    sub 标签下标,
    sup 标签上标
    a 标签定义超链接,指定页面间的跳转
    img 标签主要在网页中插入图像,可以定义图片替换文本、显示宽度和高度、是否带边框
    audio 标签定义声音,比如音乐或其他音频流
    video 标签定义视频,比如电影片段或其他视频流
  • 序列化标签、表格标签

    ul 和 li 无序列表标签
    ol 和 li 有序列表标签,可以使用type属性规定有序列表符号的类型
    dl、dt、dd 标签定义了定义列表,dl标签用于结合 dt(定义列表中的项目)和 dd(描述列表中的项目)
    table、tr、th、td 、thead、tbody 表格标签
  • 表单标签

    form 标签定义提交方式、提交地址、表单字符集以及如何对其进行编码,需要提交的表单一定要放在form标签内
    input标签用于搜集用户信息
    label标签为input元素定义标注,如果您点击label元素文本,就会触发此input控件
    textarea标签,设置文本区内的可见行数和宽度
    button标签定义一个按钮
    select标签和option标签下拉列表

CSS3有哪些新增的特性?

  • CSS3选择器

    选择器 写法 解释
    element1~element2 p~ul 选择p元素之后的每一个ul元素
    [attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素
    [attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
    [*attribute**=value] a[src*="44lan"] 选择每一个src属性的值包含子字符串"44lan"的元素
    :first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素
    :last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素
    :only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素
    :only-child p:only-child 选择每个p元素是其父级的唯一子元素
    :nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素
    :nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数
    :nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
    :nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数
    :last-child p:last-child 选择每个p元素是其父级的最后一个子级。
    :root :root 选择文档的根元素
    :empty p:empty 选择每个没有任何子级的p元素(包括文本节点)
    :target #news:target 选择当前活动的#news元素(包含该锚名称的点击的URL)
    :enabled input:enabled 选择每一个已启用的输入元素
    :disabled input:disabled 选择每一个禁用的输入元素
    :checked input:checked 选择每个选中的输入元素
    :not(selector) :not(p) 选择每个并非p元素的元素
    ::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分
    :out-of-range :out-of-range 匹配值在指定区间之外的input元素
    :in-range :in-range 匹配值在指定区间之内的input元素
    :read-write :read-write 用于匹配可读及可写的元素
    :read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素
    :optional :optional 用于匹配可选的输入元素
    :required :required 用于匹配设置了 "required" 属性的元素
    :valid :valid 用于匹配输入值为合法的元素
    :invalid :invalid 用于匹配输入值为非法的元素
  • CSS3边框(Borders)

    div{
      border:2px solid;
      border-radius:25px;/*一个用于设置所有四个边框*/
      box-shadow: 10px 10px 5px #888888;/*附加一个或多个下拉框的阴影*/
      border-image:url(border.png) 30 30 round;/*设置所有边框图像的速记属性*/
    }
  • CSS3背景

    div{
      background-image:url(img_flwr.gif),url(img_tree.gif);/*多背景*/
      background-clip:no-repeat;/*规定背景的绘制区域*/
      background-size:100% 100%;/*规定背景图片的尺寸*/
      background-origin:content-box;/*规定背景图片的定位区域*/
    }
  • CSS3 渐变

    /*线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向*/
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
    /*径向渐变(Radial Gradients)- 由它们的中心定义*/
    background: radial-gradient(center, shape size, start-color, ..., last-color);
  • CSS3文本效果

    属性 描述
    hanging-punctuation 规定标点字符是否位于线框之外。
    punctuation-trim 规定是否对标点字符进行修剪。
    text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
    text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
    text-outline 规定文本的轮廓。
    text-overflow 规定当文本溢出包含元素时发生的事情。
    text-shadow] 向文本添加阴影。
    text-wrap] 规定文本的换行规则。
    word-break 规定非中日韩文本的换行规则。
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
  • CSS3 字体

    @font-face{
      font-family: myFirstFont;
      src: url(sansation_light.woff);
    }
    div{
      font-family:myFirstFont;
    }
  • CSS3 转换和变形

    • 2D新转换属性

      属性 描述
      transform 适用于2D或3D转换的元素
      transform-origin 允许您更改转化元素位置
    • 2D 转换方法

      属性 描述
      matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
      translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
      translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
      translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
      scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
      scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
      scaleY(n) 定义 2D 缩放转换,改变元素的高度。
      rotate(angle) 定义 2D 旋转,在参数中规定角度。
      skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
      skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
      skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
    • 3D转换属性

      属性 描述
      transform 向元素应用 2D 或 3D 转换。
      transform-origin 允许你改变被转换元素的位置。
      transform-style 规定被嵌套元素如何在 3D 空间中显示。
      perspective 规定 3D 元素的透视效果。
      perspective-origin 规定 3D 元素的底部位置。
      backface-visibility 定义元素在不面对屏幕时是否可见。
    • 3D 转换方法

      描述
      matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
      translate3d(x,y,z) 定义 3D 转化。
      translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
      translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
      translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
      scale3d(x,y,z) 定义 3D 缩放转换。
      scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
      scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
      scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
      rotate3d(x,y,z,angle) 定义 3D 旋转。
      rotateX(angle) 定义沿 X 轴的 3D 旋转。
      rotateY(angle) 定义沿 Y 轴的 3D 旋转。
      rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
      perspective(n) 定义 3D 转换元素的透视视图。
  • CSS3 过渡

    div{
      transition-property: width;/*规定应用过渡的 CSS 属性的名称。*/
      transition-duration: 1s;/*定义过渡效果花费的时间。默认是 0。*/
      transition-timing-function: linear;/*规定过渡效果的时间曲线。默认是 "ease"。*/
      transition-delay: 2s;/*规定过渡效果何时开始。默认是 0。*/
        transition:width 1s linear 2s;/*简写属性,用于在一个属性中设置四个过渡属性*/
    }
  • CSS3 动画

    @keyframes myfirst{
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
    }
    div{
      animation-name: myfirst;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-play-state: running;
    }
  • CSS3多列

    属性 描述
    column-count 指定元素应该被分割的列数。
    column-fill 指定如何填充列
    column-gap 指定列与列之间的间隙
    column-rule 所有 column-rule-* 属性的简写
    column-rule-color 指定两列间边框的颜色
    column-rule-style 指定两列间边框的样式
    column-rule-width 指定两列间边框的厚度
    column-span 指定元素要跨越多少列
    column-width 指定列的宽度
    columns
  • CSS3 盒模型

    div{
        /*指定一个元素是否应该由用户去调整大小*/
        resize:none | both | horizontal | vertical | inherit
        /*允许您以确切的方式定义适应某个区域的具体内容*/
      box-sizing: content-box | border-box | inherit
        /*属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓*/
      outline:outline-color outline-style outline-width outine-offset
    }
  • CSS3伸缩布局盒模型(弹性盒)

    属性 描述
    display 指定 HTML 元素盒子类型。
    flex-direction 指定了弹性容器中子元素的排列方式
    justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
    align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
    flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
    align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
    flex-flow flex-direction 和 flex-wrap 的简写
    order 设置弹性盒子的子元素排列顺序。
    align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
    flex 设置弹性盒子的子元素如何分配空间。
  • CSS3多媒体查询

    <link rel="stylesheet" type="text/css" href="site.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <style>
      @media all and (min-width: 800px) { ... }
        @media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
        @media (min-width:800px) or (orientation:portrait) { ... }
        @media (not min-width:800px) { ... }
    </style>

写一个方法去掉字符串中的空格

//方式一:可指定去除空格的位置类型
function trimStr(str, type) {
    const regObj = {
        left: /^s+/,
        middle: /(^s+)(S)|s+(S)/g,
        right: /s+$/,
        both: /(^s+)|(s+$)/g,
        all: /s+/g
    };
    const reg = type && regObj[type] ? regObj[type] : regObj.both;
    const replaceStr = type === 'middle' ? (m, $1, $2, $3) => $1 ? m : $3 : '';
    return str.replace(reg, replaceStr);
}
trimStr('  aa bb  cc d d ee  ', 'middle')
//方式二:一次性去除所有空格
function trim(str) {
    return str.split(' ').join('');
}
trim('  aa bb  cc d d ee  ');

以上是关于每日思考(2019/12/10)的主要内容,如果未能解决你的问题,请参考以下文章

一个类型思考了 8 年,依旧是最好的! | 每日趣闻

每日思考(2019/12/9)

每日思考(2019/12/29)

源哥每日一题第十五弹 poj 1190 关于深搜减枝以及对于阅读代码的思考

markdown 每日片段

每日思考记录(11)