-
HTML 定义了网页的内容
-
-
JavaScript 网页的行为
##什么是HTML?
HTML是用来描述网页的一种语言。 -
HTML指的是超文本标记语言: HyperText Markup Language
-
HTML不是一种编程语言,而是一种标记语言
-
标记语言是一套标记标签 (markup tag)
-
HTML使用标记标签来描述网页
-
HTML文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
css层叠样式表称为级联样式表
在html引用方式为外联、内联、嵌入。
1.外联:在html文档中使用<link>元素。<!--没有实意-->
2.内联:用<style>元素使用。
3.嵌入:在元素开始行内<style>后面使用。
快速格式化快捷键:shift+alt+f
##文本元素:
-
h1~h6 1级标题~6级标题
-
p:段落
-
strong:粗体 重要文本
-
i:斜体 应区别对待的文本
-
blockquote:整段的引用
-
q:小段本文的引用
-
超链接 实例<*a herf=xxxxxxxx target=—blank>XXXXX</a>(target=—blank为开启一个新网页 默认为自身网页打开)链接./代表从当前文件出发(可以省略) ../代表从上个文件夹出发(不可省略)
##实体字符
在html里无论多少个空格都只会表示一个空格
示例:<p>s s</p>
##元素属性:
-
width;width:500px;设置元素宽度;
-
height;height:100px;设置元素高度;
-
color;color:red;设置元素内容颜色;
-
background-color;background:red;设置元素北京颜色;
-
font-size;font-size:1px;设置文字大小;
-
font-weight;font-weight:1px;设置文字粗细;
-
text-align;text-align:center;设置文字排列方式;
-
border;border:1px solid;设置元素边框样式;
##选择器
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| 通配* |选中当前文档所有元素 | *{...} |
| 元素 | 选中当前文档所有该元素| div{...} |
| id | 选中属性值匹配的元素,具有唯一性 | #login{...} |
| class |选中当前文档所有该类元素 | .center{....} |
| 子级 |选中当前文档符合条件的子级元素 | header>nar{...} |
| 后代 |选中当前文档符合条件的所有后代 | ul空格li{...}|
| child |选中当前文档符合条件的子级元素 | li:nth child(-n+x){...} |(n为0~x)
| 并集 |选中当前文档匹配上的多个元素 | login,center,xxx{....} |
##CSS(复用 声明冲突 继承):
-
复用:即重复使用,避免了重复书写,提高开发效率;
-
声明冲突:属性相同,值不同:比较优先级(优先级高胜)>比较特殊性(特殊性高胜)>比较原次序(原次序后胜) 倘若属性值后面有!important则说明是一条重要说明;示例: color:red !important
-
子级自动拥有父级某些CSS样式;文本集的样式具有继承性。
##盒模型
盒模型是css基石之一,它规定一个元素在页面上如何显示,在某种程度上.............
###块级元素:占据所有可用宽度,以换行开始,通常用于较大的内容块,比如标题或结构化元素
###行内元素:只占据内容所需宽度,在同一行内一个接一个摆放,通常用于较小的内容块,如被选择为粗体或斜体。
不同元素产生的盒子类型也就不同,display属性决定了盒子类型。
-
display:none 将元素隐藏并且不保留其物理空间;
-
display:inline 指定元素为行内元素;
-
display:block 指定元素为块级元素;
-
display:inline-block 指定元素为行内块元素;
####盒模型取值:paddin margin:
-
10px 上 右 下 左;
-
10px,20px 上下 左右;
-
10px,20px,30px 上 左右 下;
-
10px,20px,30px,40px 上 右 下 左;
-
单独指定某一方向:margin-top/right/bottom/left;
-
padding是边框和内容间可选距离。
##视觉格式化
视觉格式化模型规定了三种定位系统
-
常规流(normal flow):在没有css的干预下,块级元素独占一行,宽高可设;行内元素,单排显示,宽高自动。
-
浮动(float):有两个值,一个为left,一个为right;float:left :左浮动,浮动定位;float:right :右浮动,浮动定位
-
绝对定位(absolute positioned)
####任何一个元素都必须属于其中某一种定位体系。不同的设定体系中,尺寸和位置都会有一些差异。
浮动盒子位置:
-
右浮动盒子向上向右排列
-
左浮动盒子向上向左排列
-
浮动盒子的顶边不得高于上一个盒子的顶边
-
若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够空间放下盒子。
##overflow
-
visible 默认值。内容不会被修剪,会呈现在元素框之外。
-
hidden 内容会被修剪,并且其余内容是不可见的。
-
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
-
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
-
inherit 规定应该从父元素继承 overflow 属性的值。
#美化:
##美化文本
-
font-size 字体大小(不要取奇数)
-
font-weight 字体粗细
-
font-style 字体样式(加粗 倾斜之类)
-
letter-spacing 文字间距
-
word-spacing 词间距
-
text-indent 第一个文字缩进
-
text-decoration 线条:none 没有线条 ;overline 文字顶部划线 ;underline 文字底部划线 ;line through 文字中部划线
-
::first-letter 文本第一个字
-
::frist-line 文本第一行
###字体类型:
-
非衬线字体——网页用的较多
-
衬线字体——印刷用的较多
-
font-family 可设置多个值且用逗号隔开,浏览器会依次读取设置的值,若一个值失效,则读取下一个,所以为避免失效,最后一个值为sans-serif或者serif。
-
由于font-family为可继承属性,并且一个网页通常都是统一的。因此,通常对body元素使用。
-
font-face加载web字体
##美化边框
border-radius:宽高一致,值为宽的一半则为圆形。