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

Web前端开发——HTML快速入门

news 2026/2/3 14:35:26

  • HTML：控制网页的结构
  • CSS：控制网页的表现

一、什么是HTML、CSS

（1）HTML

（HyperText Markup Languaqe：超文本标记语言）

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频、超链接等内容（如基于Windows所操作的记事本所编写的一类文本称为普通文本）
  • 标记语言：由标签构成的语言
  1. HTML标签都是预定义好的。例如:使用<a>展示超链接，用<img>展示图片，<video>展示视频。
  2. HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

所以学习HTML，主要学习它里面常用的标签。

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

所以学习CSS，主要学习它里面定义的常用的样式。

（3）前端学习(HTML、CSS、JS)的官方文档

w3school 在线教程icon-default.png?t=N7T8https://www.w3school.com.cn/

二、HTML快速入门

（1）简单操作
  • 新建一个文本文件，并把文件后缀名改成：".html" 。
  • 编写HTML结构标签——>例如一旦见到<html> ... </html>标签，浏览器解析就知道要以HTML的格式来解析。
  • 在<html>标签中写一个<head>标签和一个<body>标签。在<head>当中，定义一个<title>标签去定义一个HTML文件的标题，而在<body>当中编写HTML文件当中的页面内容。

（在我们的操作系统当中，如果是".html"后缀的文件，默认是会被浏览器识别的）

（2）简单入门代码（用记事本编写）
  • <img src=""/> (自闭合)也可以写出 <img src=""></img>
<html><head><title>HTML 快速入门</title></head><body><h1>Hello World!</h1><img src="666.jpg"/></body>
</html>

（3）注意事项
  • HTML当中的标签是不区分大小写的。（一般使用小写）<html> 写成 <HtmL> 一样的可以得到运行效果。
  • HTML标签的属性值单双引号都可以。在HTML标签的属性时，例如"src"属性，可以接单引号也可以接双引号。
  • HTML的语法比较松散。指的是HTML的语法并不严格。
（4）HTML结构标签

相关文章：

Web前端开发——HTML快速入门

HTML&#xff1a;控制网页的结构CSS&#xff1a;控制网页的表现 一、什么是HTML、CSS &#xff08;1&#xff09;HTML &#xff08;HyperText Markup Languaqe&#xff1a;超文本标记语言&#xff09; 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了…...

编程日记 2024/7/5 7:26:22

浅谈http协议及常见的面试题

1、浅谈http协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;超文本传输协议&#xff0c;是互联网上应用最为广泛的一种网络协议&#xff0c;所有的WWW文件都必须遵守这个标准。它是基于TCP/IP通信协议来传递数据&#xff08;HTML文件、图片文件、查询结果等&am…...

编程日记 2024/7/5 7:25:21

LabVIEW自动探头外观检测

开发了一套基于LabVIEW的软件系统&#xff0c;结合视觉检测技术&#xff0c;实现探头及连接器外观的自动检测。通过使用高分辨率工业相机、光源和机械手臂&#xff0c;系统能够自动定位并检测探头表面的细微缺陷&#xff0c;如划痕、残胶、异色、杂物等。系统支持多种探头形态&…...

编程日记 2024/7/5 7:23:19

搏击与防卫笔记

文章目录 降龙十八掌 咏春个人防身笔记防卫直拳应对耳光防卫摆拳坐马冲拳 本来想以武术为标题的&#xff0c;想了想武术这个标题太大太深&#xff0c;自己连一知半解都算不上&#xff0c;就谢为搏击与防卫吧。 每个男孩都有个武侠梦&#xff0c;独步江湖&#xff0c;仗剑走天涯…...

编程日记 2024/7/5 7:22:18

泰国内部安全行动司令部数据泄露

BreachForums 论坛的一名成员宣布发生一起重大数据泄露事件&#xff0c;涉及泰国内部安全行动司令部 (ISOC)&#xff0c;该机构被称为泰国皇家武装部队的政治部门。 目前&#xff0c;我们无法准确确认此次泄露的真实性&#xff0c;因为该组织尚未在其网站上发布有关该事件的任…...

编程日记 2024/7/5 7:21:17

MATLAB算法实战应用案例精讲-【数模应用】分层聚类（附MATLAB、python和R语言代码实现）

目录 前言 几个高频面试题目 什么情况下选择分层聚类，什么情况下选择K-mean聚类呢？两种模型的好坏如何比较？ 算法原理 SPSSAU 案例分析 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 6、输出结果分析 7、注意事项 8、模型理论 分层…...

编程日记 2024/7/5 7:20:16

九、函数的声明和定义

函数声明&#xff1a; 1. 告诉编译器有一个函数叫什么&#xff0c;参数是什么&#xff0c;返回类型是什么。但是具体是不是存在&#xff0c;函数 声明决定不了。 2. 函数的声明一般出现在函数的使用之前。要满足先声明后使用。 3. 函数的声明一般要放在头文件中的。 定义的函…...

编程日记 2024/7/5 7:19:15

简洁纯文字类的Typecho主题wenso

主题介绍 文章说说类博客网站源码&#xff0c;页面清新简洁。适合文章说说美文博客网站建站使用&#xff0c;响应式手机版本。 本来是dedecms的模板&#xff0c;也比较简单&#xff0c;适合用来搭建一个文学类的&#xff0c;纯文字的网站&#xff0c;简单的改成了typecho&…...

编程日记 2024/7/5 7:16:12

安卓请求服务器[根据服务器的内容来更新spinner]

根据服务器的内容来更新spinner 本文内容请结合如下两篇文章一起看: 腾讯云函数node.js返回自动带反斜杠 腾讯云函数部署环境[使用函数URL] 现在有这样一个需求,APP有一个下拉选择框作为版本选择,因为改个管脚就变成一个版本,客户需求也很零散,所以后期会大量增加版本,这时候每…...

编程日记 2024/7/5 7:14:11

c++ 联合（Union）的特性和使用

联合&#xff08;Union&#xff09;是一种特殊的数据结构&#xff0c;允许在同一内存位置存储不同的数据类型。一个 union 可以有多个数据成员&#xff0c;但是在任意时刻只有一个数据成员可以有值。当某个成员被赋值后其他成员变为未定义状态。以下是联合的主要特点和使用方式…...

编程日记 2024/7/5 7:12:09

大白菜U盘启动工具

大白菜如何u盘启动进winpe装系统大白菜是一款非常实用的U盘启动盘制作工具&#xff0c;可以帮助用户快速地将U盘制作成启动盘&#xff0c;从而方便地进行系统安装、维护和修复等操作。官方网站&#xff1a; 大白菜u盘启动盘制作工具_大白菜u盘装系统_大白菜pe_大白菜官网-首页…...

编程日记 2024/7/5 7:11:08

C# 中 IEnumerable 和 IQueryable 接口之间的区别

在 C# 中&#xff0c;IEnumerable和IQueryable接口都用于查询数据集合&#xff0c;但它们的用途不同&#xff0c;功能也不同。下面是它们之间差异的细分&#xff1a; 1. C# 中的 IEnumerable 接口 在命名空间中定义System.Collections。表示集合中元素的只进式游标。适用于查…...

编程日记 2024/7/5 7:10:07

centos安装yum命令及常用yum命令

一、准备工作 获取安装介质&#xff1a; 如果你有CentOS的安装ISO文件或DVD介质&#xff0c;可以直接使用它来设置本地yum源。 如果没有&#xff0c;你需要在一个有网络连接的CentOS系统上下载所需的rpm包和依赖。 创建挂载点&#xff08;如果你使用的是ISO文件&#xff09;&a…...

编程日记 2024/7/5 7:09:07

table = collections.defaultdict(list)申请的字典的类型是什么？

当你使用 collections.defaultdict(list) 来申请一个字典时&#xff0c;这个字典的类型是 defaultdict&#xff0c;但是其行为和表现方式在某些方面与普通的字典&#xff08;dict&#xff09;相似&#xff0c;主要区别在于它如何处理缺失的键。 defaultdict 是 Python 标准库 …...

编程日记 2024/7/5 7:08:06

【虚拟机】虚拟机网络无法访问问题【已解决】

【虚拟机】虚拟机无法上网问题【已解决】 问题探究解决方法法1&#xff1a;查看相关“网络服务”是否处于正常启动状态法2&#xff1a;重启网络法3&#xff1a;重新安装VMWare法4&#xff1a;使用NAT模式&#xff0c;每次打开win7都没连上网的解决办法 问题探究 安装了很多个虚…...

编程日记 2024/7/5 7:06:04

大数据面试题之Spark(3)

目录 Spark的哪些算子会有shuffle过程? Spark有了RDD&#xff0c;为什么还要有Dataform和DataSet? Spark的RDD、DataFrame、DataSet、DataStream区别? Spark的Job、Stage、Task分别介绍下&#xff0c;如何划分? Application、job、Stage、task之间的关系 Stage内部逻辑…...

编程日记 2024/7/5 7:04:02

基于 Gunicorn + Flask + Docker 的模型高并发部署

在现代 Web 应用程序中&#xff0c;处理高并发请求是一个常见且重要的需求。本文将介绍如何使用 Gunicorn、Flask 和 Docker 来实现模型的高并发部署。我们将从环境设置、代码实现、Docker 镜像构建及部署等方面进行详细讲解。 一、环境设置 1. 安装 Flask 首先&#xff0c;…...

编程日记 2024/7/5 7:03:00

CPU通过网络将IP camera的RTSP流(H.264编码或是H.265编码)拉回， 交给GPU解码并显示的处理流程

这个流程涉及到从IP摄像头获取视频流&#xff08;通过RTSP协议&#xff09;&#xff0c;然后将流传输给GPU进行解码和显示的过程。详细的流程描述如下&#xff1a; 1. 获取视频流: - **IP摄像头**: 摄像头通过RTSP&#xff08;Real-Time Streaming Protocol&#xff09;将…...

编程日记 2024/7/5 7:01:59

windows@资源管理器中的地址栏@访问共享文件夹的各种方法@管理共享文件夹

文章目录 资源管理器中的地址栏可以访问什么访问共享文件夹&#x1f47a;UNC路径资源管理器打开共享文件夹纯命令行方式访问共享文件夹 共享文件夹相关操作查看所有已经共享的文件夹&#x1f47a;停止某个文件的共享 共享文件夹的访问控制补充匿名访问问题&#x1f60a;强制启用…...

编程日记 2024/7/5 6:58:56

ffmpeg推流时Unknown encoder ‘libx264‘

如果环境中有conda&#xff0c;最简单的办法就是 conda uninstall ffmpeg conda install ffmpeg 或者 sudo apt-get install -y libgmp3-dev pkg-config gnutls-bin libaom-dev libass-dev libbluray-dev libfdk-aac-dev libmp3lame-dev libopencore-amrnb-dev libopencore-…...

编程日记 2024/7/5 6:57:55

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/26 19:01:00

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/1/31 7:55:47

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2026/1/22 13:43:14

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2026/1/23 16:40:08