前端H5.CSS入门小结

一、网页的基本构成元素

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.区块元素

标签（块级元素 主要用来定义网页上的区域 通常用于较大范围的设置） 格式：

HTML元素

标签（行级元素 被用来定义文档中的一行的一部分）
格式：
内容

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.html

  3.注释：
  //单行注释
  /多行注释/

  4.变量的使用
  var 关键字表示申明变量

  5.流程控制语句 ---- 选择结构
  (1) if…else
  (2) switch
  (3) 三目预算符(A:B?A,B)

  6.流程控制语句 ---- 循环结构
  (1) for 循环
  (2) while
  (3) do…while循环