HTML-CSS-常见标签与样式

[一. 央视新闻排版](#一. 央视新闻排版)
- [1.1 标题](#1.1 标题)
- [1.2 正文](#1.2 正文)
- [1.3 案例](#1.3 案例)
- - [1.3.1 顶部导航栏](#1.3.1 顶部导航栏)
  - [1.3.2 flex布局](#1.3.2 flex布局)
  - [1.3.3 表单标签](#1.3.3 表单标签)
  - [1.3.4 表单项标签](#1.3.4 表单项标签)
  - [1.3.5 表格](#1.3.5 表格)
- [1.3 课程总结](#1.3 课程总结)

\quad

一. 央视新闻排版

\quad
\quad

1.1 标题

\quad

ALT+p就是用AI快速生成

标题一共有6级

\quad

1.2 正文

\quad

定义视频

定义图片

样式处理

加粗展示

不用去记，AI会帮我们生成

盒子模型

\quad

1.3 案例

\quad

\quad

1.3.1 顶部导航栏

\quad

基于AI生成

java 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能学习辅助系统</title>



<style>
  /* 顶部导航栏样式 */
  .top-nav {
    background-color: #808080; /* 灰色背景 */
    overflow: hidden; /* 清除浮动 */
  }

  /* 标题样式 */
  .top-nav h1 {
    margin: 0;
    padding: 10px;
    float: left; /* 标题居左 */
    font-weight: bold; /* 加粗 */
    color: white; /* 白色文字 */
    font-family: '楷体';/* 楷体 */
  }

  /* 退出登录超链接样式 */
  .top-nav a {
    float: right; /* 超链接居右 */
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* 去除下划线 */
  }

  .top-nav a:hover {
    background-color: #ddd; /* 鼠标悬停时的背景色 */
  }
</style>
</head>



<body>

<!-- 顶部导航栏 -->
<div class="top-nav">
  <h1>Tlias智能学习辅助系统</h1>
  <a href="/logout">退出登录</a>
</div>

</body>
</html>

\quad

1.3.2 flex布局

\quad

1.3.3 表单标签

\quad

1.3.4 表单项标签

\quad

java 复制代码

<!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="/save" method="post">
        姓名：<input type="text" name="name">
        <br><br>

        密码：<input type="password" name="password">
        <br><br>

        性别: <input type="radio" name="gender" value="1"> 男
        <input type="radio" name="gender" value="2">女
        <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="data" 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>

        描述: <br>
        <textarea name="description" cols="30" rows="10"></textarea>

        <br><br>
        <input type="button" value="按钮">
        <input type="submit" value="提交">
        <input type="reset" value="重置">

        <br><br>



    </form>
</body>
</html>