一 表格(双)
1. 表格的语法
(1) table标签:表示表格的开始与结束,表格的所有内容都需要写这一对标签里
(2) tr标签:表示表格中的一行table row row:行 (3) td标签:表示表格中的一个单元格,是真正存放数据的地方table datacell(几个单元格就有几列) (4) th标签:行/列的标题,文字加粗显示,居中
|
快捷方法: tr*2>td*3
2. 表格的可选标记
(1) caption标签:表格的标题
(2) thead标签:表头部分
(3) tbody标签:表的主体部分
(4) th标签:行/列的标题,文字加粗显示
|
3. 不规则的表格(合并单元格)
colspan=”n”跨列,从当前单元格开始,向右合并n个单元格(n也包含当前单元格)——横
rowspan=”n”跨行,从当前单元格开始,向下合并n个单元格(n也包含当前单元格)——竖
被合并的单元格一定得删除!
|
<table border=""1px">
<tr>
<!-- 横向合并 -->
<td colspan="2">1-1</td>
<!-- 需要注释掉1-1右边一格 -->
<!-- <td>1-2</td> -->
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<!-- 纵向合并 -->
<td rowspan="2">2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<!--需要注释掉2-2下面一格 -->
<!-- <td>3-2</td> -->
<td>3-3</td>
</tr>
</table>
4. 表格的属性
table标签的属性
border = "1px" 设置边框
table表格的边框是带有间距的
解决方案:给table标签加style="border-collapse: collapse;"去掉
|
5. 表格的大小
表格的大小是由内容撑起来的
如果修改了某个单元格的高度,这一行单元格的高度都会随之改变
同理,如果修改了某个单元格的宽度,这一列单元格的宽度都会随之改变
|
二 列表
1. 有序列表(<ol>、<li>)
<ol> order list
<li> </li> 列表项 list item
<li> </li>
</ol>
|
2. 无序列表(<ul>、<li>)
<ul> unorder list
<li> </li> 列表项 list item
<li> </li>
</ul>
|
3. 属性
有序列表的属性
start=”4” 指定列表项编号的起始值
type=”1”指定列表项编号的类型,默认值1,代表阿拉伯数字
a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字
|
无序列表的属性
type=“disc” 默认值,实心圆
circle 空心圆 square方块 none没有标识
|
4. 列表的嵌套(ul>li*3)
ul/ol 的直接子元素都必须是li
所以,所有被嵌套的内容都需要写在li中
<h3>数据管理</h3> <ul type="none"> <li> <h4>商品管理</h4> <ul type="none"> <li>商品列表</li> <li>多条件搜索</li> <li>添加商品</li> </ul> </li> <li> <h4>用户管理</h4> <ul type="none"> <li>用户列表</li> <li>用户检索</li> </ul> </li> </ul>
|
5. 定义列表【了解】
<dl> 定义列表 Definition List:用来给一类事物定义,比如名词解释、字典等
<dt>这里是被解释的名词</dt> 定义类型 Definition Type
<dd>这里是上面名词的解释内容</dd> 定义的解释 Definition Description
</dl>
|
三 表单(重点) form
1. 表单的语法
表单提供了一些可视化的控件,会自动收集整理用户输入的内容并提交给服务器
<form></form>
可以添加的属性:
action=”url”向哪个地址提交数据,就写哪个地址,如果不写,会提交给当前页面本身
|
2. 表单的控件分类
(1) input元素
(2) select和option下拉选择框
(3) textarea多行文本域
(4) label关联控件
|
3. input元素
公共属性:
type 设置input元素的类型,默认值是text
value 用来保存用户输入的值,也可以设置默认值
如果控件是按钮,value是按钮上显示的文本
name 为控件起个名字,注意:form表单必须写name,否则提交不了此项数据
|
(1) 文本框与密码框
type=”text” 普通文本输入框
type=”password” 密码框
属性:
maxlength="5" 设置输入的最大长度
placeholder="请输入用户名" 提示文字
value=”” 不写此属性默认也会存在,值是用户输入的值
|
(2) 按钮
type=”submit”提交按钮,会自动收集整理用户输入的数据,提交给服务器
type=”reset”重置按钮,将表单控件初始化,恢复成初始状态,注意不是清空
type=”button” 普通按钮,后期要结合JS代码使用
<button></button> 等价于 type=”button”
注意:按钮的value代表的是按钮上显示的文本
|
(3) 单选框与多选框
type=”radio” 单选框
type=”checkbox” 多选框
属性:
name(必须加),为控件起名便于分组,一组单选使用同样的名字,才可以实现单选效果
且表单form中的控件数据想要提交,必须为控件起名
value(必须加),不然提交的值是on
checked 单值属性,表示当前项是默认被选中的状态
|
(4) 文件上传
请选择您要上传的文件<input type="file" name="ufile" multiple>
可以设置属性multiple(单值属性),就可以一次上传多个文件了
TIPS:按住Ctrl可以选中多个文件
|
4. select和option 下拉选择框
<select>
<option></option>
</select>
提交的时候,如果没有给option设置value,提交的就是option之间的文本
但如果设置了option的value,提交的就是value的值
selected表示当前选项默认被选中
multiple表示该下拉选框可以多选,按住Ctrl就可以选中多个选项
|
<!-- 下拉选择框 -->
爱吃的菜
<select name="food">
<option>北京豆汁儿</option>
<option>潮汕砂锅粥</option>
<option>贵州折耳根</option>
</select>
最喜欢的运动
<!-- 多选 multiple -->
<select name="sports" multiple>
<option value="1">游泳</option>
<option value="2">运动</option>
<!-- 默认选中 selected -->
<option value="3" selected>敲代码</option>
</select>
5. textarea 多行文本域
<textarea rows="10" cols="30" name="content" style="resize: none;"></textarea>
属性:
rows="10" 文本域的行数,改变的是高度
cols="30" 文本域的列数,改变的是宽度
注意:默认的文本域大小可以被用户随意拖拽改变,想要禁用拖拽:
style=”resize:none;”
|
6. label关联控件
用于进行form中文本和控件的关联,点击文本,效果等同于单击控件
<label for="被关联的控件的id值">自定义的文本内容</label>
|
<!-- label关联 -->
<input type="Checkbox" name="yes" id="y"/>
<label for="y">请同意此协议</label>
四 H5新表单元素
input新表单元素
(1)数字控件 <input type="number" step="7" min="10" max="30"/> 属性: min 最小值 max 最大值 step 步长,值每次递增或递减的大小,默认的步长为1 注意:此控件无法阻止用户自行输入数据 |
(2)颜色控件 <input type="color"/> 提供了一个取色器,默认的颜色是黑色 |
(3)日期控件 <input type="date"/> 只出现日期的(年月日)的选择,后续还可以使用更加美观的日期插件 |
(4)月份控件 <input type="month"/> 只出现年月的选择 |
(5)星期控件 <input type="week"/> 只出现年周的选择 |
(6)搜索控件 <input type="search"/> 提供了一个快速删除所有输入数据的小叉叉 |
(7)范围控件 <input type="range" min="0" max="20" step="2"/> 属性: min 最小值,表示区间的最开始的值 max 最大值,表示区间的最末尾的值 step 步长,表示数字移动的范围跨度 作用: 可以控制区间,比如:音量 地图缩放 进度 注意:设置步长的时候尽量选取可以除得尽的值,否则区间中会有部分值无法选中 |
<form>
<!-- input控件 -->
年龄:<input type="number" name="age" min="10" max="30"/><br />
幸运色:<input type="color" name="color"/><br />
生日日期:<input type="date" name="birthday"/><br>
月份:<input type="month" name="month" ><br>
星期:<input type="week" name="week" ><br>
搜索:<input type="search" name="search"/><br>
缩放:<input type="range" min="0" max="20" step="2"/>
</form>
五 浮动框架
iframe 是指在一个html页面中,引入其它的html页面
属性: src="被引入的资源的url " width="设置被引入资源在本页面的宽度" height="设置被引入资源在本页面的高度" scrolling="no" 是否需要拖拽条,no表示不要 frameborder="0" 去掉被引入资源的边框线 |
优劣势:
|
<form>
<iframe src="http://www.4399.com" frameborder="0"></iframe>
</form>
六 结构化标签
h5新增了带有结构语义的标签,来取代div 虽然在用户看来和之前使用div没有区别,但带语义的标签可以增加代码的可读性,而且方便实现页面各个部分的划分,让网络爬虫更快找到 但注意:低版本的浏览器可能会出现不兼容的问题 |
<header></header> 定义网页的头部,或者某个区域的顶部 <nav><nav/> 定义网页的导航区域 <section></section> 定义网页的主体区域 <aside></aside> 定义网页的侧边栏 <article><article> 定义与文字相关的内容,比如论坛、回帖 <footer></footer> 定义网页的尾部,或者某个区域的底部 |
拓展
多媒体标签
<!-- 多媒体标签 --> <!-- video用于在页面添加视频 --> <video src="video/country.mp4" width="400px" controls></video> <!-- audio用于在页面添加音频 --> <audio src="audio/bird.mp3" controls></audio>
|
属性
src 是指被引入资源的路径
controls 用于添加音视频的控制组件
|