当前位置：首页 > news >正文

Web前端基础:HTML-CSS

news 来源：原创 2025/6/7 6:22:42

1.标题

1.1标题排版

超链接 a 标签：
标签：<a href="....." target=".....">央视网</a>
属性：

href: 指定资源访问的url
target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开

1.2标题样式

1.2.1CSS引入方式

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对。	`<h1 style="xxx:xxx;">`中国新闻网`</h1>`
内部样式	定义`<style>`标签，在标签内部定义css样式	`<style>` h1 {…} `</style>`
外部样式	定义`<link>`标签，通过href属性引入外部css文件	`<link rel="stylesheet" href="css/news.css">`

行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
外部样式：html和css实现了完全的分离，企业开发常用方式。

1.2.2颜色表示方式

表示方式	属性值	说明	取值
关键字	颜色英文单词	red、green、	red、green、
rgb表示法	rgb(r, g, b)	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法	rgba(r, g, b, a)	红绿蓝三原色，a表示透明度，取值：0-1	rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六进制表示法	#rrggbb	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

1.2.3设置字体颜色

color:设置文本内容的颜色

1.2.4CSS选择器

1.最为常见的三类选择器的写法?
元素选择器:标签名{…}
类选择器:.class属性值{…}
id选择器:#id属性值{…}
2.优先级:id选择器->类选择器->元素选择器

选择器名   {css样式名：css样式值;css样式名：css样式值;
}

选择器	写法	示例	示例说明
元素选择器	元素名称 {…}	h1 {…}	选择页面上所有的`<h1>`标签
类选择器	.class属性值 {…}	.cls {…}	选择页面上所有class属性为cls的标签
id选择器	#id属性值 {…}	#hid {…}	选择页面上id属性为hid的标签
分组选择器	选择器1,选择器2{…}	h1,h2 {…}	选择页面上所有的`<h1>`和`<h2>`标签
属性选择器	元素名称[属性] {…}	input[type] {…}	选择页面上有type属性的`<input>`标签
属性选择器	元素名称[属性名=“值”] {…}	input[type=“text”] {…}	选择页面上type属性为text的`<input>`标签
后代选择器	元素1元素2{…}	form input {…}	选择`<form>`标签内的所有`<input>`标签

设置超链接取消下划线效果

    a {text-decoration: none;}

2.正文

2.1正文排版

2.1.1基本实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title><!-- 2. 内部样式 --><style>.publish-date {color: #b2b2b2;}/* 设置超链接取消下划线效果 */a {text-decoration: none;}</style>
</head>
<body><!-- 定义网页标题, 标题内容： xxx --><h1 id="title">xxx</h1><!-- 定义一个超链接, 链接地址：https://x.x.x/, 链接内容：xx网 --><a href="https://x.x.x/" target="_blank">xx网</a><span class="publish-date">2024年05月15日 20:07</span><br><br><!-- 定义一个视频, video/news.mp4 --><video src="video/news.mp4" controls  width="80%"></video><p>内容</p><p>内容</p><!-- 定义一张图片, img/1.gif --><img src="img/1.gif" alt=""  width="100%"><p>内容</p><p>内容</p><p>内容</p><img src="img/2.jpg" width="100%"><p>内容</p><p>内容</p><img src="img/3.jpg" width="100%"><p>内容</p><p>内容</p><img src="img/4.jpg" width="100%"><p>内容</p><p>内容</p><p>内容</p><img src="img/5.jpg" width="100%"><p>内容</p><img src="img/6.jpg"></body>
</html>

2.1.2常见标签

<video> 视频标签
- src：指定视频的url
- url（绝对路径/相对路径）
- controls：是否显示播放控件
- width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
- height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
<img> 图片标签
- src, width，height
<p> 段落标签
<br>换行标签
<b>/ <strong> 加粗 <strong> 具有强调语义
<u>/ <ins> 下划线 <ins> 具有强调语义
<i> / <em> 倾斜 <em> 具有强调语义
<s> / <del> 删除线 <del> 具有强调语义
  空格
< <
> >

2.1.3路径表示

绝对路径
- 绝对磁盘路径(D:/xxx.jpg)
- 绝对网络路径(https://xxx.jpg)
相对路径
- 当前目录:./(可以省略)
- 上一级目录: . . /

2.2正文样式

    /* 设置段落首行缩进 */p {text-indent: 2em; /* 首行缩进2em */line-height: 2; /* 行高2倍 */}

3.布局

完成了标签及正文部分的排版制作，以及样式处理之后，那最后一步，我们就要来完成页面整体布局的设置了。页面是出于整个版面的正中心的，那这种呢，在布局中也称为 版心居中。

3.1功能实现

    /* 新增样式 */.news-content {width: 70%; /* 宽度占70% */margin: 0 auto; /* 横向居中 */<!-- 包裹新闻内容的容器 --><div class="news-content">}</div>

3.2盒子模型

组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
注意事项:如果只需要设置某一个方位的边框、内边距、外边距,可以在在属性名后加上一位置,如:padding-top、padding-left, padding-right …

3.2.1布局标签

标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

3.2.2代码实现

<!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><style>div {width: 200px;  /* 宽度 */height: 200px;  /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

我们可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
在这里插入图片描述
备注：

上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：
padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；
padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；
padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

4.案例

4.1需求

参照Tlias智能学习辅助系统，完成员工管理页面的制作。

在这里插入图片描述

4.2代码实现

4.2.1顶部导航栏

在这里插入图片描述

4.2.1.1基本实现

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hmhvictory员工管理系统</title><style>body {margin: 0;}/* 顶栏样式 */.header {display: flex;justify-content: space-between;align-items: center;background-color: #f1f1f1;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 加大加粗标题 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本链接样式 */.header a {text-decoration: none;color: #333;font-size: 16px;}</style>
</head>
<body><!-- 顶栏 --><div class="header"><h1>hmhvictory员工管理系统</h1><a href="#">退出登录</a></div><!-- 其他部分可以在这里添加 -->
</body>
</html>

4.2.1.2flex布局

flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
通过给父容器添加flex属性,来控制子元素的位置和排列方式。
flex布局相关的CSS样式：

4.2.2搜索表单

在这里插入图片描述

4.2.2.1表单标签

在这里插入图片描述
上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项或表单元素。

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

演示：
1). GET方式提交的表单

<!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>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
在这里插入图片描述
2). POST方式提交表单
将上述的表单提交方式由get，改为post

<!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>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
在这里插入图片描述
注意事项：
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

用户名: <input type="text" name="username">

4.2.2.2表单项标签

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项 , 通过type属性控制输入形式。
<select>: 定义下拉列表, 定义列表项
<textarea>: 文本域

演示：
创建一个新的表单项的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>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="/save" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>

通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：
在这里插入图片描述
而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：

4.2.2.3搜索表单实现

代码实现如下:

      /* 搜索表单区域 */.search-form {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;}/* 表单控件样式 */.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;width: 200px;}/* 按钮样式 */.search-form button {padding: 5px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}/* 清空按钮样式 */.search-form button.clear {background-color: #6c757d;}<!-- 搜索表单区域 --><form class="search-form"><input type="text" name="name" placeholder="姓名" /><select name="gender"><option value="">性别</option><option value="1">男</option><option value="2">女</option></select><select name="job"><option value="">职位</option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="submit">查询</button><button type="reset" class="clear">清空</button></form>

4.2.3表格数据展示

在这里插入图片描述

4.2.3.1基本实现

      .table {min-width: 100%; border-collapse: collapse;margin: 0 20px;}/* 设置表格单元格边框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; }<table class="table table-striped table-bordered"><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr><td>令狐冲</td><td>男</td><td><img src="https://via.placeholder.com/50" alt="令狐冲" class="avatar"></td><td>讲师</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://via.placeholder.com/50" alt="任盈盈" class="avatar"></td><td>学工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://via.placeholder.com/50" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>宁中则</td><td>女</td><td><img src="https://via.placeholder.com/50" alt="宁中则" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr></tbody></table>

4.2.3.2表格标签

在这里插入图片描述

4.2.4底部版权区域

      /* 页脚版权区域 */.footer {background-color: #8f8c8c;color: white;text-align: center;padding: 20px 0;margin-top: 30px;}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}<!-- 页脚版权区域 --><footer class="footer"><p class="company-name">豪大大有限公司</p><p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p></footer>

4.2.5版心居中

代码实现:

    #container {width: 80%;margin: 0 auto;}<div id="container">内容...</div>

总体代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hmhvictory员工管理系统</title><style>body {margin: 0;}/* 顶栏样式 */.header {display: flex;justify-content: space-between;align-items: center;background-color:  hwb(195 54% 4%);padding: 10px 20px;box-shadow: 0 2px 5px rgba(142, 204, 9, 0.1);}/* 加大加粗标题 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本链接样式 */.header a {text-decoration: none;color: #333;font-size: 16px;}/* 搜索表单区域 */.search-form {display: flex;align-items: center;padding: 20px;background-color: white;}/* 表单控件样式 */.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;width: 200px;}/* 按钮样式 */.search-form button {padding: 5px 15px;margin-left: 10px;background-color: hwb(195 54% 4%);color: white;border: none;border-radius: 4px;cursor: pointer;}/* 清空按钮样式 */.search-form button.clear {background-color: #6c757d;}.table {min-width: 100%; border-collapse: collapse;}/* 设置表格单元格边框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }/* 页脚版权区域 */.footer {background-color: #64bcd7;color: white;text-align: center;padding: 10px 0;margin-top: 150px}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}#container {width: 80%;margin: 0 auto;}</style>
</head>
<body><div id="container"><!-- 顶栏 --><div class="header"><h1>hmhvictory员工管理系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="#" method="post"><input type="text" name="name" placeholder="姓名" /><select name="gender"><option value="">性别</option><option value="male">男</option><option value="female">女</option></select><select name="position"><option value="">职位</option><option value="班主任">班主任</option><option value="讲师">讲师</option><option value="学工主管">学工主管</option><option value="教研主管">教研主管</option><option value="咨询师">咨询师</option></select><button type="submit">查询</button><button type="reset" class="clear">清空</button></form><table class="table table-striped table-bordered"><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr><td>令狐冲</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td><td>讲师</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td><td>学工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr><tr><td>宁中则</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button>编辑</button><button>删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p class="company-name">豪大大有限公司</p><p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div></body>
</html>