HTML超文本标记语言，由标签名构成的语言。超文本：超越了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。
HTML所有的标签都是预定义好的。
展示标题，![]()
展示图片，展示视频
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS Cascading Style Sheet 层叠样式表，用于控制页面的样式（表现）
head 网页头部：用来存放给浏览器看的信息，如CSS样式
body 网页主体：用来存放给用户看的信息，如文字、图片、视频
HTML的标签不区分大小写，建议小写
属性值可以使用双引号，也可以使用单引号，建议使用双引号
HTML的语法结构比较松散，不够严谨，建议规范书写
-
新建文本文件，后缀名为html
-
编写html的基本骨架，定义标题
-
在中填写内容
HTML快速入门Hello HTML
标题标签
-
级别越高，字体越大
a 超链接标签：
-
href：链接地址 -url地址；
-
target：打开方式（
blank:新窗口打开, **
self:本窗口打开（默认**））
<a href="https://www.cctv.com/">央视网</a>
编辑器中的换行不会影响页面中的显示
<a href="https://www.cctv.com/" target="_blank">央视网</a>在新窗口中打开
CSS引入方式：
-
行内样式：写在标签的style属性中**（配合Javascript使用）**
-
. 内部样式：卸载style标签中**（可以写在页面任何位置，但通常约定写在head标签中）**
-
外部样式：写在一个单独的.css文件中**（需要通过link标签在网页中引入）**
span标签没有语义，是 HTML 中的一个行内元素，用于对文档中的某些内容（如文字、部分文本等）进行分组或样式化，而不会影响页面的整体布局。
<!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; } </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>
颜色表示形式
-
rgb表示法：rgb(r,g,b) 红绿蓝三原色，取值0-255
-
rgba表示法：rgba(r,g,b,a) 红绿蓝三原色，a表示透明度，取值0-1
-
十六进制表示法：#rrggbb，#开头，将数字转换为十六进制表示
CSS选择器
用来选取需要设置样式的元素（标签）：
-
元素选择器 元素名称{...} h1{...} 选择页面上所有的h1标签
-
类选择器 .class属性值{...} .cls{...} 选择页面上所有class属性为cls的标签
-
id选择器 #id属性值{...} #hid{...} 选择页面上id属性为hid的标签
【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 /* 元素选择器 */ span{ color:#CDB2B2; } /* id选择器 */ /*.cls{ color: #ff0000 }*/ /* class选择器 */ #id{ color: #0000ff } 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章
央视网 2024年05月15日 20:07 6666666
优先级：id选择器>类选择器>元素选择器
分组选择器 选择器1,选择器2{...} h1,h2{...} 选择页面上所有的
和
标签
属性选择器
-
元素名称[属性]{...} input[type]{...} 选择页面上有type属性的标签
-
元素名称[属性名=“值”] {...} input[type="text"] 选择页面上type属性为text的标签
后代选择器：元素1 元素2 {...} form input{...} 选择
标签内的所有标签<video src="video/news.mp4" controls width="80%" >您的浏览器不支持video标签</video>
video标签的属性：
-
src：视频地址
-
controls：显示播放控件，如果没有，只是一张图片，所以视频都要有
-
width：视频的宽度
-
highth：视频的高度
单位：px像素、%百分比（相对于父元素的百分比）
建议宽度和高度只设置一个即可，另一个会等比例缩放
换行标签
<audio src="audio/news.mp3" controls></audio>引入音频标签
<img src="img/1.gif"></img>引入图片，src指定图片存储的位置
img常见的属性：
-
src：图片的访问地址
-
绝对路径：绝对磁盘路径：E:\Projects\VSCodeProjects\HTML-CSS\img\1.gif；绝对网络路径：www.baidu.com/img/1.gif
-
相对路径 ./：当前目录（可以省略） ../：上一级目录
-
-
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> /* 元素选择器 */ /*span{ color:#B2B2B2; }*/ /* id选择器 */ /*.cls{ color: #ff0000 }*/ /* class选择器 */ #time{ color: #b2b2b2 } a{ /* 去除超链接下方的下划线 */ text-decoration: none; } </style></head><> <!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 --> <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1> <!-- 定义一个超链接，里面展示央视网 --> <a href="https://www.cctv.com/" target="_blank">央视网</a> <span class="cls" id="time">2024年05月15日 20:07</span> <!-- 换行 --> <br><br> <!-- 定义一个视频，引入video/news.mp4 --> <video src="video/news.mp4" controls width="80%" >您的浏览器不支持video标签</video> <br> <!-- <audio src="audio/news.mp3" controls></audio> --> <P> 央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。习近平总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。 </P> <P> 行走在长江沿线，科研人员发现很多可喜现象。 </P> <!-- 定义一张图片，引入img/1.gif --> <img src="E:\Projects\VSCodeProjects\HTML-CSS\img\1.gif"></img> <p> 在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。 </p> <p> 在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。 </p> <p> 在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。 </p> <img src="img/2.jpg"> <p> 水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。 </p> <p> 实施长江十年禁渔，是以习近平同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。 </p> <img src="img/3.jpg"> <p> 按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。 </p> <p> 实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。 </p> <img src="img/4.jpg"> <p> 安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。 </p> <p> 安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。 </p> <p> 在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。 </p> <img src="img/5.jpg"> <P> 长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。 </P> </body></html>
用于加粗展示文本内容
用于加粗展示文本内容，有强调语义的
p{ /*设置行高*/ line-height: 2; /*设置两倍的行间距*/ /*首行缩进两个字符*/ text-indent: 2em; }
/ 加粗
/ 下划线
/ 倾斜
/删除线
strong、ins、em、del具有强调语义，推荐使用具有强调语义的标签
字符实体
  ;空格
< ; <
> ; >
CSS属性：
line-height:设置行高
line-indent:首行缩进
使用<div id="content-container">将body中的所有包含起来，可以设置居中显示
#content-container{ width: 70%; margin-left: auto; /*居中显示*/ margin-right: auto; /*居中显示*/ }
盒子模型
盒子：页面中的所有元素（标签），都可以看作是一个盒子，由盒子将页面中的所有元素包含在一个矩形区域内，通过盒子的视角更方便地进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
布局标签：网页开发中，会使用div和span这两个没有语义的布局标签。
div 标签：
-
一行只显示一个（独占一行）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高（width、height）
span标签：
-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高（width、height）
div标签的主要属性：width、height、background、padding、border、margin
padding、margin四个参数依次为上右下左，两个参数为上下、左右、一个参数则四个方向都一样
<!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; /* 宽度：400px 默认是内容展示区域的宽度*/ height: 300px; /* 高度度：300px 默认是内容展示区域的高度*/ background-color: #ffff00; padding: 30px; box-sizing: border-box; border:20px solid #ff0000; margin: 20px auto; /*上下外边距20px 左右居中显示*/ } </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 AA 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 </div> <span> B B B B B B B B 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 B B B B B B B B B B B </span> --></body></html>
水平居中显示
#content-container{ width: 70%; /*margin-left: auto; margin-right: auto;*/ margin: 0 auto; }
注意事项：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后面加上-位置，如:padding-top、padding-left、padding-right
页面原型：指在应用程序开发初期，由产品经理制作的一个早期项目模型，它哦你关于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。
flex弹性布局
flex是flexible box的缩写，意思为弹性布局，是一种以为的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
通过给父容器添加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> #container{ background-color: #f1eeee; width: 500px; height: 300px; display: flex; /*flex布局*/ flex-direction: row; /*row:横向布局 column:纵向布局*/ justify-content:space-around;/*flex-start:左对齐 flex-end:右对齐 center:居中 space-around:两边对齐 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 id="item">1</div> <div id="item">2</div> <div id="item">3</div> </div></body></html>
表单标签
表单：在网页中主要负责数据采集功能，如注册、登录等数据采集
标签
表单项：不同类型的input元素、下拉列表、文本域
-
input：定义表单项，通过type属性控制输入形式（text\password）
-
select：定义下拉列表，option定义列表项
-
textarea：定义文本域
属性：
-
action：规定当提交表单时间时向何处发送表单数据，URL
-
method：规定用于发送表单数据的方式。GET（默认，表单数据会出现在URL后面 file:///E:/save?name=%E6%9E%97%E5%AE%8F%E5%AE%87&age=23）、POST（表单数据会在消息体/请求体中提交到服务器）
注意事项：表单项要想能够采集数据，必须要设置name属性，表示当前表单项的名字
GET请求方式特点：
-
如果表单中包含了隐私数据，get方式不安全，不推荐是会用该方式。
-
在浏览器中，get方式提交的数据是有限的，不适合提交大数据量的表单。
POST请求方式特点：
-
安全
-
请求大小没有限制
表单项标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="/save" method="post"> 姓名：<input type="text" name="name"> <br><br> 密码：<input type="password" name="password"> <br><br> 性别：<input type="radio" name="sex" value="1">男 <label><input type="radio" name="sex" value="2">女</input></label> <br><br> 爱好：<label><input type="checkbox" name="hobby" value="1">java</label> <label><input type="checkbox" name="hobby" value="2">game</label> <label><input type="checkbox" name="hobby" value="3">sing</label> <br><br> 图像：<input type="file" name="image"> <br><br> 生日：<input type="date" name="birthday"></input> <br><br> 时间：<input type="time" name="time"></input> <br><br> 日期时间：<input type="datetime-local" name="datetime"></input> <br><br> 学历：<select name="education"> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述：<textarea name="description" rows="5" cols="20"></textarea> <br><br> <input type="hidden" name="id" value="1"> <!-- 三个按钮，分别是按钮 重置 提交 --> <input type="button" value="按钮"></input> <input type="reset" value="重置"></input> <input type="submit" value="提交"></input> <br><br> </form></body></html>
label标签可以提升用户的体验感，点击到文字也可以勾选，否则要点到框才能勾选
<label for="name">姓名：</label> <input type="text" name="name" placeholder="请输入姓名">
label与下面的input进行绑定，提升用户体验
table表格
thead定义表头，tr定义一行，th定义表头单元格（有加粗效果）
tbody定义表格的主题内容，展示数据的部分，td定义普通单元格
<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 src="img/linghuchong.jpg" alt="令狐冲" class="avatar"></td> <td>班主任</td> <td>2020-03-15</td> <td>2024-05-14</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</button> </td> </tr> <tr> <td>任盈盈</td> <td>女</td> <td><img src="img/renyingying.jpg" alt="任盈盈" class="avatar"></td> <td>讲师</td> <td>2021-06-20</td> <td>2024-05-13</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</button> </td> </tr> <tr> <td>岳不群</td> <td>男</td> <td><img src="img/yuebuqun.jpg" alt="岳不群" class="avatar"></td> <td>教研主管</td> <td>2019-09-01</td> <td>2024-05-12</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</button> </td> </tr> </tbody> </table>
Tlias智能学习辅助系统完整的代码
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Tlias智能学习辅助系统</title> <style> /* 顶部导航栏样式 */ .header { background-color: #cccccc; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; color: #333; } .header h1 { font-weight: bold; margin: 0; color: white; font-family: "楷体"; } .logout-link { text-decoration: none; color: white; font-size: 16px; } .logout-link:hover { text-decoration: underline; } /* 搜索区域样式 */ .search-form { display: flex; align-items: center; gap: 15px; padding: 20px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; margin: 20px 0; } .search-form input[type="text"], .search-form select { padding: 6px 10px; font-size: 14px; width: 270px; } .search-form button { padding: 6px 12px; font-size: 14px; cursor: pointer; border: none; border-radius: 4px; } .btn-query { background-color: #007bff; color: white; } .btn-reset { background-color: #6c757d; color: white; } /* 表格样式 */ .table-container { margin: 0 20px; } table { width: 100%; border-collapse: collapse; box-shadow: 0 0 5px rgba(0,0,0,0.1); font-size: 14px; } th, td { padding: 12px 15px; /* 边框间距 */ border: 1px solid #ccc; /* 边框 */ text-align: center; /* 居中 */ } th { background-color: #f2f2f2; color: #333; } tr:nth-child(even) { background-color: #fafafa; } img.avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; } .action-buttons button { margin: 2px; /* 间隔 */ padding: 4px 8px; /* 边框宽度 */ font-size: 12px; /* 字体大小 */ border: none; border-radius: 4px; /* 圆角 */ cursor: pointer; /* 鼠标移入按钮范围时出现手势 */ } .btn-edit { background-color: #28a745; color: white; } .btn-delete { background-color: #dc3545; color: white; } .footer { background-color: #cccccc; /* 灰色背景 */ color: white; text-align: center; padding: 20px 10px; margin-top: 30px; font-family: "楷体"; } #container { width: 90%; margin: 0 auto; } </style></head><body> <div id="container"> <!-- 顶部导航栏 --><div class="header"> <h1>Tlias 智能学习辅助系统</h1> <a href="#" class="logout-link">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"> <label for="name">姓名：</label> <input type="text" name="name" placeholder="请输入姓名"> <label for="gender">性别：</label> <select name="gender"> <option value="">--请选择--</option> <option value="男">男</option> <option value="女">女</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" class="btn-query">查询</button> <button type="reset" class="btn-reset">清空</button></form><!-- 表格展示区域 --><div class="table-container"> <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 src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td> <td>班主任</td> <td>2020-03-15</td> <td>2024-05-14</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</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>2021-06-20</td> <td>2024-05-13</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</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-09-01</td> <td>2024-05-12</td> <td class="action-buttons"> <button class="btn-edit">编辑</button> <button class="btn-delete">删除</button> </td> </tr> </tbody> </table></div><footer class="footer"> <p>福建宏宇科技股份有限公司</p> <p>版权所有 Copyright 2006-2025 All Rights Reserved</p></footer> </div></body></html>
