每日思考(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  ');

原文地址:https://www.cnblogs.com/EricZLin/p/12019762.html

时间: 2024-10-31 20:36:28

每日思考(2019/12/10)的相关文章

2019/12/10学习内容摘要(Linux文件和目录管理)

1.绝对路径和相对路径 *绝对路径:路径的写法一定是由根目录 / 写起的,例如 /usr/local/mysql *相对路径:路径的写法不是由根目录 / 写起的,例如 首先用户进入到 /home,然后再进入到test,执行的命令为 “#cd /home,#cd test”.此时用户所在的路径为 /home/test.第一个cd命令后紧跟/home,前面有斜杠:而第二个cd命令后紧跟test,前面没有斜杠.这个test是相对于/home目录来讲的,所以称为相对路径. 2.与目录相关命令 1. cd

2019.12.10 用户常用命令 | 用户和组

1.1用户常用命令 1.1.1命令cd cd:切换用户所在目录(cd后不可加文件名) pwd:显示当前所在目录 . :表示当前目录 .. :表示上一级目录 1.1.2命令mkdir mkdir:创建目录 -m:创建目录的权限 -p:可创建不存在的目录 1.1.3命令ls -l:除文件名称外,同时将文件或子目录的权限.使用者和大小详细列出 -d:只显示目录列表,不显示文件(通常与-l同时使用) 1.1.4命令rmdir 只能删除目录,不能删除文件 rmdir:删除空目录 1.1.4.1命令rm -

2019.12.10 二位数组

定义格式 * a 第一种定义格式: * int[][] arr = new int[3][4];// arr里面包含3个数组 每个数组里面有四个元素 * 上面的代码相当于定义了一个3*4的二维数组,即二维数组的长度为3,二维数组中的每个元素又是一个长度为4的数组 * b 第二种定义格式 * int[][] arr = new int[3][]; * 第二种方式和第一种类似,只是数组中每个元素的长度不确定 * c 第三种定义格式 * int[][] arr = {{1,2},{3,4,5,6},{

【读书笔记】2016.12.10 《构建高性能Web站点》

本文地址 分享提纲: 1. 概述 2. 知识点 3. 待整理点 4. 参考文档 1. 概述 1.1)[该书信息] <构建高性能Web站点>: -- 百度百科 -- 本书目录: 第1章 绪论 1.1 等待的真相 1.2 瓶颈在哪里 1.3 增加带宽 1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将动态内容静态化 1.9 更换Web服务器软件 1.10 页面组件分离 1.11 合理部署服务器 1.12 使用负载均衡 1.1

java每日小算法(10)

/*[程序10]  题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在 第10次落地时,共经过多少米?第10次反弹多高? */ package test; public class test { public static void main(String[] args) { // TODO Auto-generated method stub double high = 100.0; double jump = 0.0; double sum = 0.0; for(

AI行业精选日报_人工智能(12·10)

奔驰无人出租车服务美国上线 来自德国两家最大的公司:梅赛德斯-奔驰和一级汽车供应商博世(Bosch)即将在美国加州圣何塞市提供一项新的自动驾驶出租车服务.这两家公司周一宣布,其无人驾驶 S 级车辆将在西圣何塞和城市市区之间运送乘客-可以肯定的是,这不是像其他一些自动出租车试点那样的动态汽车服务.这两家公司表示,这些车辆将在前排座椅上配备安全驾驶员,以监控驾驶情况.被选中的乘客将可以访问应用程序,并通过该应用程序预订行程.梅赛德斯·奔驰和母公司戴姆勒(Daimler)过去从事过许多无人驾驶项目,范

Ubuntu 12.10 安装vim出错

在Ubuntu 12.10中安装vim时出现了如下提示: 正在读取软件包列表... 完成正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是 unstable 发行版,这也许是因为系统无法达到您要求的状态造成的.该版本中可能会有一些您需要的软件包尚未被创建或是它们已被从新到(Incoming)目录移出.下列信息可能会对解决问题有所帮助:下列软件包有未满足的依赖关系: vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2.1

解决Ubuntu 12.10中ZIP文件名乱码的方法

转摘源地址:http://blog.csdn.net/jiangxinyu/article/details/8206395 安装(12.04及以上): 代码: sudo apt-get install unar 假设需要解压的ZIP包是foo.zip 代码: lsar foo.zip #列出所有文件 如果列出的文件名已经正确 代码: unar foo.zip #解压所有文件 如果列出的文件名还不正确 代码: lsar -e GB18030 foo.zip #指定使用GB18030编码列出所有文件

[转]Running KVM and Openvswitch on Ubuntu 12.10

Running KVM and Openvswitch on Ubuntu 12.10 I've got an aging VMWare ESXi 4.0 server that needs to be replaced with something a little more modern and flexing. Obviously at home I don't need all the cool features that licensed VMWare comes with, but