网页的组成
HTML
网页的具体内容和结构
CSS
网页的样式(美化网页最重要的一块)
JavaScript
网页的交互效果,比如对用户鼠标事件作出响应
HTML
什么是HTML
HTML的全称是HyperTextMarkupLanguage,超文本标记语言
其实它就是文本,由浏览器负责将它解析成具体的网页内容
比如,浏览器会将下面的HTML代码
- 1
- 2
- 3
- 4
- 5
转化为
知乎
黑马
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.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
CSS
什么是CSS
CSS的全称是Cascading Style Sheets,层叠样式表
它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如
color : red
background-color : blue
font-size : 20px
冒号左边的是属性名,冒号右边的是属性值
CSS三种书写方式
- 行内样式:(内联样式)直接在标签的style属性中书写
- 1
- 内页样式:在本网页的style标签中书写
- 1
- 2
- 3
- 4
- 5
- 6
- 7
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
test.css
- 1
- 2
- 3
- 4
test.html
- 1
- 2
CSS选择器
选择器的作用
选择对应的标签,为之添加样式
标签选择器 根据标签名找到标签
类选择器 标签可以有多个类
id选择器 id是唯一的,不能一样
选择器组合 中间不留空格,粘在一起
后代选择器 中间一个空格,不管嵌套多少层
相邻兄弟选择器
属性选择器
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
伪类
属性 | 描述 |
---|---|
:active | 向被激活的元素添加样式 |
:focus | 向拥有键盘输入焦点的元素添加样式 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式 |
:link | 向未被访问的链接添加样式 |
:visited | 向已被访问的链接添加样式 |
:first-child | 向元素的第一个子元素添加样式 |
:lang | 向带有指定lang属性的元素添加样式 |
:first-letter | 向文本的第一个字母添加特殊样式 |
:first-line | 向文本的首行添加特殊样式 |
:before | 在元素之前添加内容 |
after | 在元素之后添加内容 |
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
选择器优先级
针对性越强,优先级越高
选择器的权值
通配选择符(*):0
标签:1
类:10
属性:10
伪类:10
伪元素:1
id:100
important:1000
原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
important > 内联 > id > 类 > 标签|伪类|属性选择器 > 伪元素 > 通配符 > 继承
CSS标签的类型
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,外边距) | 盒子摆放的时候不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出 |
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
内容(content)属性
属性 | 描述 |
---|---|
height | 设置元素高度 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |
填充(padding,内边距)属性
属性 | 描述 |
---|---|
padding | 在一个声明中设置所有内边距属性 |
padding-bottom | 设置元素的下内边距 |
padding-left | 设置元素的做内边距 |
padding-right | 设置元素的有内边距 |
padding-top | 设置元素的上内边距 |
边框border属性
属性 | 描述 |
---|---|
border-width | 宽度 |
border-style | 样式 |
border-color | 颜色 |
border-radius | 圆角 |
边界margin属性
属性 | 描述 |
---|---|
margin | 在一个声明中设置所有外边距属性 |
margin-bottom | 设置元素的下外边距 |
margin-left | 设置元素的左外边距 |
margin-right | 设置元素的右外边距 |
margin-top | 设置元素的上外边距 |
更多推荐
教你写一个简单的网页(html网页开发入门)
发布评论