HTML(三)
回顾
- 六级标题
- <h1></h1>一级标题 权重最高
- <h2>:二级标题
- …
- <h6>:六级标题
- 列表
- 有序列表:<ol> 每一项是li
- 默认是以数字为顺序,通过type属性来更改标号的类型(字母,罗马数字)
- 通过start属性设置从第几个数字(字母)开始
- 无序列表:<ul> 每一项是li
- 自定义列表:<dl>
- <dt>自定义列表的标题
- <dd>自定义列表的项
- 有序列表:<ol> 每一项是li
- <!DOCTYPE>文档声明
- 必须放在页面的第一行
- 告知浏览器这个页面按照什么样的标准来解析
- <meta>
- 告知浏览器用什么样的字符编码来解析
- 给搜索引擎搜索
- <img>:插入图片
- <Img src=’路径’ alt=’当图片无法显示的时候显示的内容’ title=’当鼠标移到图片上的时候显示内容’ width=’’ height=’’>
- 热点:带有超链接的区域
- <object>:<object type=”application/x-shockwave-flash” data=”地址” width=”” height=””></object> 插入flash
- 实体:固定的字符串
- < <
- > >
- 空格
- 表格
- 表格作用:排版
- 与表格相关标签
- Table表格
- Tr 行
- Td 单元格
- Th 标题
- 单元格数据对齐
- 水平对齐 align=center left right
- 垂直对齐 valign=top middle bottom
- 单元格间距和单元格填充
- 间距:cellspacing 单元格和单元格的距离,默认2像素
- 填充:cellpadding:单元格的内容和距离单元格的距离,默认1像素
- 合并单元格
- 合并行:rowspan
- 合并列:colspan
标签的通用属性
有的属性是多个标签都具有的
- id:唯一的编号
- class:标签属于哪个类别
- width:宽度
- height:高度
- title:当鼠标移上去的时候显示提示性文字
表单
表单作用:客户端使用表单向服务器提交数据。
表单域
表单域就是表单的区域
标签:<form></form>
表单元素
文本框(单行文本 <input>)
<input type=”text” name=”username” size=”30″ maxlength=”6″ />
- input:输入
- type:类别,类型
- text:文本
- name:必须给每个表单元素取名字,因为服务器是通过名字来获取表单元素的值的。(每一个表单元素都要取名字)
- size=30:单行文本的宽度是30个字符的宽度
- maxlength=6:单行文本中最多只能输入6个字符。
运行结果
密码框(<input>)
<input type=”password” name=”pwd” maxlength=”3″ />
单选按钮(<input>)
<input type=”radio” name=”sex” value=”1″ checked=”checked” />男
<input type=”radio” name=”sex” value=”0″/>女radio:单选按钮
- value:值
- checked:选中
注意:
- 同一组的单选按钮名字必须要一致
- 无法输入的表单元素必须要赋值
- checked属性用来默认选择单选按钮,简写成checked也可以
运行结果
思考:思考如下代码,结果是什么?
分析:程序的执行是从上往下依次执行,当执行的第二个单选按钮的时候会选择第二个单选按钮,由于是单选,在选择第二个的时候会取消对第一个按钮的选择,以此类推,最后选择最后一个单选按钮。
复选框(多选按钮 <input>)
<input type=”checkbox” name=”hobby” value=”读书” checked=”checked” />读书
<input type=”checkbox” name=”hobby” value=”爬山” />爬山
<input type=”checkbox” name=”hobby” value=”游泳” />游泳
<input type=”checkbox” name=”hobby” value=”看报” />看报
- check:选择
- box:盒子
运行结果
下拉菜单(<select>)
<select name=”jiguan”>
<option value=”上海”>上海</option>
<option value=”北京” selected=”selected”>北京</option>
<option value=”天津”>天津</option>
</select>
- select:选择
- option:选项
- selected:已经选中
运行结果
下拉列表(<select>)
下拉菜单和下拉列表的标签是一样的,他们的区别下拉列表一次可以选择多个选项
- size:一次显示的选项个数
- multiple:多选
文本域(多行文本 <textarea>)
<textarea name=”jianyi” cols=”30″ rows=”5″></textarea>
- text:文本
- area:区域
- cols=’30’:文本域的宽度是30个列的宽度
- rows=’5’:文本域的高度是5行的高度
运行结果
提交按钮(<input>)
点击提交按钮将表单元素的数据发送到服务器
<input type=”submit” name=”submit” value=”注册” />
1、submit:提交
运行结果:
脚下留心:按钮上显示什么内容取决于的value的值
重置按钮(<input>)
点击重置按钮,将表单元素的数据恢复到初始值。
<input type=”reset” name=”reset” value=”重置” />
1、reset:重置
运行结果:
普通按钮(<input>)
普通按钮本身不具备任何功能,后面和JS结合起来写自定义功能
<input type=”button” name=”btn” value=”普通按钮” />
1、button:按钮
运行结果:
表单元素总结:
在表单的中我们学的标签有:<form>,<input>,<select>,<option>,<textarea>
input标签的type属性
- text:文本框
- password:密码框
- radio:单选按钮
- checkbox:复选框
- submit:提交按钮
- reset:重置按钮
- button:普通按钮
使用表单
表单的属性
- action:表单元素提交的地址
多学一招:action=””表示将数据提交给当前页面
- method:数据提交的方法,method有两个值,一个是get,一个是post
get和post提交的区别
get | post | |
外观上 | 地址栏上有?,?后面跟的是传输的数据 | 地址栏上看不到数据 |
提交原理 | 将表单元素的数据一个一个的提交 | 将所有数据作为一个整体一起提交 |
提交的数据量上 | 少量数据(最少255字节) | 大量数据 |
安全性上 | 不安全 | 安全 |
灵活性 | 很灵活 | 不灵活 |
多学一招:get使用的频率远远大于post,原因是get很灵活。
框架
在同一个浏览器上显示多个多个框架。在每一个框架中放了一个页面。
使用的标签
- <frameset>:框架集
- <frame>:框架
例题一:在浏览器上显示3个框架,他们分成3行
例题二:在浏览器上显示3个框架,他们分成3列,如下格式:
实现:
例题三:实现如下框架结构
分析
实现:
脚下留心:
1、<frameset>不能放在<body>中,放在<html>中
2、<noframes></noframes>,当浏览器不支持框架标签的时候就执行此标签中的内容。
<noframes>此浏览器不支持框架,请升级</noframes>
3、在HTML5中,框架标签现在已经淘汰
例题:实现在一个框架中点击,目标页面在另一个框架中出现
第一步:给目标框架取名字
第二步:将超链接的target属性的值写成目标框架的名字
运行结果:
内嵌框架(<iframe>)
内嵌框架就是页面中嵌套的框架
<iframe src=”1-表单.html” width=”100″ height=”100″ marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>
- src:内嵌框架中存放的页面
- width和height:内嵌框架的宽度和高度
- marginwidth:内嵌框架中的页面距离内嵌框架的宽度
- marginheight:内嵌框架中的页面距离内嵌框架的高度
- frameborder:内嵌框架边框
HTML发展史
HTML5的发展
脚下留心:在ie9以上(包含)、crome、火狐支持HTML5,老版本的浏览器不支持。
由于HTML5目前还没有正式发布,所以同一个标签在不同的浏览器上解析可能会不同。
HTML新的特点
- 语法更加简单
- 头部声明
<!doctype html>
-
- 简化了字符集声明
<meta charset=”utf-8″>
- 语法更宽松
- 可以省略结束符的标签
li、dt、dd、p、optgroup、option、tr、td、th
-
- 可以完全省略的标签
html、head、body
- 标签语义化,在原来的拼版过程中,通过<div></div>中来存放内容,在HTML5中添加了很多标签,其实作用和<div>一样,但是它更加具有语义。HTML5增加如下常用新标签
- <header> 标记定义一个页面或一个区域的头部
- <nav> 标记定义导航链接
- <article> 标记定义一篇文章内容
- <section> 标记定义网页中一块区域
- <aside> 标记定义页面内容部分的侧边栏
- <footer> 标记定义一个页面或一个区域的底部
html5新增常用新属性
required:必填
placeholder:默认显示内容
autofocus:自动获取焦点
input标签新增的type属性值
- type=”email”,文本框中只能输入email地址
- 代码
<input type=”email” name=”email”>
-
- 运行结果
- type=”date”(目前只有chrome有效)
- 代码:
<input type=”date” name=”date”>
-
- 运行结果
- type=”time”
- 代码
<input type=”time” name=”time”>
-
- 运行结果
- type=”month”
- 代码
<input type=”month” name=”month”>
-
- 运行结果
- type=”week”
- 代码
<input type=”week” name=”week”>
-
- 运行结果
- type=”number”
- 代码:
<input type=”number” name=”number”>
-
- 运行结果
- type=”range”
- 代码
<input type=”range” name=”range” min=”18″ max=”25″>
-
- 运行结果
- type=”color”
- 代码
<input type=”color” name=”color”>
-
- 运行结果
多媒体标签
<embed>
这个标签不是HTML5的,在HTML4中就已经存在,主要用来播放音频和视频
- 音频
<embed src=”music/music.mp3″ autoplay=’0′></embed>
Autoplay=’0’或者false 表示不自动播放
Autoplay=’1’或者true 表示自动播放
- 视频
<embed src=”video/movie.mp4″ width=”300″ height=”300″></embed>
<audio>
HTML5中专门用来播放音频的
方法一:
<audio src=”music/music.mp3″ controls autoplay=”autoplay”></audio>
- controls表示显示控制面板
- autoplay=”autoplay”:自动播放,也可以就写一个autoplay
方法二:
<audio controls autoplay>
<source src=”music/music.mp3″>
<source src=”music/music.ogg”>
</audio>
如果第一个音频找不到,就会播放第二个音频,如果第一个音频播放了,不会播放第二个音频。
<video>
HTML5中专门用来播放视频的
<video controls autoplay>
<source src=”video/movie.mp4″>
<source src=”video/movie.ogg”>
<source src=”video/movie.webm”>
</video>
原理和<audio>一样。