五.各种标签
5.列表标签
列表,是用来布局的。
例如:无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<h4>您最喜欢的食物?</h4>
<ul>
<li>芒果</li>
<li>西瓜</li>
<li>荔枝</li>
</ul>
</body>
</html>
自定义列表,dd是对dt的解释。
6.表单标签
在HTML中,一个完整的表单通常由表单域、表单控件和提示信息三个部分构成。
表单域:<form>会把范围内的表单元素信息提交给服务器
表单元素:
select下拉表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉表单</title>
</head>
<body>
籍贯
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</body>
</html>
在<option>中定义selected="selected",默认选中当前选项
textarea文本域元素:用户输入内容较多时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉表单</title>
</head>
<body>
<form>
今日反馈:
<textarea>
今天想吃芒果!
</textarea>
</form>
</body>
</html>
7.label标签
css:是一种标记语言,主要用于设置HTML页面中的文本内容、图片外形以及版面布局和外观显 示样式。
一.规范
语言规范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
p{
color:blue;
}
</style>
</head>
<body>
<p>今天想吃芒果</p>
</body>
</html>
空格规范:属性值前面,冒号后面,保留一个空格
选择器和大括号中间保留空格
二.选择器
类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
.red {
width: 100px;
height: 100px;
background-color:red;
}
.green {
width: 100px;
height: 100px;
background-color:green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>