回顾
- 标签通用属性
- id：标签唯一的编号
- class：标签属于的类别
- width：宽度 height：高度
- name：元素的名字
- 表单域：<form>
- 表单元素
- 文本框：<input type=’text’ name=’’ size=’’ maxlengh=’’/>
- 密码框：<input type=’password’ name=’’/>
- 单选按钮：<input type=radio>
- 同一组的单选按钮的名字要一致
- 要给无法输入的表单元素赋值
- 复选按钮：<input type=’checkbox’>
- 下拉菜单：<select><option></option></select>
- 下拉列表：<select size=’’ multiple><option></option></select>
- 文本域：<textarea cols=’’ rows=’’></textarea>
- 提交按钮：<input type=’submit’ name=’’/>
- 重置按钮：<input type=’reset’ name=’’/>
- 普通按钮：<input type=’button’/>
- 使用表单
- action属性：表单提交的位置，如果action=’’表示表单提交给自己
- method属性：值有get和post
- 框架
- <frameset>框架集
- <frame>框架
练习一：写入如下的框架结构
<html>
<frameset cols=”100,*”>
<frame src=””>
<frameset rows=”100,*”>
<frame src=””>
<frame src=””>
</frameset>
</frameset>
</html>
练习二：写出如下框架
<html>
<frameset rows=”*,*”>
<frameset cols=”*,*”>
<frame src=””/>
<frame src=”/>”
</frameset>
<frameset cols=”*,*”>
<frame src=””/>
<frame src=””/>
</frameset>
</frameset>
</html>
- 内嵌框架：<iframe>，嵌套在页面内部
- HTML5新特点
- 语法更加简单
- 语法更加宽松
- 标签语义化
- HTML5新增常用属性
- required：必填
- placeholder：默认显示内容
- autofocus：自动获取焦点
- input标签新增type属性
- type=”email”
- type=”date”
- type=”time”
- type=”month”
- type=”week”
- type=”number”
- type=”range”
- type=”color”
- 多媒体标签
- <embed>：可以播放音频和视频
- <audio>
- 方法一
<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>
-
-
- 方法二：
-
<audio controls autoplay>
<source src=”music/music.mp3″>
<source src=”music/music.ogg”>
</audio>
-
- <video>
多学两招
optgroup
HTML5中表单元素可以不放在表单中
HTML5中表单元素可以不放在表单中，通过id属性将他们关联起来
计算机的单位，进制与进制间的转换
计算机的单位
- 计算机中的电子器件，电子器件只有两个状态，通电与不通电，通就是1，不通就是0。所以计算机内部只能传输0和1。
- 既然只能传输0和1，计算机用的是二进制。
- 一个字节的大小可以一个字符，一个字节=8位
- 计算机最小的单位是“位”，一个位就是一根线传输的数据
1K=1024（210）个字节
1M=1024K，220个字节
1G=1024M，230个字节
1T=1024G，240个字节
进制
我们原来学习的是十进制，逢十进一，十进制中有十个数字。我们以此类推，二进制就是逢二进一，二进制就两个数字，0和1。
在计算机中，我们需要用到的进制有，二进制，八进制，十进制，十六进制。
| 进制 | 包含数字 |
| 二进制 | 0,1 |
| 八进制 | 0,1,2,3,4,5,6,7 |
| 十进制 | 0,1,2,3,4,5,6,7,8,9 |
| 十六进制 | 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F |
（1+1）2=（10）2
（7+6）8=（15）8
（A+6+B）16=（1B）16
进制转换（将其他进制转成10进制）
分析：以十进制为例，以10为底，指数从右往左以此为0次方，1次方，2次方…
(123)10=1*102+2*101+3*100
（3456）10=3*103+4*102+5*101+6*100
以此类推
(1100)2=1*23+1*22+0*21+0*20=12
(1011)2=1*23+0*22+1*21+1*20=11
(763)8=7*82+6*81+3*80
(FF)16=15*161+15*160=255
(2B)16=2*161+11*160=43
进制转换（十进制转成二进制）
整数方法：除2反向取余数，小数部分是乘2正向取整数
(11)10=(1011)2
(19)10=(10011)2
多学一招：八进制和十六进制转成二进制和十进制转换不一样，八进制是将每一八进制位数字转成3位的2进制，16进制是将每一位数字转成4位的二进制数字，然后合并起来
(13)8=(1011)2
分析：
1的3位二进制是001
3的3位二进制是011
(13)16=(10011)2
分析：1的4位二进制0001
3的4位二进制是0011
(0.25)10=(0.01)2
重点：十进制和二进制的整数部分的转换。
网页中颜色表示的含义
- 光的三原色（RGB），red green blue，他们的取值范围是0-255，转成十六进制00-FF。
- 颜色的色值以#开头
- 例题
- #FF0000：红色
- #00FF00：绿色
- #006600：绿色
- #0000FF：蓝色
- #000000：黑色
- #FFFFFF：白色
- #555555：灰色
- #5c5c5c：灰色
- #112233：由11的红，22的绿，33的蓝组成的颜色
DW设计器的使用
插入图片
方法一：
方法二：
插入换行
回车：换段
shift+回车：换行
添加超链接
第一步：选中文本或图片
第二步：在属性面板上
插入表格
脚下留心：表格是可以嵌套的。
合并单元格
选中需要合并的单元格，点击“合并”按钮即可
选中需要拆分的单元格，点击“拆分”按钮即可。
标签选择器的使用
此工具用来选择标签内容非常方便。
CSS介绍
- 我们在做网站的时候有一个原则：表现（样式）和内容要分离。表现是由CSS控制的，内容是由HTML控制器的。
- CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法
CSS以<style>开头，</style>结束，建议样式代码写在<head></head>之间。
语法结构：
<style type=”text/css”>
选择器{
属性:属性的值;
属性:属性的值;
}
</style>
CSS样式由选择器、属性、属性的值组成。
注释
语法：/* 注释的内容 */
两个排版标签
<div></div>
<span></span>
这两个标签叫块标记，这两个标记中用来放内容。他们的区别：
- 一般来说，<div>中可以放图片，文字，视频等网页内容，<span>一般只能存放文字。
- 显示方式不一样
CSS选择器（符）
ID选择器
- id选择器以#开头
- id选择器只能供一个元素使用
类样式（class样式）
- 以点（.）开头
- 可以供多个元素使用
标签选择器
通过标签来选择元素
通配选择器
通过星号（*）来表示所有标签，对所有标签添加样式
组合选择器
如果有多个选择器的样式是一样的，我们可以将这些选择器组合起来一起写。
<style type=”text/css”>
/*组合选择器*/
div,span{
color:#F00;
}
#first,h1{
color:#060;
}
</style>
<div>锄禾日当午，</div>
<p id=”first”>汗滴禾下土。</p>
<span>谁知盘中餐，</span>
<h1>粒粒皆辛苦。</h1>
后代选择器
子元素选择器（父元素>子元素）
相邻元素选择器
#first+div：紧挨着#first之后的div
#first~div：#first之后的所有的div
伪类
元素:link 正常连接时候的状态
元素:visited 点击以后的状态
元素:hover 当鼠标移动上去的状态
元素:active 当鼠标按下去时候的状态
脚下留心：不是所有的元素都支持这4个状态，有的元素可能只支持其中的某个状态。但是超链接支持这4种状态。
脚下留心：这四种状态要按照lvha的顺序写。（love 爱 hate 恨）
<style type=”text/css”>
a:link{ /*正常连接时候的状态*/
color:#F00;
text-decoration:none; /*文本修饰*/
font-size:12px;
}
a:visited{ /*点击后的状态*/
color:#F0F;
text-decoration:none;
font-size:12px;
}
a:hover{ /*当鼠标移动到a标记的时候状态*/
color:#060;
text-decoration:underline;
font-size:24px;
}
a:active{ /*当鼠标点击下去的状态*/
color:#00F;
text-decoration:underline;
font-size:24px;
}
</style>
<a href=”#”>超链接1</a> <br>
<a href=”#”>超链接2</a>
例题一
例题二：
