一、标题-排版
标题、超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> </head> <body> <!-- 定义一个标题, 标题内容: --> <h1>标题1</h1> <!-- 定义一个超链接, 里面展示 --> <!-- a 超链接标签: href: 链接地址 - url地址 target: 打开方式 _blank: 新窗口打开 _self: 本窗口打开(默认) --> <a href="https://www.cctv.com" target="_blank">央视网</a> 2024年05月15日 20:07 </body> </html>二、标题-样式
1．CSS引入方式
行内样式:<h1style="..">
内部样式:<style>..</style>
外部样式：XXX.CSS
<link href="...">
2．颜色表示
关键字：red、green··
rgb表示法:rgb(255,0,0)、rgb(134,100,89)
rgba表示法:rgba(255,0,0,0.5)、
rgba(134,100,89,1)
十六进制：#ff0000、#cccccc、#f00
3．颜色属性
color：设置文本内容的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <!-- 方式二: 内部样式 --> <style> span{ /* 关键字 */ /* color: gray; */ /* RGB表示法 */ /* color: rgb(255, 120, 0); */ /* RGBA表示法 */ /* color: rgba(255, 120, 0, 0); */ /* 十六进制表示法 */ /* color: #0000ff; */ color: #b2b2b2; } </style> <!-- 方式三: 外部样式 --> <!-- <link rel="stylesheet" href="css/news.css"> --> </head> <body> <!-- 定义一个标题, 标题内容: --> <h1></h1> <!-- 定义一个超链接, 里面展示 --> <a href="https://www.cctv.com" target="_blank">央视网</a> <!-- 方式一: 行内样式 --> <!-- <span style="color: gray;">2024年05月15日 20:07</span> --> <span>2024年05月15日 20:07</span> </body> </html>三、标题-样式(选择器)
最为常见的三类选择器的写法？
元素选择器：标签名{...}
类选择器:.class属性值{···}
id选择器：#id属性值{...}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> /* 元素选择器 */ /* span { color: #b2b2b2; } */ /* 类选择器 */ /* .cls { color: #ff0000; } */ /* ID选择器 */ #time { color: #b2b2b2; } a { /* 去除超链接下方的下划线 */ text-decoration: none; } </style> </head> <body> <!-- 定义一个标题, 标题内容: --> <h1></h1> <!-- 定义一个超链接, 里面展示 央视网 --> <a href="https://www.cctv.com" target="_blank">央视网</a> <span class="cls" id="time">2024年05月15日 20:07</span> </body> </html>四、正文-排版
video
换行
audio
段落标签
img
<!-- --------------------------- 新闻正文 -------------------------------- --> <!-- 定义一个视频, 引入 video/news.mp4 --> <!-- video标签属性 src: 视频地址 controls: 显示播放控件 autoplay: 自动播放 width: 视频宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放) height: 视频高度 单位: px: 像素 %: 百分比 (相对于父元素的百分比) --> <video src="video/news.mp4" controls width="80%"></video> <!-- <audio src="audio/news.mp3" controls></audio> --> <p> </p> <p> </p> <!-- 定义一张图片, 引入 img/1.gif --> <!-- img标签属性: src: 图片的访问地址 1. 绝对路径 1.1 绝对磁盘路径: C:\Users\Administrator\Desktop\img\1.gif (不推荐) 1.2 绝对网络路径: https://www.baidu.com/img/1.gif 2. 相对路径 2.1 ./ : 当前目录 (可以省略) , 如: ./img/1.gif 2.2 ../: 上一级目录 width: 图片宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放) height: 图片高度 --> <img src="img/1.gif" width="80%"></img> <p> </p> </body>五、正文-样式
加粗：b、string
空格： 
首行缩进
p { /* 设置行高 */ line-height: 2; /* 行高: 2倍行高 */ /* 设置首行缩进 */ text-indent: 2em; /* 首行缩进2个字符 */ }六、整体布局
将主体用div包裹起来，并起名为content-container
#content-container { width: 70%; /* 宽度: 70% */ margin: 0 auto; }七、CSS盒子模型
内容区域（content）、内边距区域（padding）、边框区域（border)、外边距区域(margin）
<div>标签：
一行只显示一个(独占一行) 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高（width、height）
<span>标签:
一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高（width、height）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> #div1 { width: 400px; /* 宽度: 400像素; 默认是内容展示区域的宽度 */ height: 300px; /* 高度: 300像素; 默认是内容展示区域的高度 */ background-color: #ffff00; padding: 30px; /* 内边距: 30像素 */ box-sizing: border-box; /* 盒子模型: 边框+内边距+内容展示区域 */ border: 20px solid #ff00ff; /* 边框: 20像素 */ margin: 30px auto; /* 外边距: 20像素 */ } </style> </head> <body> <div id="div1"> 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 A A A A A A A A A A </div> <!-- <div id="div2"> 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 A A A A A A A A A A </div> <span> B B B B B B B B B B B B B B B B </span> <span> B B B B B B B B B B B B B </span> --> </body> </html>八、tilas案例-顶部导航栏
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tlias智能学习辅助系统</title> <style> /* 导航栏样式 */ .navbar { background-color: #b5b3b3; /* 灰色背景 */ display: flex; /* flex弹性布局 */ justify-content: space-between; /* 左右对齐 */ padding: 10px; /* 内边距 */ align-items: center; /* 垂直居中 */ } .navbar h1 { margin: 0; /* 移除默认的上下外边距 */ font-weight: bold; /* 加粗 */ color: white; /* 设置字体为楷体 */ font-family: "楷体"; } .navbar a { color: white; /* 链接颜色为白色 */ text-decoration: none; /* 移除下划线 */ } </style> </head> <body> <!-- 顶部导航栏 --> <div class="navbar"> <h1>Tlias智能学习辅助系统</h1> <a href="#">退出登录</a> </div> </body> </html>九、tlias案例-flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex弹性布局</title> <style> /* body { margin: 0; } */ #container { background-color: #f1eeee; width: 500px; height: 300px; display: flex; /* flex弹性布局 */ flex-direction: row; /* 默认为row水平布局, 设置主轴 */ /* flex-start: 从头开始排列 */ /* flex-end: 从尾部开始排列 */ /* center: 在主轴上居中对齐 */ /* space-around: 平分剩余空间 */ /* space-between: 先两边贴边, 再平分剩余空间 */ justify-content: space-between; } .item { background-color: rgb(184, 246, 184); border: 1px solid rgb(141, 138, 138); width: 100px; height: 50px; } </style> </head> <body> <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>十、常见标签和样式
1、表单标签
表单标签：<form>
表单属性:
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面，？username=java，大小有限制
post：表单数据在请求体中携带，大小没有限制
注意：表单项必须有name属性才可以提交。
2、表单项标签
<input>：表单项，通过type属性控制输入形式。
<select>：定义下拉列表<option>定义列表项。
<textarea>：文本域
1．表单项标签 <input>的type属性:text、password、radio、checkbox、file、date、 datetime-local、time、hidden、button、submit
<select>定义下拉列表 <textarea>定义文本域
3、tlias案例：搜索表单区域
<!-- 搜索表单区域 --> <!-- form表单标签: action: 表单提交的地址 - url method: 表单提交的方式 - get(默认) / post get: 提交时, 表单数据会在url后提交到服务端; 比如: /search?name=Tom&gender=2&position=3 ; get方式提交数据长度有限制, 不能提交大量数据; get方式不安全; post: 提交时, 表单数据会在请求体(消息体)中提交到服务端; 比如: /search -- name=Cat&gender=1&position=2 post方式提交数据长度无限制; post方式安全; --> <form class="search-form" action="/search" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name" placeholder="请输入姓名"> <label for="gender">性别：</label> <select id="gender" name="gender"> <option value=""></option> <option value="1">男</option> <option value="2">女</option> </select> <label for="position">职位：</label> <select id="position" name="position"> <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">清空</button> </form>4、tlias案例：表格数据展示区域
<!-- 表格展示区 --> <table> <!-- 表头 --> <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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td> <td>讲师</td> <td>2021-06-15</td> <td>2024-09-16 15:30</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>任盈盈</td> <td>女</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td> <td>咨询师</td> <td>2021-07-20</td> <td>2024-09-17 09:00</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>向问天</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>教研主管</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>任我行</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>教研主管</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> </tbody> </table>5、tlias案例：底部版权区域
<!-- 页脚版权区域 --> <footer class="footer"> <p>江苏传智播客教育科技股份有限公司</p> <p>版权所有 Copyright 2006-2024 All Rights Reserved</p> </footer>十一、总代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tlias智能学习辅助系统</title> <style> /* 导航栏样式 */ .navbar { background-color: #b5b3b3; /* 灰色背景 */ display: flex; /* flex弹性布局 */ justify-content: space-between; /* 左右对齐 */ padding: 10px; /* 内边距 */ align-items: center; /* 垂直居中 */ } .navbar h1 { margin: 0; /* 移除默认的上下外边距 */ font-weight: bold; /* 加粗 */ color: white; /* 设置字体为楷体 */ font-family: "楷体"; } .navbar a { color: white; /* 链接颜色为白色 */ text-decoration: none; /* 移除下划线 */ } /* 搜索表单样式 */ .search-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; /* 控件之间的间距 */ margin: 20px 0; } .search-form input[type="text"], .search-form select { padding: 5px; /* 输入框内边距 */ width: 260px; /* 宽度 */ } .search-form button { padding: 5px 15px; /* 按钮内边距 */ } /* 表格样式 */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; /* 边框 */ padding: 8px; /* 单元格内边距 */ text-align: center; /* 左对齐 */ } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f2f2f2; } .avatar { width: 30px; height: 30px; } /* 页脚样式 */ .footer { background-color: #b5b3b3; /* 灰色背景 */ color: white; /* 白色文字 */ text-align: center; /* 居中文本 */ padding: 10px 0; /* 上下内边距 */ margin-top: 30px; } #container { width: 80%; /* 宽度为80% */ margin: 0 auto; /* 水平居中 */ } </style> </head> <body> <div id="container"> <!-- 顶部导航栏 --> <div class="navbar"> <h1>Tlias智能学习辅助系统</h1> <a href="#">退出登录</a> </div> <!-- 搜索表单区域 --> <form class="search-form" action="/search" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name" placeholder="请输入姓名"> <label for="gender">性别：</label> <select id="gender" name="gender"> <option value=""></option> <option value="1">男</option> <option value="2">女</option> </select> <label for="position">职位：</label> <select id="position" name="position"> <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">清空</button> </form> <!-- 表格展示区 --> <table> <!-- 表头 --> <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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td> <td>讲师</td> <td>2021-06-15</td> <td>2024-09-16 15:30</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>任盈盈</td> <td>女</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td> <td>咨询师</td> <td>2021-07-20</td> <td>2024-09-17 09:00</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>向问天</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>班主任</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>任我行</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>教研主管</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>田伯光</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td> <td>班主任</td> <td>2021-06-15</td> <td>2024-09-16 15:30</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>不戒</td> <td>女</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td> <td>班主任</td> <td>2021-07-20</td> <td>2024-09-17 09:00</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>左冷禅</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>班主任</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>定逸</td> <td>女</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>班主任</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>东方兄弟</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>讲师</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> <tr> <td>金庸</td> <td>男</td> <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td> <td>咨询师</td> <td>2021-05-01</td> <td>2024-09-15 17:45</td> <td class="action-buttons"> <button type="button">编辑</button> <button type="button">删除</button> </td> </tr> </tbody> </table> <!-- 页脚版权区域 --> <footer class="footer"> <p>江苏传智播客教育科技股份有限公司</p> <p>版权所有 Copyright 2006-2024 All Rights Reserved</p> </footer> </div> </body> </html>
（支持资料、图片参考_相关定制）_)
