每日思考（2019/12/10）

Posted 2021-03-24 ericzlin

题目概览

• 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  ');