HTML及CSS基础

一、网页的组成，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>