结构 HTML用于描述页面的结构
表现 CSS用于控制页面中元素的样式
行为 JavaScript用于响应用户操作
万维网联盟(W3C)
W3C专门为了定义网页相关的标准而成立。
W3C定义了网页中的HTLM,CSS, DOM, HTTP, XML等标准。
HTML(Hypertext Markup Language)
超文本标记语言。
HTML使用标签的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。
乱码
扩展 字符集:编码和解码所采用的的规则(ASCII、ISO-8859-1、GBK、GB2312(中文系统的默认编 码)、UTF-8(万国码)、ANSI(自动以系统的默认编码来保存文件))
编码:字符转化为二进制
解码:二进制转化为字符
出现原因:编码和解码采用的字符集不同。
实体(转义字符)
图片格式
meta标签
CSS(层叠样式表(Cascading Style Sheets))
style内不属于HTML,属于CSS的世界。注释不同(/* */)
选择器
通过选择器可以选中页面中指定元素(标签),
并且将声明块的样式应用到选择器对应的元素上
元素选择器:标签{ } 通过元素选择器可以选择页面中的所有指定元素
id选择器:#id属性值{ } 通过元素的id属性值选中唯一的一个元素
类选择器: .class属性值{ } 通过元素的class属性值选中一组元素
选择器分组(并集选择器): 选择器1,选择器2,选择器n{ } 同时选中多个选择器对应的元素
通配选择器:*{ } 选中页面中所有元素
复合选择器: 选择器1选择器2选择器n{ } 可以选中同时满足多个选择器的元素
对id选择器来说,不建议使用复合选择器
后代元素选择器:祖先元素 后代元素{ } 选中指定元素的制定后代元素
子元素选择器:父元素>子元素{ }
伪类选择器:专门用来表示元素的一种特殊的状态
属性选择器:[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性的元素
兄弟元素选择器: 前一个+后一个
前一个~后一个
否定伪类::not(.hello)
a:link{ } 未访问过的链接
a:visited{ } 访问过的链接
a:hover{ } 鼠标移入的状态
a:active{ } 超链接被点击的状态 hover和active也可以为其他元素设置
声明块
声明块紧跟在选择器的后边,使用一对{}括起来,
声明块中实际上就是一组一组的名值对结构,
这一组一组的名值对我们成为声明。
一个声明块中可以写多个声明,声明之间用;隔开
声明的样式名与样式值之间用:隔开
块与内联
div(块元素)标签没有任何语义,是一个纯粹的块元素,
并且不会为它里边的元素设置任何默认样式。
div元素主要用来对页面进行布局。
span是一个内联元素(行内元素)
所谓的行内元素,指的是只占自身大小的元素,不会占用一行
常见的内联元素:a img iframe span
span没有任何的语义,专门用来选中文字,然后为文字来设置样式
块元素主要用来做页面的布局,内联元素主要用来选中文本设置样式,
一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素。
a元素可以包含任意元素,除了它本身。
p元素不可以包含任何其他的块元素
子元素和后代元素
元素之间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素
后代元素:直接或间接被祖先元素包含的元素
兄弟元素:拥有相同父元素的元素
优先级的规则
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
通配 0
继承样式 无
!important 最高优先级
并集选择器单独计算
文本标签
em | 斜体 |
strong | 粗体 |
small | 用于细则,版权声明 |
cite | 参考内容 |
q | 短的引用 |
blockquote | 长引用(块级元素) |
sup | 上标 |
sub | 下标 |
del | 删除 |
ins | 插入 |
pre | 预格式 |
code | 专门用来标识代码 |
注意:p内不能有块
列表
无序列表
<ul type="circle">
<li></li>
</ul>
有序列表
<ol type="a">
<li></li>
</ol>
定义列表
<dl >
<dt></dt>被定义内容
<dd></dd>要定义的语句
</dl>
长度单位
像素(px)
百分比(%)
em=一个字体的大小
RGB(三原色)
十六进制的RGB(三组二位)
红浓度,绿浓度,蓝浓度数值均为00~ff(255)
字体标签
font-size 大小
font-family 字体选择
font-style 斜体
font-weight 加粗
字体种类
serif | 衬线 |
scans-serif | 非衬线 |
monospace | 等宽 |
cursive | 草书 |
fantasy | 虚幻 |
text-align(文本对齐方式)
left、right、center、justify(文本两端对齐)
text-indent 首行缩进
display
inline 内联元素
block 块元素
inline-block 行内块元素
none 不会在页面中显示,同时不占用页面位置
visibility
visible 默认值
hidden 页面中不现实,但占用页面位置
overflow
visible
hidden 溢剪没
scroll 双方向滚动条
auto 自动添加滚动条
文档流
网页最底层(地基)
块元素:独占一行,自上而下
内联元素:只占自身大小,自左向右
浮动
浮动元素会脱离文档流
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
浮动作用:文字环绕和页面布局(典型:多个块级元素放在同一行显示)
浮动可能引起的问题:子元素浮动,脱离文档流,造成父元素无法被撑开,造成高度塌陷。
高度塌陷问题解决:
使用after伪类结合clear属性 清除浮动
overflow:hidden
设置父级元素的宽度和高度
开启BFC