不是怎么还在转啊...

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)    收藏  举报