Html
语义化的理解
- 用正确的标签做正确的事情,让页面的内容结构化,便于对浏览器、搜索引擎解析
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO(搜索引擎优化)
- 便于阅读维护理解
html
不是用来显示样式的,默认样式是在没有CSS情况下也以一种文档格式显示,并且是容易阅读的
文档类型
- <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
- DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
- HTML5的Doctype是<!DOCTYPE html>,现在的浏览器都支持这个写法,不需要再像HTML4一样区分三种Doctype(严格、松散、框架)模式了。因为HTML4基于SGML(标准通用标记语言),所以需要对DTD(文档类型定义:是一套关于标记符的语法规则)进行引用,才能告知浏览器文档所使用的文档类型。HTML 5 不基于 SGML,也不需要引用 DTD,但是需要声明文档类型让浏览器按照它们应该的方式来运行。
CSS
选择器其实就是一套规定了选择页面上元素的规则
选择器(伪类/伪元素)详情见:https://segmentfault.com/a/1190000013737796
选择器 | 含义 | 作用 | css |
---|---|---|---|
.class | 类选择器 | 匹配 class 包含(不是等于)特定类的元素 | 1 |
#id | id选择器 | 匹配特定 id 的元素 | 1 |
* | 通用元素选择器 | 匹配页面任何元素(这也就决定了我们很少使用) | 2 |
element | 元素选择器 | 选择HTML元素 | 1 |
选择器 | 含义 | 作用 | css |
---|---|---|---|
E,F | 多元素选择器 | 同时匹配元素E或元素F | 1 |
E F | 后代选择器 | 匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F | 1 |
E>F | 子元素选择器 | 匹配E元素的所有直接子元素 | 2 |
E+F | 直接相邻选择器 | 匹配E元素之后的相邻的同级元素F | 2 |
E~F | 普通相邻选择器(弟弟选择器) | 匹配E元素之后的同级元素F(无论直接相邻与否) | 3 |
选择器 | 示例 | 示例说明 | css |
---|---|---|---|
[attribute] | [target] | 选择所有带有target属性元素 | 2 |
[attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
[attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
[attribute ^= language] | [lang ^= en] | 选择一个lang属性的起始值="EN"的所有元素 | 2 |
[attribute $= language] | [lang $= en] | 选择一个lang属性的结尾值="EN"的所有元素 | 2 |
[attribute *= language] | [lang *= en] | 选择一个lang属性的包含"EN"的所有元素 | 2 |
选择器 | 示例 | 示例说明 | css |
---|---|---|---|
:link | a:link | 选择所有未访问链接 | 1 |
:visited | a:visited | 选择所有访问过的链接 | 1 |
:hover | a:hover | 把鼠标放在链接上的状态 | 1 |
:active | a:active | 选择正在活动的链接 | 1 |
:focus | input:focus | 选择元素输入后具有焦点 | 2 |
选择器 | 含义 | 作用 | css |
---|---|---|---|
::before/:before | 在被选元素前插入内容 | 需要使用content属性指定插入的内容。被插入的内容,实际上不在文档树中 | 2 |
::after/:after | 在被选元素后插入内容 | 其用法和特性与:before相似。 | 2 |
::first-letter/:first-letter | 匹配元素中文本的首字母 | 被修饰的首字母不在文档树中。 | 1 |
::first-line/:first-line | 匹配元素中第一行的文本 | 这个伪元素只能在块元素中,不能用在内联元素中 | 1 |
css三大特性
定义 | |
---|---|
层叠性 | 简单来说,当多个选择器选中同一个元素,并且设置了相同的属性时,CSS解决这种冲突的能力就叫做CSS的层叠性。 |
继承性 | 子元素具备父级元素的样式 |
优先级 | 优先级是决定CSS如何层叠的一套规则 |
层叠性:
- 简单来说,当多个选择器选中同一个元素,并且设置了相同的属性时,CSS解决这种冲突的能力就叫做CSS的层叠性。
- 层叠性的概念需要和继承性,优先级一起理解。
- 层叠性,继承性和优先级是CSS的三大特性,它们一起决定着如何解决CSS的冲突。
继承性:
-
不是所有的属性都可以被继承,只有
color
和以font-
/text-
/line-
开头的属性才可以继承 -
在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
-
a
标签不能继承来自父元素的颜色和取消下划线属性 -
h
标签不能继承来自父元素的的字体大小和加粗属性,但是由于h
标签默认的字体大小用的是em
单位,所以字体的大小会随着父级元素大小的改变而改变 -
一般情况下可以通过给
body
元素设置一些通用的样式来保持页面风格的统一
优先级:
间接选中(通过继承选中)
优先级根据就近原则,离被选中的元素越近优先级越高
直接选中(通过选择器选中)
单一选择器直接选中
当多个单一选择器同时选中同一个元素,并且设置相同样式时,选择器越精确优先级越高,选择器的精确度从高到底依次是:
ID选择器->
类选择器->
标签选择器->
通用选择器->
继承间接选中->
浏览器默认的样式
混合选择器直接选中
当多个混合选择器同时选中同一个元素,并且设置相同样式时,越精确的选择器越多优先级越高:
-
谁的ID选择器多,就听谁的
-
如果ID选择器个数相同,看类选器,谁的类选择器多听谁的
-
如果ID选择器和类选择器一样多,看标签选择器,谁的标签选择器多听谁的
-
如果ID选择器,类选择器和标签选择器一样多的情况下,就不继续往下找了,谁的样式写在后面听谁(就近原则)
提高优先级
我们可以通过关键字!important
来提高优先级
说明
-
!important
必须写在需要改变优先级属性的分号;
前面 -
!
不能省略 -
!important
只能提高某个属性的优先级,不能提高该选择器中其他属性的优先级 -
由于
!important
会改变选择器的优先规则,所以在实际项目中谨慎使用
布局
详情见:教程/css/布局
网页布局就是对网页中各个元素进行排版
定义 | 说明 | |
---|---|---|
标准流布局 | 浏览器默认的排版方式,是将窗口自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。 |
|
浮动流布局 | 浮动流主要是用来水平排版的 float:left/right |
父元素的 |
定位流布局 | 相对定位:position: relative 绝对定位:position: absolute 固定定位:position: fixed | 相对定位:相对于自己在标准流当中的位置发生的移动 绝对定位:相对于父元素发生位置的移动 固定定位:参照 |
弹性布局 | 块:display: flex 行:display: inline-flex | 弹性布局主要是通过给父元素添加display:flex 属性来控制子元素的布局。 |
盒模型
详情见:教程/css/盒模型
css3
详情见:教程/css/css3
移动端适配
详情见:教程/css/移动端方案
js基础
数据类型的分类和转换
在JS中,大的方面把数据分为基本数据类型(原始类型)和引用数据类型(复杂类型)
类型 | 名称 | 说明 |
---|---|---|
Undefined | 未定义 | 1.未定义类型只有一个值undefined ,这个值的意思是变量没有定义2.未定义有两种情况,一个是真的没有定义,一个是定义了但是没有赋值 |
Null | 空对象 | 空对象类型只有一个值null ,代表一个空对象指针 |
Number | 数字类型 | 用来表示数字,数字包括整数和小数(也叫浮点数或者双精度数) |
String | 字符串类型 | 用单引号或者双引号括起来的字符序列,单引号和双引号表示的字符串完全一样,一般推荐用单引号 |
Boolean | 布尔类型 | 1.布尔型也被称为逻辑值类型或者真假值类型 2.布尔型只能够取真( true )和假(false )两种数值3.所有类型的值都可以表示布尔值,其中真有 true ,非零数字,非空字符,非空对象,假有false ,数字零,空字符,null ,undefined ,NaN |
特点:
-
基本类型访问的变量的实际值
-
基本类型不能动态的添加属性
-
基本类型变量复制时会新建一个变量并分配空间,将变量的值分配在新的空间上
-
Undefined
和Null
是一种数据类型,而undefined
和null
是值,是一个字面量
引用类型
Object 对象类型 |
|
特点:
-
引用类型主要指保存在内存中的对象,包括对象,数组,函数
-
引用类型访问的是引用,引用是指向内存的一个指针
-
引用类型可以动态的添加属性
-
引用类型复制时不会新建空间,只是复制了一个新的引用
typeof使用总结:
-
对于基本数据类型来说,除了
null
都可以显示正确的类型 -
对于对象来说,除了函数都会显示
object
数据类型转换
1.parseInt()
和 parseFloat()函数
parseInt
用来转换整数,parseFloat
可以转换整数和小数
忽略字符串前面的空格
如果第一个字符不是数字或者负号加数字,会返回NaN
(Not a Number)
从左到右解析直到第一个非数字为止
2.Number()
函数
如果是纯数字的字符串,则直接将其转换为数字
如果字符串中有非数字的内容,则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
true
转成 1
, false
转成 0
null
转成0
undefined
转成NaN