HTML
文档结构
- 第一行标明代码解析协议
- html根标签，一个页面中有且只有一个根标签
- head标签，该标签中的内容，不会在网页中直接显示，用来帮助浏览器解析页面的
- title网页的标题标签，默认显示在浏览器的标题栏
- body标签用来设置网页的主体内容，网页中所有可见的内容，都在body中编写
定义
- 标签： 成对出现标签 ,标签可以嵌套
<div> </div>
- 空元素：
<br/>
<img/>
- 元素：标签及元素的内容，元素构成了页面
标签
元素分类
块级元素：独自占满一行，可设置宽高，padding，margin
- div
- ul
- ol
- p
- table
行内元素：从上到下，从左到右，到头换行，不可设置宽高，只可设置左右padding
- span
- a
特殊行内元素：可设置宽高 - img
- input
语义化的优点
- 更容易被搜索引擎收录
- 提高代码可读性
- 更容易让屏幕阅读器读出网页内容。
CSS
css引用方式
生效优先级： 内联样式>内部样式>引用文件
基本语法
www.w3school.com.cn/css/css_tab…
- 背景
- 边框
- 圆角
- 阴影
- 内边距/外边距
- 文字相关：样式可继承
选择器
简单选择器
-
元素选择器
-
类选择器(.)
-
ID选择器(#)
通用选择器（*）
组合选择器
- 后代选择器（a b）
- 子选择器（a>b）
- 兄弟相邻选择器（a+b）
- 通用兄弟选择器（a～b）
伪类选择器：
- :hover
- :last-style
- :first-style
- :nth-child ....
伪元素选择器：
- ::before
- ::after
盒模型
box-sizing 属性定义了 应该如何计算一个元素的总宽度和总高度
- 标准盒模型：content=width
box-sizing:content-box
- IE盒模型：content=width+border+padding
box-sizing:border-box
定位
- 静态定位：position:static
- 相对定位：position:absolute
- 绝对定位：position:relative
- 固定定位：position:fixed
