一 话题引入
1 使用表格布局的缺陷
- 嵌套层级太多,一旦出现嵌套顺序错乱,整个页面达不到预期的效果
- 采用表格布局,页面不够灵活
2 解决方法
使用HTML的块标签(配合css一起使用才有用处):
- div标签
- 自动换行,默认占一行
- span标签
- 内容显示在同一行
二 CSS 概述
Cascading Style Sheets:层叠样式表
美化HTML页面,HTML是网页的骨架,CSS来装修。将页面美化和代码进行分离,提高代码复用性。
1.基本语法
<head>
<style>
选择器{
属性名称:属性的值;
属性名称2:属性的值;
}
</style>
</head>
CSS选择器:帮助我们找到要修饰的标签或元素
2.常用的选择器
(1)元素选择
元素名称{
属性名称1:值;
...
}
(2)ID选择器
以#开头,id在整个页面中必须是唯一的.在需要改的div标签添加id
同一id只能使用一次
#ID的名称{
属性名称1:值;
...
}
(3)类选择器
以.开头,在需要的div标签添加class
给同一类的元素加上了相同的样式
.类的名称{
属性名称1:值;
...
}
(4) 其他选择器
CSS中的其它选择器
- 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
- 属性选择器
a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']
- 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
- 子元素选择器: 父选择器 > 儿子选择器
- 伪类选择器: 通常都是用在A标签上
3. CSS引入方式
- 外部样式
- 通过link标签引入一个外部的css文件
- e.g.
<link rel="stylesheet" href="文件路径" />
- 内部样式
- 直接在style标签内编写CSS代码
- 行内样式
- 直接在标签中添加一个style属性, 编写CSS样式
- e.g.
<div style="color:yellow">
三 CSS 浮动
是style中的常用属性
float属性
* left
* right
流式布局
<div style="float:left;width: 200px; height: 200px;background-color: red;">辣鸡</div>
p.s
浮动的元素会脱离正常的文档流,在正常的文档流中不占空间,所以会覆盖在文档流之上
clear属性
- both 两边都不允许浮动
- left 左边不允许浮动
- right 右边不允许浮动
三 盒子模型
盒子 万物皆盒子
1.内边距
padding-top: 25px
padding-right
padding-bottom
padding-left
padding 25px 上下左右
padding 25px 30px 上下 左右
padding 10px 20px 30px 上右下 顺时针 左取右的值
2.外边距
margin-top:25px
margin-right
margin-bottom
margin-left
3.绝对定位
position:absolute(必须先设置这个以下设置才有效)
top:控制距离顶部的位置
四 JavaScript
概述
JavaScript是一种直译式脚本语言。
脚本语言:源码---->解释执行
HTML:决定了页面的框架
CSS:用来美化页面
JS:提供用户的交互
JS的组成
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的输出
JS的输出
-
alert() 直接弹框
-
document.write() 向页面输出
-
console.log() 向控制台输出
-
innerHTML: 向页面输出
-
获取页面元素: document.getElementById(“id的名称”);
-
JS声明变量:
- var 变量的名称 = 变量的值
-
JS声明函数:
var 函数的名称 = function(){
}
function 函数的名称(){
}
五 自己编写时出现的错误
- function拼写错误;
- 文本输入框的内容没有用
.value()
方法取出就直接使用; - form标签接受校验函数时没有加return,应为
<form action="..." onsbumit ="return checkOut()>"
- 提交按钮类型为
type="submit"
- 弹出框的函数为
alert();