一、网页的组成,3个部分组成:
1.HTML 网页的具体内容和结构
2.CSS 网页的样式
3.JavaScript 网页交互效果和响应事件
二、结构性标签
1.article:文章主题内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
2.header:标记头部区域内容
3.footer:标记脚步区域内容
4.section:区域章节表述
5.nav:菜单导航,链接导航
三、块级性标签
完成web页面区域的划分,确保内容的有效分隔,包括:
1.aside:注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
2.figure:对多个元素组合并展示的元素,常与figcaption联合使用
3.code:表示一段代码块
4.dialog:人与人之间对话,包含dt和dd两个元素(dt用于表示说话者,dd用于表示说话者的内容)
四、行内语义性标签(有印象即可)
完成web页面具体内容的引用和表述,丰富展示内容,包括:
1.meter:特定范围内的数值,如工资、数量、百分比
2.time:时间值
3.progress:进度条,可用max、min、step进行控制,完成对进度的表示和监听
4.video:视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
5.audio:音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
五、交互性标签(有印象即可)
功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:
1.details:表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
2.datagrid:控制客户端数据与显示,可用于动态脚本及时更新
3.menu:用于交互菜单
4.command:用来处理命令按钮
CSS
一、什么是CSS
1.全称Cascading Style Sheets,层叠样式表
2.它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
二、CSS的编写格式是键值对形式的,冒号左边是属性名,右边是属性值
三、CSS的3中书写形式
1.行内样式:(内联样式)直接在标签的style属性中书写,
例:<bodystyle="background-color:red;">
2.页内样式:在本网页的style标签中书写(类似代码封装)
例:<style>
div{
color: green;
font-size: 40px;
background-color: red;
}
</style>
3.外部样式:在单独的CSS文件中书写,然后在网页中用link(类似iOS的import)标签引用
css遵循:1.就近原则(谁离我的内容近,优先使用谁的样式),2.叠加原则
src和href的区别
src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);
href:引入,引入外部资源(如a标签,link标签)
四、CSS的两大重点
1.属性:通过属性的复杂叠加才能做出漂亮的网页
2.选择器:通过选择器找到对应的标签设置样式
五、CSS选择器
1.标签选择器
作用:选择对应的标签,为之添加样式
根据标签名找到标签
2.类选择器
.类名{}
3.id选择器
唯一的,针对独一无二的样式
#类名{}
4.并列选择器(逻辑或||)
例:div, .类名{}
5.复合选择器(逻辑与&&)
6.后代选择器(子标签中的样式修改)
7.直接后代选择器
8.相邻兄弟选择器
9.属性选择器
例:div[name] {} 一维
div[name][age] {} 二维
div[name=“jack”] {}
10.伪类
作用:加冒号后添加样式
active:向被激活的元素添加样式
focus:向拥有键盘输入焦点的元素添加样式
hover:当鼠标悬停在元素上方时,向元素添加样式link:想未被访问的链接添加样式
visited:向已被访问的链接添加样式
first-child:向元素的第一个子元素添加字样
lang:向带有指定lang属性的元素添加样式
11.伪元素
六、选择器的优先级
选择器的针对性越强,它的优先级就越高
权值: 1.通配选择符(*):0;
2.标签:1;
3.类:10;
4.属性:10;
5.伪类:10;
6.伪元素:1;
7.id:100;
8.important:1000;*{
color: darkgreen!important;
}
原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
CSS选择器遵循:
1.在相同的级别选择器:1.叠加原则;2.就近原则
2.important > 内联 > id选择器 >类选择器 >标签选择器|伪类|属性选择器 >伪元素 >通配符 >继承
3.范围越小,优先级别越高
HTML标签类型
一、HTML有N多标签,根据显示的类型,主要可以分为三大类
1.块级标签:
独占一行的标签
能随时设置宽度和高度(如div,p,h1,ul,li)
2.行内标签(内联标签)
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(如span,a,label)
3.行内-块级标签(内联-块级标签)
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(如input,button)
二、修改标签的显示类型
CSS中有个display属性,能修改标签的实现类型
1.none:隐藏标签
2.block:让标签变为块级标签
3.inline:让标签变为行内标签
4.inline-block: 让标签变为行内-块级标签(内联-块级标签)
CSS属性
一、css有N多属性,根据继承性,主要可以分为两大类
1.可继承属性:父标签的属性值会传递和子标签;一般是文字控制属性
2.不可继承属性:父标签的属性值不能传递给子标签;一般是区块控制属性
二、可继承属性:(红色表示常用)
1.所有标签可继承
visibility,cursor(光标样式)
2.内联标签可继承
letter-spacing,word-spacing,white-space,line-height,color,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction
3.块级标签可继承
text-indent(缩进),text-align
4.列表标签可继承
list-style,list-style-type,list-style-position,list-style-image
三、不可继承属性:(红色表示常用)
display,margin, border,padding, background
height, min-bright,max-height, width,min-width, max-width
overflow,position, left,right, top,bottom, z-index
float, clear
table-layout, vertical-align
page-break-after, page-bread-before
unicode-bidi
CSS3新增特性
RGBA颜色透明度
块阴影与圆角阴影:box-shadow text-shadow
圆角:border-radius
边框图片:border-image
形变:transform:none | <transform:none-function>[<transform-function>]
盒子模型
一、网页上的每一个标签都是一个盒子
每个盒子有四个属性
1.内容(content):盒子里装的东西;网页通常是指文字和图片
2.填充(padding,内边距):怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其他抗震的辅料
3.边框(border):盒子本身
4.边界(margin,外边距
盒子摆放的时候不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出。
二、内容(content)属性
height:设置元素高度
max-height:设置元素的最大高度
max-width:设置元素的最大宽度
min-height:设置元素的最小高度
min-width:设置元素的最小宽度
width:设置元素的宽度
三、填充(padding,内边距)属性 上右下左
padding:在一个声明中设置所有内边距属性
padding-bottom:设置元素的下内边距
padding-left:设置元素的左内边距
padding-right:设置元素的右内边距
padding-top:设置元素的上内边距
例1:padding:10px,5px,15px,20px;(上内边距10px,右内边距5px,下内边距15px,左内边距20px)
例2:padding:10px,5px,15px;(上内边距10px,右内边距和左内边距5px,下内边距15px)
例3:padding:10px,5px;(上内边距和下内边距10px,右内边距和左内边距5px)
例2:padding:10px;(所有4个内边距10px)
四、边框(border)属性
五、边界(margin,外边距)属性 同padding
六、水平居中:
1.行内标签,行内块级标签使用:text-align
2.块级标签使用margin:0px auto
七、垂直居中:
line-height
CSS布局
一、默认情况下,所有的网页标签都在标准流布局中
从上到下,从左到右
二、脱离标准流的方法
float属性:属性的常用取值
1.left:脱离标准流,浮动在父标签的最左边
2.right:脱离标准流,浮动在父标签的最右边
position属性和left,right,top,bottom属性:
1.absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right,bottom属性进行规定。
2.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过left,top,right,bottom属性进行规定。
3.relative:生成相对定位的元素,相对于其正常位置进行定位。因此,left:20 会想元素的left位置添加20像素。
4.static:默认值。没有定位,元素出现在正常的流中(忽略left,top,right,bottom或者z-index声明)。
5.inherit:规定应该从父元素继承position属性的值。
Transform:
webkit-transition
webkit-transform-origin
webkit-transform
JavaScript
一、什么是JS
1.JS是一门广泛用于浏览器客户端的脚本语言
2.有Netspace公司设计,当时跟sun公司合作,所以名字像Java
二、用途:
1.HTML DOM操作(节点操作,比如添加、修改、删除节点)
2.给HTML网页增加动态功能,比如动画
3.事件处理:比如监听鼠标点击、鼠标滑动、键盘输入
三、Node.js
1.Node是一个JS运行环境(runtime),是对Google V8引擎进行了封装
2.V8引擎执行JS的速度非常快,性能非常好
3.可以作为后台语言
4.单线程:不增加额外线程的情况下,依然可以对任务进行并行处理(采用事件轮询)。
5.非阻塞I/O、V8虚拟机、事件驱动
四、JS的书写方式
1.页内JS:在当前网页的script标签中编写
<script type=“text/javascript”>
</script>
2.外部JS:
<script src=“index.js”></script>