输入！快速生成HTML基本骨架
- target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开
css
-
CSS引入方式
-
外部样式：
-
html和css实现了完全的分离，企业开发常用方式。
-
颜色表示方式
-
CSS选择器
这是元素选择器
设置字体颜色
<style>
.publish-date {
color: gray;
}
</style>
<span class="publish-date">2024年05月15日 20:07</span>
效果
-
常见标签
-
路径表示
在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：
- 绝对路径:
- 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
- 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
- 相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
-
正文样式
/* 设置段落首行缩进 */
p {
text-indent: 2em; /* 首行缩进2em */
line-height: 2; /* 行高2倍 */
}
-
央视新闻-布局
从原始的央视新闻页面中，我们可以看到，新闻页面是出于整个版面的正中心的，那这种呢，在布局中也称为 版心居中。
<style>
…
/* 新增样式 */
.news-content {
width: 70%; /* 宽度占70% */
margin: 0 auto; /* 横向居中 */
}
</style>
</head>
<body>
<!-- 包裹新闻内容的容器 -->
<div class="news-content">
…
</div>
</body>
-
盒子模型
- 介绍
- 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。
- padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；
- padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；
- padding: 20px; -----------------------------> 表示上、右、下、左都是20px；
-
代码实现
<!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>
我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
-
flex布局
- flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
- 通过给父容器添加flex属性,来控制子元素的位置和排列方式。
- flex布局相关的CSS样式：
|
属性 |
说明 |
取值 |
含义 |
|
display |
模式 |
flex |
使用flex布局 |
|
flex-direction |
设置主轴 |
row |
主轴方向为x轴，水平向右。（默认） |
|
column |
主轴方向为y轴，垂直向下。 | ||
|
justify-content |
子元素在主轴上的对齐方式 |
flex-start |
从头开始排列 |
|
flex-end |
从尾部开始排列 | ||
|
center |
在主轴居中对齐 | ||
|
space-around |
平分剩余空间 | ||
|
space-between |
先两边贴边，再平分剩余空间 |
如果主轴设置为row，其实就是横向布局。 主轴设置为column，其实就是纵向布局。
- 表单标签
- 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
- 表单标签: <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。
-
表单项标签
在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：
- <input>: 表单项 , 通过type属性控制输入形式。
|
type取值 |
描述 |
|
text |
默认值，定义单行的输入字段 |
|
password |
定义密码字段 |
|
radio |
定义单选按钮 |
|
checkbox |
定义复选框 |
|
file |
定义文件上传按钮 |
|
date/time/datetime-local |
定义日期/时间/日期时间 |
|
number |
定义数字输入框 |
|
|
定义邮件输入框 |
|
hidden |
定义隐藏域 |
|
submit / reset / button |
定义提交按钮 / 重置按钮 / 可点击按钮 |
- <select>: 定义下拉列表, <option> 定义列表项
- <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">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。 接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：
-
表格标签
|
标签 |
描述 |
|
<table> |
定义表格整体 |
|
<thead> |
用于定义表格头部(可选) |
|
<tbody> |
定义表格中的主体部分(可选) |
|
<tr> |
表格的行，可以包裹多个 <td> |
|
<td> |
表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th> |
完整案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能学习辅助系统</title>
<style>
body {
margin: 0;
}
/* 顶栏样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c2c0c0;
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;
}
/* 搜索表单区域 */
.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;
}
.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: #c2c0c0;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}
.footer .company-name { 270aaa7009yh
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>Tlias智能学习辅助系统</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>
</div>
</body>
</html>
页面效果如下:
如果我的笔记对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！
扫一扫
4417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
