第一部分、HTML基本标签

1.1语法规范

HTML是用标签来区分文档内容的。

标签的语法是：

单标签：＜标签名／＞

双标签：＜标签名＞＜／标签名＞

语法规范：

1.2结构标签

标签名定义作用htmlHTML标签页面中最大的标签，常称为跟标签head文档的头部

在head标签中必须设置title标签

title文档的标题页面的网页标题body文档的主体包含文档的所有内容，页面的内容都要写在body里

1.2.1第一个页面

1.3基础标签

标签名定义使用及属性h1-h6标题标签

水平对齐方向属性align【属性值为center right left】

p段落标签br换行标签font文字标签颜色color 大小sizediv盒子标签独占一行span盒子标签b加粗i倾斜u下划线s删除线1.3.1标签实例

h1-h6标题标签

1.4水平标签hr

属性: color 颜色width

width宽度

size 粗细、高度

align 水平对齐【默认居中对齐】

1.5段落标签p

网页中部分字符是不识别的，需要使用转义字符。语法上以&开头，以;结尾。

  一个英文空格

  半个字空格

  个字空格

> 大于号>

< 小于号<

© 版权

® 注册

段落有水平对齐方式属性align 属性值是left right center

1.6图像标签img

img图像标签

src路径alt图片非正常加载时显示提示文字width宽度height高度border边框title鼠标滑过时显示文字

1.7列表标签ul ol dl

1.7.1无序列表ul

无序列表是一个整体，里面包含若干个列表项

快捷键:ul>li{写文字内容}*10

可以使用type属性修改项目符号类型

属性值有:disc默认实心圆 circle空心圆 square小方块 none无

1.7.2有序列表ol

有序列表是一个整体，里面包含若干个列表项

快捷键:ol>li{文字内容}*10

可以使用type属性修改默认符号类型

属性值有:1默认值a A iI

可以使用start属性修改起始值

可以使用reversed属性设置倒序

1.7.3自定义列表dl

自定义列表多用于图文混排，包含两部分内容:d定义项dd描述项

快捷键:dl>dt + dd

不要99999，只要998，带回家

1.8超链接a

属性: 1》href 路径

2》 target 设置窗口打开方式_self原窗口_blank新窗口

快捷键:ul>li*10>a[#]}{家用电器}*3

锚点链接:[跳转到当前页面任意位置]

第一步:设置锚点id属性设置属性名必须符合命名规范

第二步:跳转到锚点#锚点名

返回顶部

1.9表格标签table

表格是一个整体，里面包含行tr 列td 或者th

快捷键:table > tr*5>td{内容}*4

制作细线表格有这样几步:

1》给table设置width height bgcolor=red

2》给t设置bgcolor=white 【tr的背景色覆盖掉table的背景色】

3》给table设置 cellspacing = 1 【调整边框的粗细】

部分属性:

table 【width height bgcolor background align border cellspacing cellpadding】

tr 【height bgcolor background align valign垂直对齐方式】

td 【width bgcolor background align valign colspan水平合并rowspan垂直合并】

colspan水平合井，--->

rowspan垂直合并，↓

合并的步骤：

1》设置rowspan =数字，合几为一，就等于几

2》删除掉被合并的单元格

1

2

3

4

5

6

4

5

2

3

4

5

1.10表单标签form

表格:多行多列的参数，用于数据的展示

表单:用于数据的手机，实现用户与服务器的交互。

表单是一个整体，里面包含若干项

1.11输入框input

使用type属性，修改输入框的类型

1》在radio单选框中，必须使用name设置同一组，才能实现单选

2》在单选框radio和复选框CheckBox中使用checked设置初始选中

3》在文本框密码框中使用placeholder设置模糊提示文字

4》有三种按钮形式reset重置 submit提交button普通

1.12下拉列表select

下拉列表是个整体，里面要包含选项option

1.13文本域textarea

cols控制列数/宽度

rows控制行数數/高度

maxlength控制最大长度/限制宇数

1.14HTML5新增语义化标签

eg：

time【时间日期】

nav【导航】

header 【头部】

footer 【鹿部】

main【主体】

aside【侧边栏】

第二部分：CSS样式表

网页组成=HTML+CSS+JS

HTML：超文本标记语言，控制网页的结构

CSS：层叠样式表，控制网页的外观

/* CSS语法格式：*/

选择器{

属性: 属性值;

属性: 属性值;

}

1> CSS的注释是 /* */

2> 选择器——用于选择的工具

3> {}不能省略

4> 属性与属性值之间以:相邻，以;结尾【注意: ;都是英文的】

2.1CSS基本选择器

全局选择器 *

*{color: red;}

选择所有标签，文字颜色为红色

标签选择器 标签名

p{color: red;}

选择所有p标签，文字颜色为红色

class类选择器 .类名

.name_li{color: red;}

选择所有class名为name_li的标签，文字颜色为红色

id选择器 #id名

#tel{color:red;}

选择唯一的id名为tel的标签，文字颜色为红色

伪类选择器 :状态名

:link{} 初始状态

:visited{} 点击后的状态

:hover{} 鼠标悬停/滑过状态

:active{} 鼠标点击状态

:focus{} 获取光标状态

包含选择器 以空格隔开

ul li{} 选择ul里面的li

ol li{} 选择ol里面的li

.nav .a2{}

.nav a:hover{}

ul li a:hover{}

群组选择器 以,隔开

h1,h2,h3{}

2.2CSS的使用方式

1》行内样式【优先级最高，不建议使用】

2》内部样式【只能修改一个页面，重用率低】

3》外部样式【可以修改任意页面，重用率高】

2.3文字样式【修改文字】

2.4文本样式

2.5列表样式

2.6背景样式

第三部分、CSS3新增属性

3.1元素显示/转换

标签有分类——单标签、双标签

元素有分类——块元素、行内元素、行内块元素

1》块元素：独占一行、设置宽高生效、默认宽度占父元素100%

display: block;

2》行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的

display: inline;

3》行内块元素：既在一行之内显示、宽高还生效

display: inline-block;

3.2圆角边框

可以设置1到4个属性值，遵循“顺指针、对角线”原则

3.3背景色渐变

3.4文字阴影

3.5盒子阴影

3.6过渡动画translation

缺点：只能从一种状态过渡到另一种状态

3.7帧动画animation

一帧一帧组成的，类似小时候看的小人书

3.8溢出

3.9文本溢出text-overflow

第四部分、布局

实际生活中，盖房子的步骤是：①画图纸[审核]，②打地基垒框架，③装修

在页面制作中，我们也需要三步走：布局、HTML结构、CSS样式、JS动画

布局——给页面画图纸，设计元素在指定的位置

4.1静态布局

从上往下逐一摆放

缺点：会造成空间浪费

4.2浮动布局float

float原来是进行图文混排处理的

float现在可以在页面中进行【分列】

4.3使用float进行DIV+CSS布局

页面的内容都有指定的标签 p h1-h6 img ……

使用div来表示块元素、也可称之为盒子

页面的所有元素都是盒子

盒模型有四部分、五属性

4.4定位布局position

position:static;

静态定位，没有定位，默认值

position:relative;

相对定位，相对于自身进行定位【位移时，自身原位置不消失】

position:absolute;

绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】

position:fixed;

固定定位，相对于浏览器窗口进行定位【滚动时也是固定的】

其中注意一点：因为相对定位自身位置不消失，所以一般不会使用相对定位进行位移。

我们通常采用父相子绝来进行定位处理。

位移必须配合方向词：left right top bottom，单位有px em % 等，正负值都可以。

使用定位时，盒子会产生层叠效果，可以通过z-index属性进行层叠顺序调整。

z-index属性是不带单位的数字，正负都可以，值越大越显示在上方。