HTML+CSS
- 一、网页
- 二、HTML、CSS入门体验
- 1、VSCode快捷键
- 2、双标签、单标签
- 3、标签属性
- 3.1 title属性:鼠标悬浮出现的内容
- 3.2 src属性 :定义图片路径
- 3.3 align属性 :居中样式
- 3.4 atl属性 :图片失败加载时显示定义的内容
- 3.5 href属性 :超链接标签跳转地址
- 3.6 target属性: 定义超链接页面多窗口打开
- 3.7 id属性: 绑定
- 3.8 列表的type属性: type属性的值可以设置列表项目的符号
- 3.9 列表的start属性: 修改起始序号
- 3.10 table标签的修饰属性:10种
- 3.11 tr标签的修饰属性
- 3.12 td 单元格标签属性
- 3.13 表格合并属性
- 3.14 input 表单文本框标签type、name、checked属性
- 3.15 select下拉菜单selected 、multiple、size属性
- 3.16 表单label标签的for属性
- 3.17 input标签 — value设置默认值属性、readonly只读、disabled禁用属性
- 3.18 表单数据采集和提交 — name属性
一、网页
在浏览器中运行的一个文件就是网页
网页组成分别是:HTML、CSS和JavaScript。.
二、HTML、CSS入门体验
1、VSCode快捷键
- alt + b 快速打开浏览器页面
- alt + ↑ ↓ 交换上下行
- alt + shift + ↑ ↓ 复制行
- Ctrl + / 注释
- 标签{文本内容} : 回车生成相应内容
- 标签名{标签文本内容}*标签重复次数 : 生成重复代码
- 标签$ { 标题文 本 内 容 ∗ 标 签 重 复 次 数 : 本内容 * 标签重复次数 : 本内容∗标签重复次数:符号实现依次递增的序号
2、双标签、单标签
双标签
单标签
3、标签属性
- 书写在标签自己本身
- 可以为标签提供一些额外信息或对标签进行修饰
- 单标签和双标签都可以书写属性
- 标签属性 = 属性名 + 属性值
- 多个属性之间要使用一个空格分隔开
- 标签名和属性名并不冲突
3.1 title属性:鼠标悬浮出现的内容
title属性修饰标签效果:在浏览器中,当我们把鼠标悬停在这个标签上一段时间以后,title的内容会出现
可以用于h、img等等标签
代码
hello word
<h1 title="我是一个标题">HTML</h1>
效果图
3.2 src属性 :定义图片路径
<img src="01.png" alt="">
效果
3.3 align属性 :居中样式
align=“center” 居中显示
代码
<!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></title>
</head>
<body>
<h1 align="center">珍珠鸟</h1>
<h4 align="center">来源:⼩学的语⽂课⽂</h4>
<h3> 1.小标题1</h3>
<p align="center">
真好!朋友送我⼀对珍珠鸟,我把它们养在⼀个⽵条编的笼⼦⾥。笼⼦⾥有⼀团⼲草,那是⼩鸟⼜舒适⼜温暖的巢。
</p>
<h3>2.小标题2</h3>
我把笼⼦挂在窗前。那⼉有⼀盆茂盛的法国吊兰。我让吊兰的长满绿叶的藤蔓覆盖在鸟笼上,珍珠鸟就像躲进幽深的丛林⼀样安全,从中传出的笛⼉般⼜细⼜亮的叫声,也就格外轻松⾃在了。
<h3>3.小标题3</h3>
三个⽉后,那⼀团愈发繁茂的藤蔓⾥边,发出⼀种尖细⼜娇嫩的叫声。我猜到,是它们有了雏⼉。我呢?决不掀开叶⽚往⾥看,连添⾷加⽔时也不睁⼤好奇的眼睛去惊动它们。过不多久,忽然有⼀个⼩脑袋从叶间探出来。正是它们的雏⼉!
</body>
</html>
效果图
3.4 atl属性 :图片失败加载时显示定义的内容
alt属性定义的图片描述,当图片加载失败的时候才会显示
3.5 href属性 :超链接标签跳转地址
href的值是目标页面的地址和图片的src属性类似,可以使用相对路径和绝对路径
使用
3.6 target属性: 定义超链接页面多窗口打开
_self是默认值
3.7 id属性: 绑定
实现页面跳转
代码
<!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>
<h1 align="center" id="box5">关于千峰教育</h1>
<p align="center">
<a href="#box1">前锋简介</a>
<a href="#box2">成长足迹</a>
<a href="#box3">千峰荣誉</a>
<a href="#box4">千峰风采</a>
</p>
<p align="center" id="box1">
<img src="img/01.jpg">
<a href="#box5">
<button >回到顶部</button>
</a>
</p>
<p align="center" id="box2">
<img src="img/02.jpg" >
</p>
<p align="center" id="box3">
<img src="img/03.jpg" >
</p>
<p align="center" id="box4">
<img src="img/04.jpg" >
</p>
</body>
</html>
效果:点击千峰简介、成长足迹、千峰荣誉、千峰风采可以跳到对应的页面,点击对到顶部,回到顶部
3.8 列表的type属性: type属性的值可以设置列表项目的符号
3.9 列表的start属性: 修改起始序号
代码
<!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>
<ol type="A" start="3">
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
</body>
</html>
效果
3.10 table标签的修饰属性:10种
- th 加粗
table标签的修饰属性:
- border 绘制表格线条
- height 表格高度
- width 表格宽度
- cellspacing:定义是单元格之间的距离
- cellpadding:定义单元格边框和文本之间的距离
- align:表格对齐方式 left、center、right
- bgcolor:修饰表格的背景颜色
- bordercolor:用来修饰表格边框的颜色
代码
<!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>
<table border="1" height="150" width="500" cellspacing="0" cellpadding="0"
align="center" bgcolor="yellow" bordercolor="red">
<tr>
<th>序号</th>
<th>王者英雄</th>
<th>王者性别</th>
<th>所属位置</th>
<th>详情</th>
</tr>
<tr>
<td>1</td>
<td>王昭君</td>
<td>女</td>
<td>中路</td>
<td><a href="">点击查看详情</a></td>
</tr>
<tr>
<td>2</td>
<td>亚瑟</td>
<td>男</td>
<td>对抗路</td>
<td><a href="">点击查看详情</a></td>
</tr>
<tr>
<td>3</td>
<td>虞姬</td>
<td>女</td>
<td>发育路</td>
<td><a href="">点击查看详情</a></td>
</tr>
</td>
</table>
</body>
</html>
效果
3.11 tr标签的修饰属性
- height 表格行高度
- bgcolor:修饰表格行的背景颜色:后代标签属性言染的优先级是高于父级标签的
- align:水平对齐方式 left、center、right。默认为左侧对齐
- valign:垂直对齐方式 top、middle、bottom。默认居中对齐
3.12 td 单元格标签属性
td标签的修饰属性:
- height 单元格高度。影响整个行
- width 单元格宽度。影响整个列
- bgcolor:修饰单元格的背景颜色:后代标签属性言染的优先级是高于父级标签的
- align:水平对齐方式 left、center、right。默认为左侧对齐
- valign:垂直对齐方式 top、middle、bottom。默认居中对齐
3.13 表格合并属性
- rowspan 横向合并
- colspan 水平合并
代码
<!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>
<table width="600" height="400" border="1" cellspacing="0" cellpadding="0">
<!--第一行1个td,第1个td水平合并colspan
第二行4个td
第三行3个td,第1个td垂直合并rowspan
第四行3个td,第2个td垂直合并rowspan
第五行2个td,第1个td水平合并colspan
第六行3个td-->
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</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>课程表</title>
</head>
<body>
<table width="540" height="385" border="1" cellspacing="0" cellpadding="0" >
<tr align="center" bgcolor="deepskyblue">
<th ></th>
<th >星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center" bgcolor="skyblue">
<td >早自习</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="4" bgcolor="skyblue">上午</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="4" bgcolor="skyblue">下午</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="skyblue">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center" bgcolor="skyblue">晚自习</td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
效果
3.14 input 表单文本框标签type、name、checked属性
- type属性:text(默认)、password、radio、checkbox、file
- name属性:单选框控件必须成组使用才有意义,每组至少需要两个单选框;“组”是通过name属性来建立的,凡是name值相同的就是一组;同组的单选框,只有一个会处在选中状态,其他的会自动呈现为未选中状态。
- checked属性:默认选中
代码
<!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 action="">
请输入用户名:<input type="text"> <br>
请输入密码:<input type="password"> <br>
选择性别:<input type="radio" name="gender">男<input type="radio" name="gender" checked>女 <br>
前端基础包括:
<input type="checkbox" name="" id="">HTML
<input type="checkbox" name="" id="">CSS
<input type="checkbox" name="" id="" checked>JS <br>
附件:
<input type="file">
</form>
</body>
</html>
效果
3.15 select下拉菜单selected 、multiple、size属性
- selected 属性:默认选中
- multiple属性:多选下拉菜单;size属性可以定义控件的默认可见行数
代码
<!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 action="">
出生日期
<select >
<option value="">1991</option>
<option value="" selected>1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
</select> <br>
<select name="" id="" multiple size="8">
<option value="">音乐</option>
<option value="">电影</option>
<option value="">短视频</option>
<option value="">游戏</option>
<option value="">盲盒</option>
<option value="">漫画</option>
<option value="">小说</option>
<option value="">前端</option>
</select>
</form>
</body>
</html>
效果
3.16 表单label标签的for属性
- lable标签:点击输入框控件的标题文本,输入框也可以获得焦点。但是要设置for属性才生效
- lable标签的for属性,值是绑定input标签的id属性
代码
<!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>lable标签</title>
</head>
<body>
<form action="">
<label for="username">请输入用户名:</label>
<input type="text" name="" id="username">
</form>
</body>
</html>
效果
3.17 input标签 — value设置默认值属性、readonly只读、disabled禁用属性
- 只读的表单控件值是会被收集和发送给后端的,禁用的表单控件值是不会被收集和发送给后端的
- disabled属性可以添加给任何的表单控件
代码
<!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>lable标签</title>
</head>
<body>
<form action="">
<label for="username">请输入用户名:</label>
<input type="text" name="" id="username"><br>
您的手机号为:<input type="text" value="15922687756" readonly> <br>
选择性别:
<input type="radio" name="gender" >男
<input type="radio" name="gender" >女
<input type="radio" name="gender" disabled>保密
</form>
</body>
</html>
效果
3.18 表单数据采集和提交 — name属性
- 收集表单数据,需要给表单控件添加name属性,有了这个name,浏览器会自动为我们收集表单的控件数据
<!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 action="">
手机号:<input type="text" name="pnumber" id=""> <br>
密码框:<input type="password" name="password" id=""><br>
<input type="submit" value="登录">
</form>
</body>
</html>
效果