页面配置HTML
网页的具体内容和结构
CSS
网页样式(美化网页最重要的部分)。
JavaScript
网页的交互效果，如用户对鼠标事件的响应
HTML是HTML HTML的全称是HyperTextMarkupLanguage和超文本标记语言
实际上是文本，浏览器将其解析为具体的web内容
例如，浏览器可以将以下HTML代码
ul li知乎/li liCSDN/li li博客园/li/ul转换http://www.Sina.com/http://www.Sina.com /
的web内容
HTML的结构与XML类似，HTML由n个标签(节点、元素、标签)构成
HTML语法非常松散的常见HTML标记标题： h1、h2、h3、h4、h5…段落： p换行： br容器： div、span (用于存储其他标记)表： table、tr、td列表： ul、
推荐开发工具(网络三剑客) dreamweawer、flash、fireworks； WebStorm. html！ -网页标题，图标.-- head mate charset='utf-8' title第一页/title /head！ -网页的具体内容-- body这是网页内容a href=' http://www.Baidu.com ' target=' _ blank '百度/ah 16666666666/h1h 2666666666 h 16666666 H5 pppppppppppppp/pdivppppppppppp/p/divullihahaha/Li Li hahaha/Li/ulolliahahah/Li Li ahahah/Li Li ahahahah
它用于控制HTML标记的样式，在美化网页方面起着非常重要的作用
CSS是以键值对格式编写的，如color : red
背景色： blue
font-size : 20px
冒号左边是属性名称，冒号右边是属性值
CSS的三种书写方式内联样式：(内联样式)标签的style属性直接包含span style='color:red； 背景色： red；' 123/span内页面样式：此页面的style标记包含span 123/span style type=' text/CSS ' span { color : yellow； 背景颜色： blue }/style外部样式：写入另一个CSS文件，在网页上通过link标记引用
test.css
span { color:yellow； 背景色： blue } test.html
span123/spanlink rel='styleshee
t" herf="test.css"> CSS选择器 选择器的作用选择对应的标签，为之添加样式
标签选择器 根据标签名找到标签 类选择器 标签可以有多个类 id选择器 id是唯一的，不能一样 选择器组合 中间不留空格，粘在一起 后代选择器 中间一个空格，不管嵌套多少层 相邻兄弟选择器 属性选择器 <html><head lang="en"> <meta charset="utf-8"> <title></title> <style type="text/css"> /*标签选择器*/ p{ color:red; } /*类选择器*/ .first{ color:red; } .second{ color:blue; } /*id选择器*/ #first{ color:yollew; } #second{ color:green; } /*群组选择器*/ .first, #second, h1{ } /*选择器组合*/ div.first{ } /*后代选择器*/ div p{ } /*子标签选择器*/ div > p{ } /*相邻兄弟选择器*/ div ＋ p{ } /*属性选择器*/ div[name]{ } div[name][age]{ } div[name="jack"]{ } </style></head><body> <div> <p>p1</p> <span> <p>p2</p> </span> </div> <div name="jack">div1</div> <div age="10">div2</div> <p>与div相邻的p</p> <div class="first">123</div> <div id="first">123</div> <p class="first second">123</p> <p id="second">123</p> <h1>hhh</h1></body></html> 伪类 属性描述:active向被激活的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式:first-letter向文本的第一个字母添加特殊样式:first-line向文本的首行添加特殊样式:before在元素之前添加内容after在元素之后添加内容 <html><head lang="en"> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width:100px; height:100px; background-color:red; } div:hover{ background-color:blue; } div:before{ content:"666"; } </style></head><body> <div> </div></body></html> 选择器优先级针对性越强，优先级越高
选择器的权值
通配选择符（*）:0
标签：1
类：10
属性：10
伪类：10
伪元素：1
id：100
important：1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承
块级标签，独占一行的标签
行内标签（内联标签），多个行内标签能同时显示在一行
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
- 父标签的属性值会传递给子标签
- 一般是文字控制属性
不可继承属性
- 父标签的属性值不能传递给子标签
- 一般是区块控制属性
所有标签可继承
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
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
网页上每一个标签都是一个盒子
每个盒子都有四个属性