HTML

 

　　网页的具体内容和结构

 

　　CSS

 

　　网页的样式（美化网页最重要的一块）

 

　　JavaScript

 

　　网页的交互效果，比如对用户鼠标事件作出响应

 

　　什么是HTML

 

　　HTML的全称是HyperTextMarkupLanguage，超文本标记语言

 

　　其实它就是文本，由浏览器负责将它解析成具体的网页内容

 

　　比如，浏览器会将下面的HTML代码

 

　　转化为

 

　　知乎

 

　　黑马

 

　　CSDN

 

　　的网页内容

 

　　HTML的组成

 

　　跟XML类似，HTML由N个标签（节点、元素、标记）组成

 

　　HTML语法非常松散

 

　　常见的HTML标签

 

　　标题：h1,h2,h3,h4,h5…段落：p换行：br容器：div,span（用来容纳其他标签）表格：table,tr,td列表：ul,ol,li图片：img表单：input链接：a

 

　　推荐开发工具（网络三剑客）dreamweawer、flash、fireworks；WebStorm.

 

　　什么是CSS

 

　　CSS的全称是Cascading Style Sheets,层叠样式表

 

　　它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

 

　　CSS的编写格式是键值对形式的，比如

 

　　color : red

 

　　background-color : blue

 

　　font-size : 20px

 

　　冒号左边的是属性名，冒号右边的是属性值

 

　　行内样式：（内联样式）直接在标签的style属性中书写

 

　　内页样式：在本网页的style标签中书写

 

　　外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

 

　　test.css

 

　　test.html

 

　　选择器的作用

 

　　选择对应的标签，为之添加样式

 

　　标签选择器 根据标签名找到标签

 

　　类选择器 标签可以有多个类

 

　　id选择器 id是唯一的，不能一样

 

　　选择器组合 中间不留空格，粘在一起

 

　　后代选择器 中间一个空格，不管嵌套多少层

 

　　相邻兄弟选择器

 

　　属性选择器

 

　　伪类

 

　　属性描述：active向被激活的元素添加样式：focus向拥有键盘输入焦点的元素添加样式：hover当鼠标悬浮在元素上方时，向元素添加样式：link向未被访问的链接添加样式：visited向已被访问的链接添加样式：first-child向元素的第一个子元素添加样式：lang向带有指定lang属性的元素添加样式：first-letter向文本的第一个字母添加特殊样式：first-line向文本的首行添加特殊样式：before在元素之前添加内容after在元素之后添加内容

 

　　选择器优先级

 

　　针对性越强，优先级越高

 

　　选择器的权值

 

　　通配选择符（*）：0

 

　　标签：1

 

　　类：10

 

　　属性：10

 

　　伪类：10

 

　　伪元素：1

 

　　id：100

 

　　important：1000

 

　　原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

 

　　important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承

 

　　HTML有N多标签，根据显示的类型，主要可以分为2大类

 

　　块级标签，独占一行的标签

 

　　行内标签（内联标签），多个行内标签能同时显示在一行

 

　　修改标签的显示类型

 

　　CSS中有个display属性，能修改标签的显示类型

 

　　属性说明none隐藏标签block块级类型，独占一行，能随时设置宽度和高度inline行内类型（内联类型），多个行内标签可以显示在同一行，宽度和高度取决于内容尺寸inline-block行d内-块级类型（内联——块级类型），多个行内标签可以显示在同一行，能随时设置宽度和高度

 

　　CSS属性

 

　　CSS有N多属性，根据继承性，主要可以分为2大类

 

　　可继承属性

 

　　- 父标签的属性值会传递给子标签

 

　　- 一般是文字控制属性

 

　　不可继承属性

 

　　- 父标签的属性值不能传递给子标签

 

　　- 一般是区块控制属性

 

　　CSS属性——可继承属性

 

　　所有标签可继承

 

　　visibility、cursor

 

　　内联标签可继承

 

　　letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

 

　　块级标签可继承

 

　　text-indent、text-align

 

　　列表标签

 

　　list-style、list-style-type、list-style-position、list-style-image

 

　　CSS属性——不可继承属性

 

　　display、margin、border、padding、background

 

　　height、min-height、max-height、width、min-width、max-width

 

　　over-flow、position、left、right、top、bottom、z-index

 

　　float、clear

 

　　table-layout、vertical-align

 

　　page-break-after、page-bread-before

 

　　unicode-bidi

 

　　盒子模型

 

　　网页上每一个标签都是一个盒子

 

　　每个盒子都有四个属性

 

　　属性说明内容（content）盒子里装的东西，网页中通常是指文字和图片填充（padding，内边距）怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料边框（border）盒子本身边界（margin，外边距）盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

 

　　属性描述Height＜/td>设置元素高度max-Height＜/td>设置元素的最大高度max-Width＜/td>设置元素的最大宽度min-Height＜/td>设置元素的最小高度min-Width＜/td>设置元素的最小宽度Width＜/td>设置元素的宽度

 

　　属性描述padding在一个声明中设置所有内边距属性padding-bottom设置元素的下内边距padding-left设置元素的做内边距padding-right设置元素的有内边距padding-top设置元素的上内边距

 

　　属性描述border-Width＜/td>宽度border-style样式border-color颜色border-radius圆角

 

　　属性描述margin在一个声明中设置所有外边距属性margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin-right设置元素的右外边距margin-top设置元素的上外边距