- 图片标签:
<img />
- 音频视频:
<audio></audio>
属性 说明 src 音频资源地址 controls 显示播放控制条,值为controls,可以不写 loop 是否进行循环播放,值为loop,可以不写 autoplay 是否进行自动播放,值为autoplay,可以不写 - 谷歌浏览器配置自动播放
- 地址栏输入:
chrome://flags
- 搜索选项
Autoplay policy
,设置为:No user guester is required
- 地址栏输入:
- 谷歌浏览器配置自动播放
- 视频标签:
<video></video>
- 音频选项视频标签都有:src、controls、loop、autoplay
- 多出来的选项:width、height用于设置尺寸,单独设计会等比缩放,同时设置会有补白
表格(table)
- 说明:展示效果类似于excel的行列形式
table
:表格标签,所有表格相关的内容都要放在其中属性 说明 width 宽度 height 高度 align 对齐方式(left、center、right) bgcolor 背景色 border 边框尺寸 bordercolor 边框颜色 tr
:表示表格中的一行属性 说明 bgcolor 背景色 align 水平对齐方式(left、center、right) valign 垂直对齐方式(top、middle、bottom) td
:表示一行中的一个单元属性 说明 bgcolor 背景色 align 水平对齐方式(left、center、right) valign 垂直对齐方式(top、middle、bottom) colspan 列合并 rowspan 行合并 th
:与td
一样都是表示一个单元格,只是样式不同,用于显示表头信息caption
:用于设置表格的标题
分帧(iframe)
- 说明:简单理解就是一个页面中插入另外一个页面
- 属性:
属性 说明 src 指定加载页面的地址 width 宽度 height 高度 frameborder 是否显示边框,0表示隐藏,1表示显示 scrolling 滚动条显示方式:yes表示一直显示,no表示不显示,auto自动显示 name 设置名字,可以作为a标签的打开方式之一
分帧(frameset)
- 说明:替代body标签定义页面框架,可以指定尺寸,也可以指定比例
frameset
属性 说明 noresize 禁止拖拽修改尺寸 frameborder 是否显示边框,0表示隐藏,1表示显示 border 边框宽度 bordercolor 边框颜色 rows 垂直方向划分尺寸,*表示其他所有 cols 水平方向划分尺寸 frame
:表示frameset
中的每一帧数据,其实就是一个页面noframes
:针对不支持frameset
的低级浏览器的兼容写法
表单(form)
- 说明:服务器用于收集用户信息,如:注册、登录等
form
:表单,所有要提交的内容必须放在其中属性 说明 action 提交地址,默认是当前地址 method 提交方法,get是默认的,数据会拼接在url后,post数据不可见 input
:表单中最重要的组成部分属性 说明 type 类型,默认text,普通文本框 name 名称,不指定无法提交数据 size 设置尺寸(宽度) 最大输入字符个数 value 文本框的内容,一般用于无法输入的类型中 placeholder 设置占位提示信息 readonly 只读状态 disabled 禁用状态 type
属性取值
取值 说明 text 普通文本框,默认类型 password 密文文本 submit 提交按钮 hidden 隐藏字段,与text类型一样,只是不可见而已 number 数值类型的文本框,可以进行加1减1操作,还可以进行min、max的设置 radio 单选框,多个互斥的选项name属性要一致,提交的值要通过value指定<br />默认选中状态checked属性设置 checkbox 复选框,用法同单选框 file 文件上传,需要对form进行相应的配置<br /> <form method="post" enctype="multipart/form-data"></form>
select
,下拉选择框- 说明:他是一个组合的提交内容,select需要设置name属性
- 选项:每个选项是一个option标签,需要设置value属性
- 选中:默认选中使用selected属性设置
- 尺寸:通过size属性可以设置可见选项的数量
textarea
:文本域,可以输入一段文本,不要在标签内学多余的任何内容属性 说明 rows 设置行数 cols 设置列数 placeholder 占位提示信息 value 文本内容 name 名称 - 表单提交
方式 数码 input type="submit" / 标准的提交按钮 input type="button" / 普通按钮,但是不能提交,可以结合JS完成提交功能 input type="image" / 图片形式的按钮,通过src指定图片资源,可以进行提交 button/button 标准按钮,可以进行提交
head标签
- 说明:用于存放对页面进行说明的内容,不是用于显示
- 示例:
<head> <!-- 简化方案设置字符集 --> <meta charset="utf-8"> <!-- 设置标题 --> <title>标题</title> <!-- 设置关键字 --> <meta name="keywords" content="PYTHON培训,PYTHON开发" /> <!-- 设置描述 --> <meta name="description" content="良心做教育" /> <!-- 标准方案设置字符集 --> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- 定时刷新 --> <meta http-equiv="refresh" content="3; url=http://www.qfedu.com" /> <!-- 加载CSS文件 --> <link rel="stylesheet" type="text/css" href="xxx.css"/> </head>
无意义标签
- 行标签:
<span></span>
- 块标签:
<div></div>、<header></header>、<section></section>、<footer></footer>
- 说明:这些标签本身没有什么特殊意义,但是后面结合CSS与JS一起使用就非常灵活了
取消的DTD
- 说明:文档类型定义
- H5统一使用:
<!DOCTYPE html>
练习:
- 书写一个3行3列的表格,设置表头、标题,合并单元格1和4,8和9
- 实现一个点击联动效果
- 写一个注册表单,内容尽量全面,可以结合表格对齐样式
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~