Html Css 学习小结
- html结构
- doctype
为了说明文档使用的HTML标准，所有HTML文档应该以“文件类型声明”（<!DOCTYPE>）开头，引用一个文件类型描述。举例来说：
-
html5
<!DOCTYPE HTML> -
HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
-
- head
- doctype
为了说明文档使用的HTML标准，所有HTML文档应该以“文件类型声明”（<!DOCTYPE>）开头，引用一个文件类型描述。举例来说：
- div布局
- 布局原则 从上到下，从左到右，从外到里
- 盒模型 margin(布局用)、padding、border
- 浮动布局
浮动概念，浮动清除
clear:both|left|right
- css效果
- 引入方式
- 作者样式
-
作者可以在他的HTML文件中确定一个外来的、独立的CSS文件（外部样式表），其优先级最低
<head> <link href="/css/css.css" rel="stylesheet" type="text/css"/> </head> -
作者可以将CSS信息包含在HTML文件内（内部样式表）
<head> <style type="text/css"> </styel> </head> -
作者可以在一个HTML指令内结合CSS指令（内联样式），其优先级最高。一般这样做是为了在特殊情况下，把上面来源的CSS抵消掉
<p style="width:100px;height:200px;">test</p>
-
- 自定样式 读者可以在他的浏览器内设立一个CSS文件。这个CSS文件可以用在所有的HTML文件上。假如作者的CSS文件与读者的相冲突，那么读者可以选择一个
- 浏览器样式 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式
- 作者样式
- 控制效果
- 选择符
- 元素选择符
- 通配符 * 选定所有对象，一般不采用，因为会降低网页加载性能。
- 类型 E
类型选择符(Type Selector)：html中的标签，比如
p、div、span、h1 - Id E#myid 以唯一标识符id属性等于myid的E对象作为选择符。
- Class E.myclass 以class属性包含myclass的E对象作为选择符。不同于ID选择符的唯一性，类选择器可以同时定义多个。
- 关系选择符
- 包含选择符(E F)
选择所有被E元素包含的F元素。 与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子… - 子选择符(E>F) 选择所有作为E元素的子元素F。 与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。
- 相邻选择符(E+F) 选择紧贴在E元素之后F元素。 与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。
- 兄弟选择符(E~F) 选择E元素后面的所有兄弟元素F。 与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素
- 包含选择符(E F)
- 属性选择符
- E[att] 选择具有att属性的E元素。
- E[att=”val”] 选择具有att属性且属性值等于val的E元素。
- E[att~=”val”] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
- E[att^=”val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
- E[att$=”val”] 选择具有att属性且属性值为以val结尾的字符串的E元素。
- E[att*=”val”] 选择具有att属性且属性值为包含val的字符串的E元素。
- E[att|=”val”] 选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素。
- 元素选择符
- css初始化
- 引入方式
- html标签
- 按语义分类
- 无语义标签 div，块状元素，布局分块；span，内联元素
- 有语义标签 h1-6、p、img、embed、a、ul、ol、table
- 按块状分类
- 块状元素 div、p、a
- 内联元素 非块状元素（span等）
- 按语义分类