一 表格（双）
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 用于添加音视频的控制组件
|
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
