1. 表格
表格的语法(1) table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里
(2) tr标签: 表示表格中的一行 table row
(3) td标签:要写在tr中,这一行中有几个单元格,就有几列
是真正放数据的地方 table datacell表格的可选标记
(1) caption标签:表格的标题
(2) thead标签:表头部分
(3) tbody标签:表的主体部分
(4) th标签:行/列的标题,文字加粗显示表格的属性
table标签的属性
border=“1px” 设置边框
bgcolor=“green” 设置背景颜色
bordercolor=“yellow” 设置边框颜色
width=“300px” 设置表格的宽度
height=“175px” 设置表格的高度
table表格里的边框是带有间距的,解决方案就是给table标签加:
style=“border-collapse: collapse;“去掉边框间的间距
align=“center” 设置表格本身的水平对齐方式,注意不是文字居中,而是整张表格在页面居中显示
tr标签的属性
align=”” 设置内容的水平对齐方式 left靠左/center居中/right靠右
valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下不规则的表格
td标签的属性:
colspan=“n” 跨列,从当前单元格开始,向右合并n个单元格(n也包含当前单元格)
rowspan=“n” 跨行,从当前单元格开始,向下合并n个单元格(n也包含当前单元格)
被合并的单元格一定得删除!表格的大小
表格的大小是由内容撑起来的
但如果修改了某个单元格的高度,这一行单元格的高度都会随之改变
同理,如果修改了某个单元的宽度,这一列单元格的宽度都会随之改变
2 列表
有序列表<ol> order list 有序列表<li></li> list item 列表项<li></li></ol>
无序列表
<ul> unorder list 无序列表<li></li> list item 列表项<li></li></ul>
属性
有序列表的属性
start=“4” 指定列表项编号的起始值
type=“1” 指定列表项编号的类型,默认值1,代表阿拉伯数字
a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字
无序列表的属性
type="disc"实心圆,默认值,还有circle空心圆 square方块 none没有标识列表的嵌套
ul/ol的直接子元素必须是li
所有被嵌套的内容都需要写在li中定义列表【了解】
常用来给一类事物定义的情形,比如名词解释,字典等
<dl> 定义列表Definition list <dt>这里要被解释的名词</dt> Definition Type<dd>这里写具体的解释内容</dd> Definition Description</dl>
3 表单(重点)
特点(1)提供了一些可视化的输入控件
(2)自动收集整理用户输入的内容,并提交给服务器表单的语法和属性
<form></form>
可以添加的属性:
(1) action=“url” 向哪个地址提交数据,如果不写,会提交给当前页面本身
(2) method=“get” 表单数据的提交方式
(3) enctype=“” 指定表单数据的编码方式,定义表单允许传什么类型的数据给服务器
application/x-www-form-urlencoded 默认值,允许传递任意字符(不能传文件)
multipart/form-data 可以传递文件和任意字符
text/plain 允许传递普通字符(& = * @等符号都不是普通字符)
3. 表单的控件分类
(1)input元素
(2)select和option下拉选择框
(3)textarea 多行文本域
(4)label关联控件
4. input元素
公共属性:
type 设置input元素的类型,默认值是text
name 为控件起个名字,注意:form表单必须写name,不写提交不了此项数据
value 保存用户输入的值,提交给服务器后,后期可以.value获取提交的用户
输入值
如果控件是按钮,value是按钮上显示的文本
(1)文本框与密码框
type=“text” 普通文本输入框
type=“password” 密码框
属性: maxlength=“5” 设置输入框可输入的最大长度
placeholder=“” 提示文本
value=“” 初始值,不写标签中也会默认存在,值是空字符串
(2)按钮
type=“submit” 提交按钮
自动收集整理用户输入的数据(有name属性的控件),提交发送请求
type=“reset” 重置按钮
将表单控件初始化,恢复到初始状态,注意!不是清空
type=“button” 普通按钮
需要后期绑定事件,执行对应的JS脚本
注意:按钮上的value代表的是按钮上显示的文字
(3) 单选框与多选框
type=“radio” 单选
type=“checkbox” 多选
属性:
name(必须加),为控件起名并用于分组
一组单选框/多选框的名称必须相同,才能实现单选/多选效果
value必须写,不然提交的就是on
checked表示当前项被默认选中,是一个单值属性
(4) 文件上传
请选择您要上传的文件
使用的前提:method=“post” enctype=“multipart/form-data”
multiple 可以提交多个文件,也是一个单值属性
5. select和下拉选择框
<select><option></option></select>
提交的时候,如果没有给option设置value属性,提交的就是option标签之间的文本,但如果设置了option的value属性,提交的就是value的值
selected 表示该选项默认被选中
multiple 表示下拉选框可以多选,按住Ctrl就可以选择多个选项
6. textarea多行文本域
<textarea name="content"></textarea>
属性:
cols=“30” 文本域的列数,改变的是宽度
rows=“10” 文本域的行数,改变的是高度
注意:默认的文本域大小是可以被用户随意拖拽改变的,想要禁用拖拽:
style=“resize: none;”
7.label关联控件
用于进行form表单中文本和控件的关联,单击文本,效果如同单击控件
<label for="要关联的控件的id值"></label>
8. 表单
input新表单元素(10个)
1.数字控件
<input type="number" step="3" min="10" max="30" name="age">
属性:
min 最小值
max 最大值
step 步长,值递增或递减的大小,默认为1
注意:这个控件无法阻止用户自行输入!
2. 颜色控件
<input type="color">
提供了一个取色器,可以选择不同的色值,默认黑色
3. 日期控件
<input type="date">
只出现日期的选择,因为格式比较单一,因此自定义效果较强的日期插件更加美观合理
4. 月份控件
<input type="month">
星期控件
<input type="week">
邮箱控件
<input type="email">
会有一个输入邮箱地址的文本框,验证必须有@,同时@前后都有内容
7.搜索控件
<input type="search">
提供了一个快速删除的小叉叉
URL控件
<input type="url">
验证内容必须有http://1 这个1是随便写的,代指内容
注意:数据的校验还是要放在后端用JS+正则去判断
电话号码控件
<input type="tel">
电话类型在PC浏览器中与text一样,手机端不一样,会有模拟输入的小键盘
范围控件
<input type="range">
属性:
min 最小值,表示区间的最开始
max 最大值,表示区间的最末尾
step 步长,表示数字移动的跨度
value 用来保存用户拖拽的值,也可以先自定义一个值作为初始值
作用:可以控制区间,比如:音量 地图缩放 进度
注意:设置步长时尽量选取可以除得尽的值,否则区间中有一部分值会无法选中
9. 浮动框架
iframe是在一个html页面中,引入其它的html页面
属性:
src=“url” 被引入资源的路径
width=“” 被引入资源在本页面显示的宽度
height=“” 被引入资源在本页面显示的高度
scrolling=“no” 是否需要滚动条,默认值auto有滚动条 no不要滚动条
frameborder=“0” 去掉被引入页面的边框线
优势与劣势:
我们可以直接调用已经写好的静态页面,比较方便页面被引用在多个页面中,可以实现复用样式不好控制有额外的链接,请求的次数会增加,速度会变慢
10.结构化标签
h5新增了带有结构语义的标签,来取代div
虽然在用户看来和之前使用div没有区别,但带语义的标签可以增加代码的可读性,很方便的实现页面各个部分的划分,让网络爬虫更快找到
但注意:低版本的浏览器会不兼容,所以先作了解
<header> </header>
定义网页的头部,或者某个区域的顶部
<nav></nav>
定义网站的导航链接
<section></section>
定义网页的主体
<aside> </aside>
网页的侧边栏
<article> </article>
定义与文字相关的内容,比如论坛 回帖
<footer> </footer>
定义网页的底部,或者某个区域的底部
html 表格 列表 表单 select和下拉选框 textarea多行文本域 label关联控件 表单 浮动框架 结构化标签