文章目录
- 1、背景
-
- 2、背景练习
-
- 3、表格
-
- 4、练习
-
- 5、表单
-
- 6、框架集
-
1、背景
1.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
.box1{
width: 1200px;
height: 1200px;
margin: 20px auto;
/* 设置背景颜色 */
background-color: plum;
/* 将图片作为背景图片
如果图片很大，在页面中只显示左上边一部分
如果背景图片和元素一样大，则会将背景图片全部展示出来
如果背景图片小于元素，背景图平铺背景元素
如果同时设置背景图片和背景色，背景色会作为背景图片的底色
语法 ：
background-image: url("相对路径")
相对路径写在哪，就相对于哪边。例如：写在css样式中，然后在页面中引入样式
*/
background-image: url("../image/car.jpg");
/* background-repeat：用来设置背景图片的重复方式
可选值：
repeat:默认值，背景图片会双方向重复（平铺）
no-repeat:背景图片不会平铺，有多大显示多大
repeat-x：水平平铺一排
repeat-y:垂直平铺一排
*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
1.2 测试结果
2、背景练习
2.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景练习</title>
<style type="text/css">
.box1{
width: 1000px;
height: 1000px;
background-color: #bfa;
margin: 50PX auto;
background-image: url("../image/car.jpg");
background-repeat: no-repeat;
/* 背景图片默认是贴着元素的左上角显示
通过background-position可以设置背景图片在元素中的位置
可选值：top center bottom left right中的两个值来指定背景图片位置
top left 左上
bottom right 右下
center center 居中
只写一个值：默认是center
也可以直接指定偏移量：
水平偏移量：正值：图片向右移动指定的像素
负值：图片向左移动指定像素
垂直偏移量：同上，正值，向下移动
负值：向上移动
第一个元素表示水平偏移量。第二个元素表示垂直偏移量
*/
background-position: center center;
/* background-position: -20px -30px; */
/* 当背景图片的background-attachment设置为fixed的时候，背景图片的定位永远相对于浏览器的窗口 */
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
2.2 测试结果
3、表格
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
</style>
</head>
<body>
<!-- 使用table创建一个表格 -->
<table border="1" width="50%" align="center">
<!-- 在table标签中使用tr表示表格中的一行，有几行就有几个tr -->
<tr>
<!-- 在tr中需要使用td创建单元格,有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<!-- 纵向合并单元格 -->
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>A2</td>
<!-- 横向合并两个单元格 -->
<td colspan="2">A3</td>
</tr>
</table>
</body>
</html>
3.2 测试结果
4、练习
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
/* 设置表格的宽度 */
table {
width: 50%;
/* 边框 */
border: 1px solid balck;
margin: 30px auto;
/*
table可td之间有一个默认距离
通过border-spacing可以设置这个属性
*/
border-spacing:0px;
}
td,th{
border: 1px solid black;
}
/* tr{
background-color: red;
} */
tr:nth-child(even){
background-color: hotpink;
}
tr:hover{
background-color: green;
}
</style>
</head>
<body>
<!-- 使用table创建一个表格 -->
<table>
<!-- 在table标签中使用tr表示表格中的一行，有几行就有几个tr -->
<tr>
<!-- 可以使用th表示标签头中的内容,用法和td一样,不同的地方是会有一些默认的效果 -->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>A01</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>A02</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>A02</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>A02</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>A02</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
</body>
</html>
4.2 测试结果
5、表单
5.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
</style>
</head>
<body>
<!-- 表单的作用就是将用户信息提交到服务器
使用form标签创建一个表单，
form标签属性中必须指定一个action属性，该属性指向的是一个服务器的地址。
当我们提交表单时将会提交到action属性对应的地址 -->
<form action="target.html">
<!-- 用input来创建一个文本框，它的type属性是text
如果系统表单项中的数据会提交到服务器，需要指定一个name属性
name：表示提交内容的名称
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url？查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值
在文本框中，可以指定value的属性值，该值将会作为文本框的默认值显示
-->
<!-- label:中的for指定一个元素的id值，通过点击label中的内容，鼠标自动定位到对应元素框 -->
<label for="num">用户名</label>
<input id="num" type="text" name="username"/>
<br><br>
<!-- 密码框
使用input创建一个密码框，它的type属性值是password 输入的密码不显示 -->
密码：<input type="password" name="password" />
<br><br>
<!-- 单选按钮：
使用input创建一个单选框，它的type属性使用radio
通过name属性进行分组，name属性相同是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会提交到服务器
单选框或者多选框中：默认选中某些值 checked="checked"
-->
性别：<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女
<br><br>
<!-- 多选框：
使用input创建一个单选框，它的type属性使用checkbox
-->
兴趣：<input type="checkbox" name="hobby" value="ymq"/>羽毛球
<input type="checkbox" name="hobby" value="ppq"/>乒乓球
<input type="checkbox" name="hobby" value="zq"/>足球
<br><br>
<!-- 下拉列表：
使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表
默认选中某些值：selected="selected"
-->
喜欢水果：<select name="fruit">
<!-- 在select中可以使用optgroup对选项进行分组， 同一个optgroup中的选项是一组
通过label指定分组名称
-->
<optgroup label="男明星">
<option value="zbs">赵本山</option>
<option value="xsy">小沈阳</option>
</optgroup>
<optgroup label="女明星">
<option value="zw">赵薇</option>
<option value="ym">杨幂</option>
</optgroup>
<!--
在下拉列表中使用option标签来创建一个一个列表项
<option valeu="apple">苹果</option>
<option value="bananal">香蕉</option>
<option value="peach" selected="selected">水蜜桃</option> -->
</select>
<br><br>
<!-- 使用textarea创建一个文本区域 -->
自我介绍：<textarea name="info"></textarea>
<br><br>
<!-- 提交按钮可以将表单中的信息提交给服务器，
用input创建一个提交按钮，它的type属性值是submit
可以通过value属性来指定按钮上的文字 -->
<input type="submit" value="注册">
<!-- 可以创建一个重置按钮，点击按钮后，表单中内容将会恢复为默认值 -->
<input type="reset">
<!-- 使用button可以创建一个单纯的按钮，这个按钮没有任何功能，只能被点击 -->
<input type="button" value="普通按钮">
</form>
</body>
</html>
5.2 测试结果
6、框架集
6.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架集</title>
<style type="text/css">
</style>
</head>
<!-- <body> -->
<!-- 框架集和内联框架的作用类似，都是在一个页面中引入其他的外部页面，
框架集可以引入多个外部页面，内联框架只能引入一个。
使用frameset来创建一个框架集，注意frameset不能和body同时出现在一个页面中，
单独加载的页面，浏览器都需要重新发送依次一次请求，引入几个页面请求几次，用户体验较差
属性：
rows： 指定框架集中的所有框架，一行一行的排列
cols: 指定框架集中的所有框架，一列一列的排列
frameset中可以继续嵌套frameset
-->
<frameset cols="40%,30%,30%">
<!-- 在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame -->
<frame src="dame1.html"></frame>
<frame src="dame1.html"></frame>
<!-- 嵌套一个frameset -->
<frameset rows="50%,50%">
<frame src="dame1.html"></frame>
<frame src="dame1.html"></frame>
</frameset>
</frameset>
<!-- </body> -->
</html>
6.2 测试结果
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)