一、网页的基本构成元素
1.文本
2.图片和动画
3.超链接
4.导航栏
5.交互表单
6.其中常见元素
二、网页制作部分
HTML、CSS静态网站
HTML、CSS、JavaScript动态网站
三、HTML部分
0.文字段落与标题
p标签:
格式:
文字
功能:段落空行
h标签:
格式:
从H1~H6由大至小
1.超链接:
a元素:
格式:
其功能有:
(1)普通链接(跳转地址超链接)
(2)锚点链接(书签链接–当前页数的不同位置)
(3)功能链接:
a.触发某个功能----执行JS代码
b.发送电子邮件----mailto:
c.拔打电话----tel
2.图片:
img元素:
格式:
3.列表:
(1).无序列表(每行前面由项目符号)
格式:
(2).有序列表(有序列表整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左 对齐;各表项前带顺序号)
格式:
(3).定义列表(字典列表 图片和文字的结合)
格式:
-
第一个标题项
- 对第一个标题项的解释文字
水平线标签:
4.区块元素
标签(行级元素 被用来定义文档中的一行的一部分)
格式:
内容
5.表格
(表格的标签)(行的标签)(表项的标签) 格式: |
6.表单
(表单标签) (文本域、密码域、复选框、单选按钮、按钮)(表单的秘钥对生成器字段) (定义一个嵌入对象) (定义不同类型的输出,如脚本输出) (定义下拉列表/菜单) (定义一个多行的文本输入区域)格式:
type(类型)
单行文本域 type=“text”
密码域 type=“password”
单选按钮 type=“radio” checked="checked"默认选中属性
复选框 type=“chenckbox”
表单按钮 type="submit"提交按钮 type="reset"重置按钮 type="button"普通按钮 type=“image” 图片按钮
文件域 type=“file”
四、CSS部分
CSS的书写方式:
1.行内式(针对单条标签的样式修改)
<标签名 style=“css属性:值; css属性:值; …”></标签名>
<标签名 style=“css属性:值; css属性:值; …” />
2.标签式(在H5的文件内的CSS样式)
css界定符标签
CSS的选择器:
1:标签选择器 标签名
2:类别选择器 .类别名 className
3:ID选择器 #ID名
CSS的选择法:
1:并集选择法 || 选择器1,选择器2,.....
2:交集选择法 && 标签名.类别名
3:继承选择法(子代选择法) 父级选择法 子级选择法
3.导入式(CSS样式单独文件编写然后导入至H5文件)
CSS的基本属性:
基本属性:
width 宽度
height 高度
overflow 溢出
visible 显示(默认)
scroll 滚动轴
hidden 隐藏
display 显示
block (div) 块级样式显示
none(隐藏)
inline (span) 行内元素的样式显示
inline-block 在同一行中的块级样式显示 仅限于IE浏览器
list-item(
- ) 列表项样式显示
-
float 浮动 left 向左浮动 right
clear:left; 清除向左浮动
right
both背景属性:
background
background-color 背景颜色
background-image 背景图片 循环
background-repeat 背景图片循环方式
repeat:循环 (默认)
repeat-x:X轴循环
repeat-y:Y轴循环
no-repeat:不循环background-position 背景图片位置 背景不循环时才能使用
left right top bottom center边框属性:
border-style 边框线形
solid 实线
dashed 虚线
dotted 点线
double 双实线
groove 和黑色组成的立体边框
inset 内发光立体边框
outset 外发光立体边框border-color 边框颜色 颜色名称 16进制 rgb函数
border-width 边框宽度 xxxpx
方位:left right top bottom
文字属性:
color 文字字体颜色
font 文字
font-family 文字字体
font-size 文字大小
font-style 文字样式 italic 倾斜
font-weight 文字粗细
text-decoration 文字线形
underline 下划线
overline 上划线
line-through 删除线text-align 水平对齐
vertical-align 垂直缩进 td适用
line-height 行高列表属性
list-style-type 符号样式
list-style-position 列表项位置 inside outside
list-style-image 符号图片超链接属性
a:link 默认状态
a:hover 鼠标掠过
a:active 鼠标点击
a:visited 访问过的链接inherit 继承
鼠标指针样式属性
cursor盒子模型
border 边框
margin 间距
padding 填充物position 定位:
1:相对定位 relative
坐标轴原点就是自己原来的位置。2:绝对定位 absolute 坐标轴原点是离当前节点最近的一个有定位的父级标签。 绝对定位的标签是没有盒子 3:锁定定位 fixed
left 左边距 x 轴坐标
top 上边距 y 轴坐标
z-index 层叠坐标 z 轴坐标五、JS部分
一、JS的基本理论
1.Javascript :运行在客户端的脚本语言
2.netscape 网景
3.给页面增加活跃的元素
二、Js的基本概念
1.引用的方法:
(1)直接加入HTML文档
格式:
(3)在HTML标签内添加脚本2.输出的方法
(1)信息对话框:alert(“信息内容”);
例:10-1.html(2)选择对话框:confirm(“对话框提示文字内容”);
例:10-2.html(3)提示对话框:prompt(“提示文字内容”,文本框输入默认文本);
例:10-3.html3.注释:
//单行注释
/多行注释/4.变量的使用
var 关键字表示申明变量5.流程控制语句 ---- 选择结构
(1) if…else
(2) switch
(3) 三目预算符(A:B?A,B)6.流程控制语句 ---- 循环结构
(1) for 循环
(2) while
(3) do…while循环