01

1-     HTML 新增那些标签？

h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏bai览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。

- h5新增的标签

新增元素

说明

video    表示一段视频并提供播放的用户界面    

audio    表示音频    

canvas    表示位图区域    

source    为video和audio提供数据源    

track    为video和audio指定字母    

svg    定义矢量图    

code    代码段    

figure    和文档有关的图例    

figcaption    图例的说明    

main    

time    日期和时间值    

mark    高亮的引用文字    

datalist    提供给其他控件的预定义选项    

keygen    秘钥对生成器控件    

• output    计算值    

progress    进度条    

menu    菜单    

embed    嵌入的外部资源    

menuitem    用户可点击的菜单项    

menu    菜单    

template    

section    

nav    

aside    

article    

footer    

header    

- css3

css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框

border-radius、box-shadow、border-image、

background-size：规定背景图片的尺寸

background-origin：规定背景图片的定位区域

background-clip：规定背景的绘制区域

 

文本效果（常用）

text-shadow：设置文字阴影

word-wrap：强制换行

word-break

css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

 

2/3D转换

transform：向元素应用2/3D转换

transition：过渡

 

动画

 

@keyframes规则：

animation、animation-name、animation-duration等

 

用户界面（常用）

box-sizing、resize

css3新增伪类

：nth-child()

：nth-last-child()

：only-child

：last-child

：nth-of-type()

：only-of-type()

：empty

：target  这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。

：enabled  

：disabled

：checked

：not

2-     H5 新增的布局标签有哪些？

       <header></header>页面/区域头部

       <footer></footer>页面/区域底部

       <nav></nav> 导航

       <section></section> 文档中的章节，区段，板块等（类似div，但主要针对文档区域）

       <aside></aside> 侧边栏

       <article></article> 文章/文档

3-     行内元素和块级元素的区别？

一，行内元素与块级元素的区别：

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

    行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

    块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

二、行内元素和块级元素转换

        display:block; (字面意思表现形式设为块级元素)

       display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。

HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

4-     列举行内元素和块级元素的标签？（5 个）

块级元素列表
<address>	定义地址
<caption>	定义表格标题
<dd>	定义列表中定义条目
<div>	定义文档中的分区或节
<dl>	定义列表
<dt>	定义列表中的项目
<fieldset>	定义一个框架集
<form>	创建 HTML 表单
<h1>	定义最大的标题
<h2>	定义副标题
<h3>	定义标题
<h4>	定义标题
<h5>	定义标题
<h6>	定义最小的标题
<hr>	创建一条水平线
<legend>	元素为 fieldset 元素定义标题
<li>	标签定义列表项目
<noframes>	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>	定义在脚本未被执行时的替代内容
<ol>	定义有序列表
<ul>	定义无序列表
<p>	标签定义段落
<pre>	定义预格式化的文本
<table>	标签定义 HTML 表格
<tbody>	标签表格主体（正文）
<td>	表格中的标准单元格
<tfoot>	定义表格的页脚（脚注或表注）
<th>	定义表头单元格
<thead>	标签定义表格的表头
<tr>	定义表格中的行
行内元素列表
<a>	标签可定义锚
<abbr>	表示一个缩写形式
<acronym>	定义只取首字母缩写
<b>	字体加粗
<bdo>	可覆盖默认的文本方向
<big>	大号字体加粗
<br>	换行
<cite>	引用进行定义
<code>	定义计算机代码文本
<dfn>	定义一个定义项目
<em>	定义为强调的内容
<i>	斜体文本效果
<img>	向网页中嵌入一幅图像
<input>	输入框
<kbd>	定义键盘文本
<label>	标签为 input 元素定义标注（标记）
<q>	定义短的引用
<samp>	定义样本文本
<select>	创建单选或多选菜单
<small>	呈现小号字体效果
<span>	组合文档中的行内元素
<strong>	语气更强的强调的内容
<sub>	定义下标文本
<sup>	定义上标文本
<textarea>	多行的文本输入控件
<tt>	打字机或者等宽的文本效果
<var>	定义变量

5-     行内元素的 margin 和 padding 可以设置吗？

不能设置宽高，只能设置左右的padding和margin。

6-     readonly 和 disabled 的区别

disabled属性可以作用于所有的表单元素。

readonly属性只对<input type="text">、<input type="number">、<textarea>和<input type="password">等可以输入的表单元素有效。

disabled属性阻止对元素的一切操作，例如获取焦点，点击事件等等。

readonly属性只是将元素设置为只读，其他操作正常。

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

7-     哪些标签存在伪元素？

大部分容器标签(大部分双标签)都有伪元素 iframe没有伪元素

大部分单标签都没有伪元素,但是img有伪元素

8-为元素可以使用 js 来操作吗？为什么？

原则上js是不可以操纵伪元素的
但是可以通过window.getComputedStyle() 方法，获取伪元素的CSS样式声明对象,然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。事实上，伪元素可以被浏览器渲染，但本身并不是DOM元素。它不存在于文档中，所以JS无法直接操作它。而jQuery的选择器都是基于DOM元素的，因此也并不能直接操作伪元素。