当前位置： 首页 > news >正文

Web前端基础知识（一）

news 2026/4/9 10:44:10

前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容。

网页是在浏览器中呈现内容的文档或页面。

通常，网页使用HTML、CSS、JavaScript(JS)组成。

HTML:定义了页面的结构和内容。包括文本、图像、链接等。

CSS：定义页面的样式和布局。

JS：用于添加交互性和动态功能作用。

---------------------------------------------------------------------------------------------------------------------------------

浏览器，建议使用谷歌浏览器，安装步骤：

使用电脑自带的浏览器，搜索“联想应用商店”--->选择安装第一个稳定版本。具体步骤可参考B站大佬 up主“葡萄数码笔记”。

---------------------------------------------------------------------------------------------------------------------------------

谷歌搜索，必须联网。

---------------------------------------------------------------------------------------------------------------------------------

前端开发环境：

安装VSCode，并安装中文插件。

HTML CSS Support:写CSS代码的快捷工具。

Live Server:可以在浏览器中实时预览页面的变化。

Auto Rename Tage:在修改HTML标签时，同步修改与之匹配的另一个标签。

前端环境搭建完毕！

---------------------------------------------------------------------------------------------------------------------------------

HTML标签：

       HTML(超文本标记语言)，为网页提供结构。

       HTML告诉浏览器哪些部分是标题，哪些部分是段落，哪些是列表等。

       HTML标签可以通过属性来提供更多的信息。

       标签通常是成对出现的，包括开始标签和结束标签。

       <p>这是一个段落</p>

       <h1>这是一个标题</h1>

       <a href="#">这是一个超链接。</a>

       单标签，如下：

       <input type="text">

       <br>

       <hr>

       注意：单标签用于没有内容的元素，双标签用于有内容的元素。

---------------------------------------------------------------------------------------------------------------------------------

HTML 文件结构

       一个HTML文档，通常由以下几个部分组成：

              <!DOCTYPE html>     -----------------告诉浏览器这是一个HTML文件。

              <html>

              </html>   -------------------------------HTML标签对，也是HTML文档的根元素。HTML文档起                                                                    始标志。也是文档的最外层容器。

               <head>

               </head>-------------------------------head标签对，包含文档的元信息，比如，文档的标题；

                                                                  文档的编码格式；一些CSS、js文件。

               <body>

               </body>-------------------------------包含了，实际显示在浏览器中的页面内容。

---------------------------------------------------------------------------------------------------------------------------------

常用文本标签

               1.标题标签。HTML中有6个标题标签，分别用 h1 到 h6 表示。

               2.段落标签。<p> </p>

               3.HTML的文本格式化标签。<b></b>;<i></i>;<u></u>;<s></s>

               4.一个外部的<ul></ul>,包裹着几个<li></li>

               5.一个外部的<ol></ol>,包裹着几个<li></li>

               6.一个外部的<table></table>,行标签<tr></tr>,行标签中包裹着列标签<td></td>

               7.表格列标题：<tr><th>此处为表格列标题</th></tr>

---------------------------------------------------------------------------------------------------------------------------------

举例：<p>更改文本样式：<b>字体加粗</b>,<i>斜体</i>、<u>下划线</u>,<s>删除线</s></p>

效果：更改文本样式：字体加粗,斜体、下划线,删除线

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <ul>

        <li>无序列表元素1</li><li>无序列表元素2</li><li>无序列表元素3</li>

    </ul>

效果：

  • 无序列表元素1
  • 无序列表元素2
  • 无序列表元素3

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <ol>

        <li>有序列表元素1</li><li>有序列表元素2</li><li>有序列表元素3</li>

    </ol>

效果：

  1. 有序列表元素1
  2. 有序列表元素2
  3. 有序列表元素3

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <table>

        <tr>

            <th> 列标题1</th>

            <th> 列标题2</th>

            <th> 列标题3</th>

        </tr>

        <tr>

            <td>元素1</td>

            <td>元素2</td>

            <td>元素3</td>

        </tr>

    </table>

效果：

列标题1列标题2列标题3

元素1元素2元素3

---------------------------------------------------------------------------------------------------------------------------------

后续内容见《Web前端基础知识（二）》

               

相关文章：

Web前端基础知识（一）

前端是构建网页的一部分&#xff0c;负责用户在浏览器中看到和与之交互的内容。 网页是在浏览器中呈现内容的文档或页面。 通常&#xff0c;网页使用HTML、CSS、JavaScript(JS)组成。 HTML:定义了页面的结构和内容。包括文本、图像、链接等。 CSS&#xff1a;定义页面的样式…...

编程日记 2024/12/25 17:26:31

基于谱聚类的多模态多目标浣熊优化算法（MMOCOA-SC）求解ZDT1-ZDT4，ZDT6和工程应用--盘式制动器优化，MATLAB代码

一、MMOCOA-SC介绍 基于谱聚类的多模态多目标浣熊优化算法&#xff08;Multimodal Multi-Objective Coati Optimization Algorithm Based on Spectral Clustering&#xff0c;MMOCOA-SC&#xff09;是2024年提出的一种多模态多目标优化算法&#xff0c;该算法的核心在于使用谱…...

编程日记 2024/12/25 17:24:29

国标GB28181摄像机接入EasyGBS如何通过流媒体技术提升安防监控效率？

随着信息技术的飞速发展&#xff0c;视频监控技术已成为维护公共安全和提升管理效率的重要手段。国标GB28181作为安防行业的统一设备接入与流媒体传输标准&#xff0c;为视频监控系统的互联互通提供了坚实的基础。EasyGBS作为一款基于GB28181协议的视频云服务平台&#xff0c;通…...

编程日记 2024/12/25 17:23:28

[Unity] ShaderGraph动态修改Keyword Enum，实现不同效果一键切换

上次更新已然四个月前&#xff0c;零零散散的工作结束&#xff0c;终于有时间写点东西记录一下~ 实际使用中&#xff0c;经常会碰到同一个对象需要切换不同的材质&#xff0c;固然可以通过C#直接替换材质球。 或者在ShaderGraph中使用Comparison配合Branch实现切换&#xff…...

编程日记 2024/12/25 17:21:22

Unity开发哪里下载安卓Android-NDK-r21d,外加Android Studio打包实验

NDK下载方法&#xff08;是r21d,不是r21e, 不是abc, 是d版本呢) google的东西&#xff0c;居然是完全开源的 真的不是很多公司能做到&#xff0c;和那种伪搜索引擎是不同的 到底什么时候google才会开始造车 不过风险很多&#xff0c;最好不要合资&#xff0c;风险更大 Andr…...

编程日记 2024/12/25 17:17:17

FFTW基本概念与安装使用

FFTW基本概念与安装使用 1 基本概念2 编译安装3 使用实例3.1 单线程3.2 多线程 本文主要介绍FFTW库的基本概念、编译安装和使用方法。 1 基本概念 FFTW (Fastest Fourier Transform in the West)是C语言的一个子程序库&#xff0c;用于计算一维或多维离散傅里叶变换(Discrete …...

编程日记 2024/12/25 17:16:15

【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析

Hiヽ(゜▽゜　)&#xff0d;欢迎来到蓝染Aizen的CSDN博客~ &#x1f525; 博客主页&#xff1a; 【✨蓝染 の Blog&#x1f618;】 &#x1f496;感谢大家点赞&#x1f44d; 收藏⭐ 评论✍ 文章目录 行为型模式1、模板方法模式&#xff08;1&#xff09;概述&#xff08;2&…...

编程日记 2024/12/25 17:10:10

教师如何打造专属私密成绩查询系统？

期末的校园&#xff0c;被一种特殊的氛围所笼罩。老师们如同辛勤的工匠&#xff0c;精心打磨着每一个教学环节。复习阶段&#xff0c;他们在知识的宝库中精挑细选&#xff0c;把一学期的重点内容一一梳理&#xff0c;为学生们打造出系统的复习框架。课堂上&#xff0c;他们激情…...

编程日记 2024/12/25 17:09:06

【1224】C选填(字符串\0占大小，类大小函数调用，const定义常量，逗号表达式取尾，abs返回值

1.设有数组定义: char array[]"China"; 则数组array所占的存储空间为__________ 6 注意要加上\0的位置 数组中考虑‘\0’&#xff0c;sizeof()判断大小也要考虑‘\0’ 2.初始化数组char[] strArray"kuai-shou"&#xff0c;strArray的长度为&#xff08;&am…...

编程日记 2024/12/25 17:06:01

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——终篇

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——终篇 ​ 至此&#xff0c;本系列的所有备赛分享已经结束 ​ 首先说说备赛的过程吧&#xff0c;这次比赛&#xff0c;真的是让我学到了太多书本上学不到的东西。一开始&#xff0c;对统筹控制还很模糊&a…...

编程日记 2024/12/25 17:02:57

复合机器人：开启智能制造新时代

在当今科技飞速发展的时代&#xff0c;智能制造已成为制造业转型升级的关键驱动力。而复合机器人作为智能制造领域的一颗璀璨新星&#xff0c;正以其卓越的性能和创新的设计&#xff0c;为各行各业带来前所未有的变革与机遇。 复合机器人&#xff0c;顾名思义&#xff0c;是融…...

编程日记 2024/12/25 16:59:43

装饰者模式

代码详解&#xff1a;【设计模式】Java 设计模式之装饰者模式&#xff08;Decorator&#xff09;_java 装饰者模式-CSDN博客 // 抽象构件角色 public interface Component {void operation(); }// 具体构件角色 public class ConcreteComponent implements Component {Override…...

编程日记 2024/12/25 16:57:39

【机器学习】当教育遇上机器学习：打破传统，开启因材施教新时代

我的个人主页 我的领域&#xff1a;人工智能篇&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;&#x1f44d;点赞 收藏❤ 教育是人类社会发展的基石&#xff0c;然而传统教育模式往往难以满足每个学生的个性化需求。随着机器学习技术的兴起&#xff0c;教…...

编程日记 2024/12/25 16:54:35

【蓝桥杯每日一题】分糖果——DFS

分糖果 蓝桥杯每日一题 2024-12-24 分糖果 DFS 题目描述 两种糖果分别有 9 个和 16 个&#xff0c;要全部分给 7 个小朋友&#xff0c;每个小朋友得到的糖果总数最少为 2 个最多为 5 个&#xff0c;问有多少种不同的分法。糖果必须全部分完。 只要有其中一个小朋友在两种方案中…...

编程日记 2024/12/25 16:51:33

information_schema是什么？

前言 在现代数据驱动的应用开发中&#xff0c;理解和管理数据库结构变得尤为重要。几乎所有的SQL数据库管理系统&#xff08;DBMS&#xff09;都提供了一个名为 information_schema 的虚拟数据库。它不仅是一个了解数据库内部结构的强大工具&#xff0c;也是一个实现跨平台兼容…...

编程日记 2024/12/25 16:50:32

案例分析-THC7984设计问题报告

目录 简介 配置信息 结论： 简介 使用的环境 AD芯片：THC7984 VGA信号：通过电脑主机产生1024x768 60HZ信号。 配置信息 AD数字数字产生通过FPGA接收。 AD寄存器配置（第一个数数据，第二个是地址）： iic_write_reg 1 0x1e iic_write_reg 02 0x5...

编程日记 2024/12/25 16:49:30

HarmonyOS NEXT 技术实践-基于基础视觉服务的多目标识别

在智能手机、平板和其他智能设备日益智能化的今天&#xff0c;视觉识别技术成为提升用户体验和智能交互的重要手段。HarmonyOS NEXT通过基础视觉服务&#xff08;HMS Core Vision&#xff09;提供了一套强大的视觉识别功能&#xff0c;其中多目标识别作为其关键技术之一&#x…...

编程日记 2024/12/25 16:46:25

【python】银行客户流失预测预处理部分，独热编码·标签编码·数据离散化处理·数据筛选·数据分割

数据预处理 通过网盘分享的文件&#xff1a;银行流失预测数据和代码 链接: https://pan.baidu.com/s/1loiB8rMvZArfjJccu4KW6w?pwdpfcs 提取码: pfcs 非数值特征处理 目的&#xff1a;将非数值特征转换为数值型&#xff0c;以便模型能够处理。方法&#xff1a; 地理位置&am…...

编程日记 2024/12/25 16:45:25

使用 docker ps 查不到刚刚创建的容器

问题描述 docker创建mysql容器并实现本地目录挂载&#xff0c;虽然创建成功了&#xff0c;但是查看容器却不存在&#xff0c;删除重新创建还是同样的问题。 原因分析&#xff1a; 因为做本地目录挂载的时候在宿主机中创建了相关文件夹&#xff0c;并且还预先把数据库文件丢…...

编程日记 2024/12/25 16:40:16

vue2+element 前端表格下载

前台下载table表格 可下载fixed columns和普通平铺的表格 exportExcel() {const tableContainer document.querySelector(#table)const fixflg tableContainer ? tableContainer.querySelector(.el-table__fixed) : null// const fixflg document.querySelector(.el-table_…...

编程日记 2024/12/25 16:38:12

Python 执行式AI：必备基础与语法速查

Python 执行式AI&#xff1a;必备基础与语法速查&#x1f4dd; 本章学习目标&#xff1a;本章是入门认知部分&#xff0c;帮助零基础读者建立对AI Agent的初步认知。通过本章学习&#xff0c;你将全面掌握"Python 执行式AI&#xff1a;必备基础与语法速查"这一核心主…...

编程新知 2026/4/9 10:15:36

5种场景让网易云音乐直链解析API成为开发者必备工具

5种场景让网易云音乐直链解析API成为开发者必备工具 【免费下载链接】netease-cloud-music-api 网易云音乐直链解析 API 项目地址: https://gitcode.com/gh_mirrors/ne/netease-cloud-music-api 你是否曾遇到过分享的音乐链接突然失效的尴尬&#xff1f;作为开发者&…...

编程新知 2026/4/9 9:27:41

一文搞懂RAG分块技术：提升大模型准确性的关键（建议收藏）

文本分块&#xff08;Chunking&#xff09;是决定 RAG&#xff08;检索增强生成&#xff09;系统成败的核心技术之一&#xff0c;却常常在幕后默默发挥作用。简单来说&#xff0c;分块就是把长文档切分成更小、结构化的片段&#xff0c;让 AI 系统能够真正检索和推理。 分块可以…...

编程新知 2026/4/9 8:52:36

十大排序算法详解：从原理到实战，苹果群控系统游戏运营如何实现自动执行任务。

排序算法概述 排序算法是将一组数据按照特定顺序&#xff08;如升序或降序&#xff09;重新排列的算法。根据时间复杂度、空间复杂度、稳定性等特性&#xff0c;排序算法可分为比较排序和非比较排序两大类。常见算法包括冒泡排序、快速排序、归并排序、堆排序、计数排序等。比较…...

编程新知 2026/4/9 8:40:10

利用C语言高性能库优化SDMatte前后处理速度

利用C语言高性能库优化SDMatte前后处理速度 1. 为什么需要优化SDMatte前后处理 在实际的图像处理项目中&#xff0c;我们经常会遇到这样的场景&#xff1a;核心AI模型推理速度很快&#xff0c;但前后处理却成了性能瓶颈。SDMatte作为一款优秀的图像分割工具&#xff0c;也面临…...

编程新知 2026/4/9 7:56:48

百度网盘提取码智能获取工具：如何3秒内快速解锁加密资源？

百度网盘提取码智能获取工具&#xff1a;如何3秒内快速解锁加密资源&#xff1f; 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 还在为百度网盘加密资源而烦恼吗&#xff1f;每次遇到需要提取码的分享链接&#xff0c;你都要…...

编程新知 2026/4/9 7:10:42

DeepSeek-R1-Distill-Llama-8B在YOLOv8目标检测中的应用实践

DeepSeek-R1-Distill-Llama-8B在YOLOv8目标检测中的应用实践 1. 当目标检测遇上大模型&#xff1a;为什么需要LLM的智能加持 在安防监控系统里&#xff0c;我们经常遇到这样的场景&#xff1a;摄像头拍到画面中有人拿着工具靠近配电箱&#xff0c;系统却只标注出"人&quo…...

编程新知 2026/4/9 6:02:45

保姆级指南：Mac上如何一键部署GLM-4.6V-Flash-WEB，实现图片智能问答

保姆级指南&#xff1a;Mac上如何一键部署GLM-4.6V-Flash-WEB&#xff0c;实现图片智能问答 1. 为什么选择GLM-4.6V-Flash-WEB&#xff1f; 在当今AI技术快速发展的时代&#xff0c;能够"看懂"图片并回答问题的多模态模型变得越来越重要。GLM-4.6V-Flash-WEB是智谱…...

编程新知 2026/4/9 5:30:01

STM32最小系统PCB布线实战：从元器件布局到GND敷铜

1. STM32最小系统PCB设计入门指南 第一次接触STM32最小系统板设计时&#xff0c;我被密密麻麻的元器件和错综复杂的走线搞得头晕眼花。后来才发现&#xff0c;只要掌握几个关键原则&#xff0c;PCB布线并没有想象中那么难。STM32最小系统板通常包含主控芯片、电源模块、时钟电路…...

编程新知 2026/4/9 4:45:05

tmux 示例

技术文章大纲示例&#xff1a;人工智能在医疗诊断中的应用 引言 概述人工智能在医疗领域的重要性当前医疗诊断面临的挑战人工智能技术的引入如何改变传统诊断方式 人工智能技术基础 机器学习与深度学习的核心概念计算机视觉在医疗影像分析中的作用自然语言处理&#xff08;NLP&…...

编程新知 2026/4/9 3:35:49