HTML标签分类
- 块状元素
div p h1-h6 ol ul dl table address等 - 内联元素
a span i em strong label - 内联块元素
img input
DHTML优点
input 标签 disabled属性和readonly属性区别
- 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是- 当提交表单时,这个表单输入项将不会被提交。
- readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。
input标签的type属性有哪些
HTML5 input标签新增type属性
- color:用于指定颜色的控件。
- date:用于输入日期的控件(年,月,日,不包括时间)。
- month:用于输入年月的控件,不带时区。
- week:用于输入一个由星期-年组成的日期,日期不包括时区
- time:用于输入不含时区的时间控件。
- datetime:基于UTC时区的日期时间输入控件(时,分,秒及几分之一秒)。
- datetime-local:用于输入日期时间控件,不包含时区。
- email:用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。
- number: 用于应该包含数值的输入域。只能输入数字
- range:用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
- search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
- tel:用于输入电话号码的控件。在移动端输入会显示数字键盘,PC端无效果
- url:用于编辑URL的字段。
HTML5手册语义化标签
| | | | |
---|
article | section | aside | hgroup | mark |
header | footer | nav | time | menu |
figure | figcaption | contextmenu | | |
CSS3新增特性
| | | | |
---|
过渡 transition | 动画animation | 形状转换 transform | 选择器 | 阴影 box-shadow |
边框border-image | 背景 background-clip | 反射 -webkit-box-reflect | 文字换行 word-break | 颜色透明度 rgba |
渐变 | 滤镜filter | 弹性布局 flexbox | 多列布局 | 盒模型 box-sizing |
栅格布局 grid | 媒体查询 | border-radius | 颜色及透明度 hsl hsla | opacity |
CSS3新增选择器
参考自 https://blog.csdn.net/weixin_42568381/article/details/81738566
- 属性选择器
input[type="text"]{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
- 结构性伪类选择器 :root 根选择器 :root{} 等同于 html {}
- 结构性伪类选择器—not
input:not([type="submit"]){
border:1px solid red;
}
- 结构性伪类选择器—empty
p:empty {
display: none;
}
用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
- 结构性伪类选择器—target
:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。 - 结构性伪类选择器—first-child
- 结构性伪类选择器—last-child
- 结构性伪类选择器—nth-child(n)
- only-child选择器
:only-child选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。 - :enabled和:disabled选择器
- :checked选择器
- ::selection选择器
::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。 - :read-only和read-write选择器
:read-only伪类选择器用来指定处于只读状态元素的样式。
:read-write选择器刚好与:read-only选择器相反,主要用来指定当元素处于非只读状态时的样式。 - ::before和::after
特殊标签
<sup>上标文本</sup>
<sub>下标文本</sub>
<mark>突出显示</mark>
HTML5 新引入特性
| | | | |
---|
语义标签 | 增强型表单 | 音频视频 | canvas绘图 | SVG |
地理定位 getCurrentPosition | 拖放API | WebWorker | WebStorage | WebSocket |
HTML5 新增表单元素
| | | | |
---|
autocompelete | autofocus | form | formaction | formenctype |
frommethod | formnovalidate | formtarget | height | list |
max | min | multiple | pattern | placeholder |
required | step | width | | |
HTML中的空元素
| | | | |
---|
area | base | br | col | colgroup |
command | img | input | keygen | link |
meta | param | source | track | wbr |
定位
- relative 相对定位,相对于其正常位置进行定位,原本所占空间仍然保留
- absolute 绝对定位,相对于static外的第一个父元素进行定位
- fixed 固定定位, 相对于浏览器窗口进行定位
- static 默认值,无定位,元素出现在正常流中
- inherit 继承父元素position值
media-queries 条件
触发BFC
- float值不为 none
- position 不为staic或者relative
- display值为inline-block、table-cell、flex、table-caption或者inline-flex
- overflow值不为visible
css可继承属性
- 所有元素可继承:
visibility cursor - 内联元素可继承:
letter-spacing 、 word-spacing 、white-space 、 line-height 、 color 、 font 、font-family、 font-size、 font-style 、font-weight 、text-decoration 、 text-transform 、 direction - 终端块元素可继承:
text-indent 、text-align - 列表元素可继承:
list-style-position、list-style、list-style-type、list-style-image
WEB程序对象作用域
导致回流发生的因素
回流必然引发重绘,重绘不一定会引发回流
- 调整窗口大小,浏览器窗口尺寸改变。
- 元素尺寸改变 —— 边距、填充、边框、高度和宽度、字体大小
- 页面渲染初始化
- 样式表变动
- 元素内容变化,尤其是输入控件
- 元素位置改变
- css伪类激活
- DOM操作,添加或删除可见的dom元素
- offsetWidth、width、clientWidth、scrollTop、scrollHeight的计算、
@import和link的区别
- 从属关系区别 @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
- 加载顺序区别 加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
- 兼容性区别 @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
- DOM可控性区别 可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
- 权重区别 link引入的样式权重大于@import引入的样式。
什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
- SVG是HTML下的一个分支
JSON和XML数据格式比较
- JSON相对于XML来讲,数据的体积小,传递的速度更快些
- JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互
- JSON的速度要远远快于XML
- JSON对数据的描述性不如XML
JS数据类型
- 基本数据类型:Number,String,Boolean,Undefined,Null,Symbol(es6新增)
- 复杂数据类型:Object,Array,Function,RegExp,Date,Error
- 全局数据类型:Math
- 内置类型:Null,Undefined,Boolean,Number,String,Object,Symbol
- 原始类型:Null,Undefined,Boolean,Number,String,Symbol
JS中支持冒泡的事件有哪些
不能冒泡的
| | | |
---|
abort | resize | error | load |
mouseenter | mouseleave | blur | focus |
支持冒泡的
| | | | |
---|
beforeinput | click | compositionstart | compositionend | compositionupdate |
dbclick | focusin | focusout | keydown | select |
keyup | mousedown | mousemove | mouseout | mouseover |
mouseup | scroll | wheel | | |
Ajax与Flash的优缺点
- Ajax的优势在意在于开放性,易用性及易于开发
- Flash的优势在于多媒体处理,可以更容易的调用浏览器以外的外部资源
- Ajax最主要的缺点就是它可能破坏浏览器的后退功能
- flash 文件经常会很大,用户第一次使用的时候需要忍耐较长的等待时间
typeof返回值
- typeof Symbol() //“symbol”
- typeof Number() //“number”
- typeof String() //“string”
- typeof Function() //“function”
- typeof Object() //“object”
- typeof Boolean() //“boolean”
- typeof null //“object”
- typeof undefined //“undefined”
不支持冒泡的事件
- ①focus
- ②blur
- ③mouseenter
- ④mouseleave
- ⑤load
- ⑥unload
- ⑦resize