题目概览
- 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- 800px) { ... } @media (min-800px) and (max-1200px) and (orientation:portrait) { ... } @media (min-800px) or (orientation:portrait) { ... } @media (not min-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 ');