目录一,表格标签–1,概述–2,总结二,表单标签–1,测试–2,总结–3,form提交数据三,form表单的练习四,CSS-1,概述-2,语法-3,入门案例五,选择器总结
一,表格标签
向网页中加入表格
–1,概述
测试 表格标签
–2,总结
table 标签用来表示表格
tr 标签表示表里的一行
td 标签表示行里的列
border 设置边框
cellspacing 设置单元格的间距
bgcolor 设置背景色
width 设置宽度
height 设置高度
colspan 合并列
rowspan 合并行
二,表单标签
用来提交数据,本质上就是在一个表格标签的外面用form包起来
2021071214502721.png
–1,测试
测试 表单标签
注册表单
| 用户名: |
| 密码: |
| 确认密码: |
| 昵称: |
| 邮箱: |
| 性别: |
男
女
| 爱好: |
篮球
足球
乒球
| 城市: |
北京
上海
山东
东北
| 头像: |
| 验证码: |
| 自我描述: |
请输入自我描述~~
|
|
–2,总结
form标签用来提交表单里的数据
table标签用来实现表格
tr标签用来表示表格里的行
td标签表示行里的列
img标签表示插入图片
select标签表示下拉框,option是下拉选项
textarea标签是文本域
input表示输入框,类型很丰富
text类型是普通的文本输入框
password是密码输入框
email是邮箱的输入框
file是上传文件
radio是单选框
checkbox是多选框
button是普通的按钮
submit是提交按钮,比button多了数据提交的功能
align属性用来设置元素的位置center是居中
bordercolor设置边框的颜色
–3,form提交数据
–1,提交按钮必须submit类型,不然不会提交数据的
–2,哪些数据需要提交的话,必须在网页上配置name属性
–3,提交的数据都在地址栏中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314 ,其中username是页面中name属性的值,1314是网页中输入的数据
测试 表单标签
注册表单
| 用户名: |
| 密码: |
| 确认密码: |
| 昵称: |
| 邮箱: |
| 性别: |
男
女
| 爱好: |
篮球
足球
乒乒球
| 城市: |
北京
上海
山东
东北
| 头像: |
| 验证码: |
| 自我描述: |
请输入自我描述~~
|
|
三,form表单的练习
2021071214502722.png
练习form表单
学生信息管理系统MIS
|
姓名:
|
|
年龄:
|
|
性别:(单选框)
男
女
|
爱好:(多选)
乒乓球
爬山
唱歌
|
学历:(下拉框)
本科
专科
高中
小学
|
入学日期:
|
|
四,CSS
-1,概述
用来修饰网页的,变得好看。层叠样式表stylesheet
-2,语法
td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }
-3,入门案例
测试 css修饰网页
/* 语法:选择器{ 属性名:属性值; } */
/* 给所有div */
div{
color:green; /* 设置字的颜色红色 */
background-color: #008000;/* 设置背景色 */
}
我是div1
我是div2
我是div3
我是div4
我是div5
五,选择器
测试 css的选择器
/* 1. 标签名选择器: */
/* 练习1:选中标签名叫div的所有元素*/
div{
background-color: #008000; /* 设置背景色 */
color: black; /* 设置字的颜色*/
font-size: 30px ; /* 设置字号 */
font-family: "宋体" ; /* 设置字体 */
}
/* 练习2:选中标签名叫input的所有元素*/
input{
background-color: pink; /* 设置背景色 */
}
/* 2. class选择器:先设置class属性 + 通过.获取class的值 */
.a{ /* 选中网页中所有class=a的元素们,其中class的值可以重复*/
color: yellow;/* 字的颜色 */
}
/* 3. id选择器:先设置id属性 + 通过#获取id的值 */
#x{ /* 选中网页中id=x的元素,由于id的值不能相同,所以只选中了一个元素*/
font-size: 100px; /* 加大字号 */
}
我是div1
我是div2
我是div3
我是span1
我是span2
我是p
总结
本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注知鸟论坛的更多内容! |