不是怎么还在转啊...

001-HTML-CSS

Web前端概述

  • 这个笔记是Java后端学习笔记，大部分前端由AI辅助

  • 一个网页由哪几个部分组成？各自的职责

    • HTML：负责网页的结构
    • CSS：负责网页的表现
    • JavaScript：负责网页的行为（动作）

  • 相关文档：MDN，可以直接搜索

  • VSCode

    • 插件

      image-20250814200800844

HTML-CSS

  • 什么是HTML
    • HTML(HyperText Markup Language)：超文本标记语言
      • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
      • 标记语言：由标签 “<标签名>” 构成的语言
        • HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频
        • HTML代码直接在浏览器中运行，HTML标签由浏览器解析

image-20250814193555966

  • 什么是CSS

    • CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）

      image-20250814193700656

HTML快速入门

image-20250814194257098

  • 注意：

    • 标签中的内容不区分大小写，大小写混写也没有区别，但建议小写
    • HTML代码语法结构松散，没那么严谨，结束标签没有也不会出错
    • 属性内容，比如双引号里的路径，包裹在单引号里也可以，建议使用双引号

  • 安装了VSCode的相关插件之后，就有许多便捷操作了

    • 打一个叹号回车就可以把如下代码架子搭好

      <!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>
  
</body>
</html>

    • 标签不用打尖括号，写出内容回车就可以添加尖括号

      image-20250815185147577

    • 右键文件可以直接选择在浏览器打开html文件，也可以选择在live server服务器上打开，这种方式的好处是每次保存能刷新页面

      image-20250815185233916

常见标签、样式

  • 以下为新闻网页的部分示例

    image-20250815213417724

  • 换行

    <br>

  • 标题标签h有h1~h6六级，没有七级标题

      <!-- 写一个标题，内容是：【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章 -->
  <!-- 
    h1:一级标题
    h2:二级标题
    h3:三级标题
    h4:四级标题
    h5:五级标题
    h6:六级标题
   -->
  <h1>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</h1>

  • 段落标签（段落标签自动换行）

      <!-- 段落标签 -->
  <p>段落标签1</p>
  <p>段落标签2</p>

  • 加粗

      <p>
    <b>b标签加粗文字</b>：收到后脑号网格法
    <strong>strong也是加粗标签</strong>
  </p>

  • 图片

    • 如果使用绝对磁盘路径，则需要本地运行，不能在服务器上运行，否则服务器找不到这张图片
      <!-- 引入一张图片 -->
  <!-- 
    src:图片的路径
      1. 绝对路径
        1.1 绝对的磁盘路径 "C:/Users/11202/Pictures/Screenshots/屏幕截图 2025-08-13 190350.png"
        1.2 绝对的网络路径 "https://www.cctv.com"
      2. 相对路径
        2.1 当前目录(从当前脚本所在文件夹开始，可以省略) "./"
        2.2 上一级目录 "../"
    alt:图片的替代文本
    width:设置图片的宽度
    height:设置图片的高度
      单位：px
      %:百分比
   -->
  <img src="C:/Users/11202/Pictures/Screenshots/屏幕截图 2025-08-13 190350.png">

  • 超链接标签a

    <!-- 定义一个超链接,里面展示央视网 -->
  <!-- 
    href:超链接的地址
    target:超链接的打开方式
      _blank:在新窗口打开
      _self:在当前窗口打开
   -->
  <a href="https://www.cctv.com" target="_blank">央视网</a>

CSS引入方式

行内样式：写在标签的style属性中（配合JavaScript使用）

image-20250815201705619

内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

image-20250815201807663

外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

image-20250815202108741

示例

  • 行内样式

      <!-- 行内样式 -->
  <!-- 
    style:行内样式
    color:设置文本颜色
   -->
  <span style="color: gray;">2024-10-24 09:00:00</span>

  • 内部样式

    <!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>
    
    
</head>
<body>
  <!-- 写一个标题，内容是：【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章 -->
  <!-- 
    h1:一级标题
    h2:二级标题
    h3:三级标题
    h4:四级标题
    h5:五级标题
    h6:六级标题
   -->
  <h1>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</h1>
  <!-- 定义一个超链接,里面展示央视网 -->
  <!-- 
    href:超链接的地址
    target:超链接的打开方式
      _blank:在新窗口打开
      _self:在当前窗口打开
   -->
  <a href="https://www.cctv.com" target="_blank">央视网</a>

  <!-- 使用内部样式 -->
   <span>2024-10-24 09:00:00</span>

</body>
</html>

  • 外部样式

    • 创建css文件

      image-20250815203027001

    • 编辑css

      /* 外部样式 */
span{
  color: gray;
}

    • 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> -->

  <!-- 外部样式 -->
  <!-- 
    rel:定义文档与外部样式表的关系
    href:定义外部样式表的路径
   -->
  <link rel="stylesheet" href="css/news.css">
</head>
<body>
  <!-- 写一个标题，内容是：【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章 -->
  <!-- 
    h1:一级标题
    h2:二级标题
    h3:三级标题
    h4:四级标题
    h5:五级标题
    h6:六级标题
   -->
  <h1>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</h1>
  <!-- 定义一个超链接,里面展示央视网 -->
  <!-- 
    href:超链接的地址
    target:超链接的打开方式
      _blank:在新窗口打开
      _self:在当前窗口打开
   -->
  <a href="https://www.cctv.com" target="_blank">央视网</a>

  <!-- 行内样式 -->
  <!-- 
    style:行内样式
    color:设置文本颜色
   -->
  <!-- <span style="color: gray;">2024-10-24 09:00:00</span> -->
   <span>2024-10-24 09:00:00</span>

</body>
</html>

颜色表示形式

image-20250815203428526

  • rgba表示法中：0代表完全透明，1代表完全不透明

  • 十六进制表示法中：每两位如果相同，则可以简写为一个字母

  • 示例

    /* 外部样式 */
span{
  /* 关键字表示法 */
  /* color: yellow; */
    
  /* RGB表示法 */
  /* color: rgb(255, 255, 0); */
    
  /* RGBA表示法 */
  /* color: rgba(255, 255, 0, 0.5); */
    
  /* 十六进制表示法 */
  /* color: #00fff7d2; */
  /* 十六进制表示法缩写 */
  color: #f00;
}

CSS选择器

  • 如果不同位置想要不同样式，一个span标签就不足以解决问题了

  • 给一个标签加id，可以直接写标签名加井号id回车，以此快捷生成

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

    image-20250815205019683

    • 三种选择器优先级：ID选择器 > 类选择器 > 元素选择器

  • 其他CSS选择器

    image-20250815210624023

  • 示例

    • 元素选择器：之前的实例就是元素选择器

    • 类选择器

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</title>
  <style>
    /* 
      .cls:类选择器
     */
    .cls{
      color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  
  <h1>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</h1>
  
  <a href="https://www.cctv.com" target="_blank">央视网</a>

  <!-- 类选择器选取的元素 -->
  <span class="cls">2024-10-24 09:00:00</span>

  <span>2024-10-24 09:00:00</span>

</body>
</html>

    • 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> 
    #time:ID选择器
    */
    #time{
    color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  
  <h1>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</h1>
  
  <a href="https://www.cctv.com" target="_blank">央视网</a>

  <!-- ID选择器选取的元素 -->
  <span id="time">2024-10-24 09:00:00</span>

</body>
</html>

超链接样式示例

  <style>
    /* 设置超链接样式 */
    a{
      color: #da20bb;
      /* 去除下划线 */
      text-decoration: none;
    }
  </style>

段落文字样式示例

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进常见十年禁渔  谱写长江大保护篇章</title>
  <style>
    p{
      /* 段落行高 */
      line-height: 2;
    }

  </style>
</head>

  • 首行缩进：

    • &nbsp;代表一个空格四个空格即首行缩进

        <p>
    &nbsp;&nbsp;&nbsp;&nbsp;<b>b标签加粗文字</b>：收到后脑壳网格法
    <strong>strong也是加粗标签</strong>
  </p>

    • 一个一个空格加太繁琐了，可以直接给段落添加首行缩进样式

      <style>
p{
  /* 段落行高 */
  line-height: 2;
  /* 首行缩进 */
  text-indent: 2em;
}
</style>

image-20250815214556139

盒子模型

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

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

    image-20250816175123543

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

  • 特点：

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

  • 示例

    image-20250816175630341

    根据数值个数不同，设置的方式也不同

  • 网页上点右键、检查，可以看元素

    image-20250816175852583

    点击这个箭头，可以提取元素

页面原型

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

flex布局

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

image-20250816182237701

image-20250816182250924

  • body元素自带有外边距8px，如果想去除外边距，指定body的margin为0

表单标签

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

  • 标签：<form>

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

    • <input> ：定义表单项，通过type属性控制输入形式（text/password/...）
    • <select> ：定义下拉列表
    • <textarea> ：定义文本域

  • 属性：

    • action：规定当提交表单时向何处发送表单数据，URL
    • method：规定用于发送表单数据的方式。GET、POST

  • GET方式表单数据会出现在URL后面

    • 特点：
      • 如果表单中包含密码等隐私数据，get方式不安全，不推荐使用get方式
      • 在浏览器中get请求的大小是有限制的，不适合提交大数据量的表单
    <!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>
  <!-- 
    action:表单提交的地址
    method:表单提交的方式
      get:get方式：
        1. 将表单数据拼接在url后面
        2. 有长度限制
      post:post方式
        1. 将表单数据放在请求体中
        2. 没有长度限制
   -->
  <form action="/save" method="get">
    <!-- 
      type:表单元素的类型
      name:表单元素的名称
   -->
    姓名： <input type="text" name="name">
    <br>
    <br>
    年龄： <input type="text" name="age">
    <br>
    <br>
    <!-- 
      type:表单元素的类型
      value:表单元素的值
   -->
    <input type="submit" value="提交">
  </form>
  
</body>
</html>

    image-20250816194446329

    image-20250816194540662

  • POST方式表单数据会在消息体/请求体中提交到服务器

    • 特点：
      • 安全
      • 请求大小没有限制
    <!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>
  <!-- 
    action:表单提交的地址
    method:表单提交的方式
      get:get方式：
        1. 将表单数据拼接在url后面
        2. 有长度限制
      post:post方式
        1. 将表单数据放在请求体中
        2. 没有长度限制
   -->
  <form action="/save" method="post">
    <!-- 
      type:表单元素的类型
      name:表单元素的名称
   -->
    姓名： <input type="text" name="name">
    <br>
    <br>
    年龄： <input type="text" name="age">
    <br>
    <br>
    <!-- 
      type:表单元素的类型
      value:表单元素的值
   -->
    <input type="submit" value="提交">
  </form>
  
</body>
</html>

    image-20250816194632361

    image-20250816194755077

表单标签-表单项

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

    image-20250816195108291

  • <select> ：定义下拉列表

    image-20250816195242710

  • <textarea> ：定义文本域

    image-20250816195254473

  • 关于<label> 标签：它包裹的内容被视为一个整体，比如将文字和勾选框放在这个标签里，点击文字也可以把勾选框勾选上

表格标签

image-20250818171530759

总结

image-20250818172142821

image-20250818172459106

posted @ 2025-08-23 15:54  Quirkygbl  阅读(5)  评论(0)    收藏  举报