HTML+CSS（一）

一兴一熠

已于 2022-11-17 13:14:49 修改

阅读量194

点赞数

分类专栏：前端文章标签： html css

于 2022-11-16 07:38:44 首次发布

本文链接：https://blog.csdn.net/Joyechen1/article/details/127877252

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了HTML和CSS的基础知识，包括VSCode快捷键、标签属性如title、src、align、alt、href、target、id等，并展示了如何使用这些属性进行网页元素的样式设置和交互设计，例如列表类型、表格属性、表单控件及表单数据提交。通过实例代码详细解析了各种标签和属性的用法，帮助初学者快速入门网页制作。

摘要由CSDN通过智能技术生成

一、网页

在浏览器中运行的一个文件就是网页
网页组成分别是：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> &nbsp; &nbsp; 1.小标题1</h3>
    <p align="center">
        &nbsp; &nbsp; &nbsp; &nbsp;真好！朋友送我⼀对珍珠鸟，我把它们养在⼀个⽵条编的笼⼦⾥。笼⼦⾥有⼀团⼲草，那是⼩鸟⼜舒适⼜温暖的巢。
    </p>
    <h3>2.小标题2</h3>
    &nbsp; &nbsp; &nbsp; &nbsp;我把笼⼦挂在窗前。那⼉有⼀盆茂盛的法国吊兰。我让吊兰的长满绿叶的藤蔓覆盖在鸟笼上，珍珠鸟就像躲进幽深的丛林⼀样安全，从中传出的笛⼉般⼜细⼜亮的叫声，也就格外轻松⾃在了。
    <h3>3.小标题3</h3>
    &nbsp; &nbsp; &nbsp; &nbsp;三个⽉后，那⼀团愈发繁茂的藤蔓⾥边，发出⼀种尖细⼜娇嫩的叫声。我猜到，是它们有了雏⼉。我呢？决不掀开叶⽚往⾥看，连添⾷加⽔时也不睁⼤好奇的眼睛去惊动它们。过不多久，忽然有⼀个⼩脑袋从叶间探出来。正是它们的雏⼉！
</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>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td rowspan="4" bgcolor="skyblue">下午</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp;</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>