2025/12/16 HTML CSS

**Web：**全球广域网，也称万维网，能够通过浏览器访问的网站

Web前端开发（AI）

Web标准（网页标准）

由一系列的标准组成，大部分由w3c（万维网联盟负责）

三个组成部分：

HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript：负责网页的行为（交互效果）

HTML（超文本标记语言）

**超文本：**超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义托i按、音频、视频等内容。

**标记语言：**由"<标签名>"构成的语言

HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS（层叠样式表）

用于控制页面的样式（表现）

HTML快速入门

1.新建文本文件，后缀名改为 .html

2.编写HTML的基本骨架，定义标题

3.在<body>中填写内容

HTML基本骨架标签

html 复制代码

<html>
		<head>
				<title>HTML快速入门</title>
		</head>
		<body>
				<h1>Hello HTML</h1>
				<img src="img/1.png">
		</body>
</html>

HTML标签特点

html标签不区分大小写，建议小写
html标签的属性值使用单引号/双引号都可以
html语法结构松散，但是建议规范书写

前端开发工具

html 复制代码

<!-- 声明文档的类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 字符集 -->
  <meta charset="UTF-8">
  <!-- 设置网页在移动设备上的显示宽度及缩放比例 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML快速入门</title>
</head>
<body>
  <h1>HTML快速入门 </h1>
  <img src="img/1.png">
</body>
</html>

常见标签&样式

样式新闻-标题

html页面在渲染展示的时候，是从上往下逐行解析的。所以，在编写页面的时候，根据页面布局，从上往下编写

标题标签：<h1> - <h6>

超链接标签： <a href="" target="">...</a>

href：超链接（url）的链接地址

target：超链接打开方式

_self：当前窗口打开（默认）

_blank：新窗口打开

央视新闻-标题样式

CSS引入方式：

行内样式：写在标签的style属性中（配合JavaScript使用）
内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

html 复制代码

行内样式
<span style="color: gray;">2024年05月15日  20：07</span>

html 复制代码

内部样式
<style>
    span{
       color:gray;
     }

</style>

html 复制代码

span{
    color:gray;
}
外部样式
<link rel="stylesheet" href="css/news.css">

颜色的表示形式

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{
        /* 1.关键字 */
        /* color: gray; */
        /* 2.rgb表示法 */
        /* color:rgb(178, 178, 178) */
        /*3.RGBA表示法 */
        /* color:rgba(255, 120, 0, 0.1) */
        /* 4.16进制表示法 */
        color:#ff7800
      }
   </style>
   <!-- 方式三：外部样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
  <!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔，谱写场景大保护新篇章 -->
   <h1>【新思想引领新征程】推进长江十年禁渔，谱写场景大保护新篇章</h1>
   <!-- 定义一个超链接，里面展示 央视网 -->
    <!-- a 超链接标签 
     href： 超链接（url）的链接地址 
     target： 超链接打开方式
        _self： 当前窗口打开（默认）
        _blank： 新窗口打开
-->
   <a href="https://www.cctv.com/" target="_blank">央视网</a> 
   <!-- 方式一：行内样式 -->
   <!-- <span style="color:gray;">2024年05月05日 20:07</span> -->
   <span>2024年05月05日 20:07</span>
   
</body>
</html>

css选择器

是用来选取需要设置样式的元素（标签）的

如果三个选择器同时匹配到了同一个标签，id选择器优先级最高，第二是类选择器，最后是元素选择器

css 复制代码

/* 元素选择器 */
      /* span{
        color:#ff7800
      } */
       /* 类选择器 */
       /* .cls{
        color:#ff7800
      } */
       /* id选择器 */
       #time{
        color: #b2b2b2;
      } 
      a{
         /* 去除超链接下面的下划线 */
         text-decoration: none;
      }

其他选择器

央视新闻-正文排版

<!-- img标签属性

src="图片地址"：图片地址

1.1 ./：表示当前目录（可以省略）

1.2 ../：表示上一级目录

绝对路径：图片的完整路径

2.1绝对磁盘路径：图片在计算机中的完整路径

2.2绝对网络路径：图片在网络中的完整路径

alt="图片描述"：图片描述（鼠标悬停在图片上显示）

width="400" height="300"：图片的宽高（建议高度和宽度只设置其中一个，另外一个会等比例缩放）

单位： px

%：百分比（相对于父元素的百分比）

-->

<!-- video标签的属性：

src="视频地址"：视频地址

controls="controls"：显示控制条

autoplay="autoplay"：自动播放

loop="loop"：循环播放

muted="muted"：静音播放

poster="poster.png"：封面图片

width="400" height="300"：视频的宽高（建议高度和宽度只设置其中一个，另外一个会等比例缩放）

单位： px

%：百分比（相对于父元素的百分比）

-->

央视新闻-正文样式

央视新闻-整体布局

整体页面居中显示

<div>

盒子模型

**盒子：**页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行布局

**盒子模型的组成：**内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

**布局标签：**网页开发中，会使用div和span这两个没有语义的布局标签。

特点：

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

四个值的顺序是按损顺时针，两个值的顺序是（上下、左右），一个值就是全部

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>
    #div1{
      /* 默认是内容展示区域的宽度 */
      width: 400px;
      /* 默认是内容展示区域的高度 */
      height: 300px;
      background-color: pink;
      /* 内边距 */
      padding: 30px; 
      box-sizing: border-box;
      /* 边框：边框宽度 边框样式 边框颜色 */
      border: 20px solid red;
      margin: auto;
    }
  </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
  </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
  </div>
  <span>
    B B B
  </span>
  <span>
    B B B B B B B B 
  </span> -->
</body>
</html>

注意事项

如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后面加上 -位置，如：

padding-top、padding-left、padding-right...

案例-tlias系统

参照页面原型，完成员工管理页面制作

**页面原型：**在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品地外观和行为。

顶部导航栏
搜索表单区域
表格数据展示区
底部版权区域

顶部导航栏

html 复制代码

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 顶部导航栏样式 */
        .navbar {
            background-color: #808080; /* 灰色背景 */
            display: flex; /* 弹性布局，子元素水平排列*/
            padding: 10px;
            justify-content: space-between;
            align-items: center;
        }

        /* 标题样式 - 加大加粗 */
        .navbar h1 {
            margin: 0;
            font-weight: bold;
            color: white;
            /* 设置字体为楷体 */
            font-family: '楷体', sans-serif;
        }

        /* 退出登录链接样式 */
        .logout-link {
            color: white;
            text-decoration: none;
            font-size: 16px;
        }

        .logout-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 第一部分：顶部导航栏 -->
    <nav class="navbar">
        <h1>Tlias智能学习辅助系统</h1>
        <a href="#" class="logout-link">退出登录</a>
    </nav>
</body>
</html>

flex布局

flex是flexible Box地缩写，意为弹性布局，是一种移位地布局模型。flex布局可以为元素之间提供强大地空间分布和对齐能力。
通过给父容器添加flex地相关属性，来控制子元素地位置和排列方式

html 复制代码

<!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: aliceblue;
        width: 500px;
        height: 300px;
        /* 开启flex布局 */
        display: flex;
        flex-direction: row;/*默认为row水平布局，设置主轴*/
        /* flex-star:从头开始排列 */
        /* flex-end:从尾部开始排列 */
        /* center:在主轴上居中对齐 */
        /* space-around:平分剩余空间 */
        /* space-between:先两边贴边，再平分剩余空间 */
        justify-content: space-between;/*默认主轴起点对齐*/
    }   
    .item{
        background-color: pink;
        border: 1px solid red;
        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>

搜索表单区域

表单标签

表单：在网页中主要负责数据采集功能，如注册、登录等数据采集

标签： <form>

表单项：不同类型的input元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式（text、password...）

<select>:定义下拉列表

<textarea>：定义文本区域

属性：

action：规定当提交表单时间项何处发送表单数据，URL

method：规定用于发送表单数据的方式。GET、POST

html 复制代码

<!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>
    <!-- form表单：
         action：表单数据提交的地址
         method：提交方式
            get：默认
                特点：
                    1. 如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式
                    2. 提交数据大小有限制（2KB）
            post： 表单数据会在详细提/请求体中提交到服务器
                特点：
                    1. 提交数据大小没有限制
                    2. 提交数据相对安全
         注意：表单项要想能够采集数据，必须设置name属性，表示当前表单项的名字-->
    <form action="/save" method="post">
        姓名：<input type="text" name="name">
        年龄：<input type="text" name="age">
        <input type="submit" value="提交">
    </form>
</body>
</html>

表单标签-表单项

html 复制代码

<!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>
    <form action="" 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>
        头像：<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>
            <option value="5">博士</option>
        </select><br><br>
        描述：<textarea name="description" id="" cols="30" rows="10"></textarea><br><br>
            <input type="submit" value="提交">
            <!-- 表单常见按钮 -->
            <input type="reset" value="重置">
            <input type="button" value="按钮">
            <input type="submit" value="提交">
    </form>
</body>
</html>

员工管理-搜索表单区域

html 复制代码

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 顶部导航栏样式 */
        .navbar {
            background-color: #808080; /* 灰色背景 */
            display: flex; /* 弹性布局，子元素水平排列*/
            padding: 10px;
            justify-content: space-between;
            align-items: center;
        }

        /* 标题样式 - 加大加粗 */
        .navbar h1 {
            margin: 0;
            font-weight: bold;
            color: white;
            /* 设置字体为楷体 */
            font-family: '楷体', sans-serif;
        }

        /* 退出登录链接样式 */
        .logout-link {
            color: white;
            text-decoration: none;
            font-size: 16px;
        }

        .logout-link:hover {
            text-decoration: underline;
        }

        /* 搜索表单区域样式 */
        .search-form {
            margin: 20px 0;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: nowrap;
        }
        .form-container {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .form-group {
            display: flex;
            align-items: center;
        }

        .form-group label {
            margin-right: 10px;
            font-weight: bold;
            white-space: nowrap;
            
        }

        .form-group input,
        .form-group select {
            padding: 5px;
            /* border: 1px solid #ddd; */
            /* border-radius: 4px; */
            /* font-size: 14px;  */
            width: 200px;
        }

        .form-buttons {
            display: flex;
            gap: 10px;
            margin-left: 125px;
        }

        .btn {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }

        .btn-query {
            background-color: #007bff;
            color: white;
        }

        .btn-reset {
            background-color: #6c757d;
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <!-- 第一部分：顶部导航栏 -->
    <nav class="navbar">
        <h1>Tlias智能学习辅助系统</h1>
        <a href="#" class="logout-link">退出登录</a>
    </nav>
    <!-- 第二部分：搜索表单区域 -->
    <div class="search-form">
        <form class="form-container" action="/search" method="post">
            <!-- 姓名输入框 -->
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" placeholder="请输入姓名">
            </div>

            <!-- 性别下拉选择 -->
            <div class="form-group">
                <label for="gender">性别:</label>
                <select id="gender" name="gender">
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>

            <!-- 职位下拉选择 -->
            <div class="form-group">
                <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>
            </div>

            <!-- 操作按钮 -->
            <div class="form-buttons">
                <button type="submit" class="btn btn-query">查询</button>
                <button type="reset" class="btn btn-reset">清空</button>
            </div>
        </form>
    </div>
</body>
</html>

员工管理-表格数据展示区域

表格标签

员工管理-版权展示区域

总结：