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

001+limou+HTML——（1）HTML入门知识

news 2025/11/7 11:33:28

000、本人编写前言

前言：本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》，经过修改制成的自学笔记，本书很适合小白学习入门web的相关知识，你也可以先看看我从中学到了什么，再考虑是否去认真学习这本书。

001、HTMl简介

（1）前端技术解说

①从“网页制作”到“前端开发”

  • “网页制作”是web1.0时代（2005前）的产品，主要是静态网页，即仅仅供用户浏览图片和文字，而无法与服务器进行数据交互的页面。那个时候的网页开发工具三大件：Dreamweaver、Fireworks、Flash
  • “前端开发”是web2.0时代（2005后）的产品，由网页制作演变而来，这个时候网页分成两种（静态网页和动态网页）这个时候的网页开发工具三大件：HTML、CSS、JavaScript

②从“前端开发”到“后端开发”

  • 前端开发最为核心的技术就是：HTML、CSS、Javascript。
  • “HTML控制网页结构，CSS控制网页外观、Javascript控制网页行为”相当于一个盖房子的流程

i、使用HTML设置网页的字体类型、背景颜色等
ii、使用CSS修饰字体类型、字体大小、背景颜色等
iii、使用Javascript定义鼠标事件，当鼠标挪到某个按钮时，按钮的颜色会改变

  • 掌握了前端技术的核心就可以开始开发网站了。但是开发的只是静态网页，只能用于浏览不能和服务器交互，因此学完三大核心后就还要学习后端技术
  • 几种常见的后端技术：PHP（比较通用的开源脚本语言）、JSP（类似ASp技术，可以在传统的HTML网页中插入Java程序段（scriptlet）和JSP标记（tag），从而形成JSP文件用JSP开发的网站是跨平台的，既可以在windows下运行也可以在Linux等操作系统上运行）、ASP.NET（前生就是ASP技术）

③学习路线推荐

  • HTML----CSS----Javascript----jQuery----HTML5----CSS3----ES6----移动web----Vue.js
  • 另外不一定要等到精通一门后才学习下一门（这也是很难的），很多技术都具有交叉关系。我很喜欢折本书里的一句话“只有‘通’十行，才可能做到‘精’一行”

（2）什么是HTML

①HTML全称是“HyperText Markup language”，即超文本标记语言，严格来说HTML不属于一种编程语言，而属于标记语言

②HTML通过多对标签来描述网页，学习HTML就相当于学习这些标签，用来搭建网页的骨架

<p>一段文字</p>  <!--<p>和</p>就是一对标签-->

③有时候也会叫“标签”为“元素”，如把“p标签”说成“p元素”

④通过HTML标签来描述一个网页生成一个.html文件，再由浏览器解读（打开）这个文件，就可以将网页的效果呈现给用户

002、开发工具

前期只是写HTML的话，推荐使用VScode即可，安装一些有关web开发的插件吧，或者你有其他能编写HTML的编辑器也可以。

003、基本标签

HTML的基本结构如下：

<!DOCTYPE html>     <!--文档声明-->
<html>              <!--HTML标签，以下到此标签结束都是HTML文档--><head>          <!--页头--></head><body>          <!--页身--></body>
</html>

（1）文档声明

“!DOCTYPE html”标签是文档声明，表示这是一个HTML页面，最好是必须携带有这个标签

（2）html标签

告诉浏览器，这个页面是从开始，到结束的。

  • 有的时候还会在里面看到有一个属性为xmlns的代码，例如表示当前页面使用的是W3C的XHTML标准，不过这点可以暂时不理会

（3）head标签

是网页的头部，用于定义一些特殊的内容，例如：页面标题、定时刷新、外部文件等，一般来说只有六个标签能放在里面

  • title标签，定义网页标题
<!DOCTYPE html>
<html><head><title>网页标题</title></head><body></body>
</html>
  • meta标签，定义页面的特殊消息，例如页面关键字、页面描述。这些信息很重要，是给搜索引擎蜘蛛看的，方便我们平时通过关键字等搜索得到这个页面，而mate标签有两个重要的属性（name、http-equiv）
    • name可以描述网页的信息，在实际开发中最重要的其实只有keywords和description
    • http-equiv可以描述网页所使用的编码和定义网页自动刷新跳转，如果不加上有可能会产生乱码的问题
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">--><meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站--><title>网页标题</title><meta name="keywords" content="网页的关键字:学习HTML的练手网站"/><meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/><meta name="author" content="网页的作者:limou3434"/><meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/></head><body></body>
</html>
  • style标签，用于定义页面的CSS样式，等学到了CSS后再进行讨论
  • link标签，用于引入外部样式文件（CSS文件），等学到了CSS后再进行讨论
  • script标签，用于定义页面的Javascript代码，也可以引入外部的JavaScript文件，等学到了Javascript后再进行讨论
  • base标签，这个标签我们暂时忽略不讲，只需要知道有这个标签就好了

（4）body标签

是网页的身体，大部分的网页标签都会被写在这里面，比如在里面写入p标签（段落标签，显示一段文字）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">--><meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站--><title>网页标题</title><meta name="keywords" content="网页的关键字:学习HTML的练手网站"/><meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/><meta name="author" content="网页的作者:limou3434"/><meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/></head><body><p>网页第一段内容……</p>  <!--这里是p标签。可以写长长的一段话，并且会在浏览器显示中自动换行噢！--><p>网页第二段内容……</p> <p>网页第三段内容……</p><p>网页第四段内容……</p><p>网页第五段内容……</p><p>网页第六段内容……</p><p>网页第七段内容……</p></body>
</html>

（5）注释标签用于编写注释

用于编写注释

<!--这是一段注释…-->
/*这也是一段注释*/

相关文章：

001+limou+HTML——（1）HTML入门知识

000、本人编写前言 前言&#xff1a;本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》&#xff0c;经过修改制成的自学笔记&#xff0c;本书很适合小白学习入门web的相关知识&#xff0c;你也可以先看看我从中学到了什么&#xff0c;再考虑是否去认真学习这本…...

编程日记 2023/4/22 3:40:32

使用Arduino Uno构建一个巡线机器人

使用Arduino Uno构建一个巡线机器人 原文 MX 巡线机器人&#xff08;**LFR&#xff09;**是一种简单的自主引导机器人&#xff0c;它遵循在地面上绘制的线来检测白色表面上的暗线或黑暗表面上的白线。在本教程中&#xff0c;使用 Arduino Uno 和一些易于访问的组件构建黑线跟…...

编程日记 2023/4/22 3:40:15

【C++】类和对象（收尾）

文章目录成员变量初始化问题初始化列表explicit关键字static成员特性&#xff1a;友元友元函数友元类内部类特性匿名对象成员变量初始化问题 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给了对象中各个成员变量一个合适的初始值。但是这并不能够称为对对象中成…...

编程日记 2023/4/22 3:39:59

Linux延迟操作

一、软中断Linux内核中定义了如下几种软中断&#xff1a;enum {HI_SOFTIRQ0,TIMER_SOFTIRQ,NET_TX_SOFTIRQ,NET_RX_SOFTIRQ,BLOCK_SOFTIRQ,IRQ_POLL_SOFTIRQ,TASKLET_SOFTIRQ,SCHED_SOFTIRQ,HRTIMER_SOFTIRQ,RCU_SOFTIRQ, /* Preferable RCU should always be the last soft…...

编程日记 2023/3/9 3:07:08

np.insert()函数用法

目录insert()函数定义程序举例说明行插入列插入多数值行插入完整的程序和显示结果&#xff1a;insert()函数定义 insert(arr, obj, values, axisNone) 参数说明&#xff1a; arr : 需要插入的数组&#xff0c;即Input array&#xff1b; obj&#xff1a;向数组中插入值的位置…...

编程日记 2023/3/9 3:06:02

学习笔记-架构的演进之容器的封装-3月day06

文章目录前言封装应用的Dockerwhy Docker not LXC?附前言 当文件系统、访问、资源都可以被隔离后&#xff0c;容器就已经具备它降生所需要的全部前置支撑条件了。为了降低普通用户综合使用 namespaces、cgroups 这些低级特性的门槛&#xff0c;2008 年 Linux Kernel 2.6.24 内…...

编程日记 2023/3/9 3:04:58

Gorm根据关系模型中的属性查询原模型数据

type ExamResult struct {gorm.ModelExamManagementID uintExamManagement ExamManagement json:"examManagement" // 一场考试&#xff0c;其中有试卷&#xff0c;有试题&#xff0c;有试题答案//MarkExamPaperRecord MarkExamPaperRecord //每一场考试对应的结…...

编程日记 2023/3/9 3:03:56

车载技术【USB接口】—Android配件协议AOA【AOA连接】

简述 AOA协议是Google公司推出的用于实现Android设备与外围设备之间USB通信的协议。该协议拓展了Android设备USB接口的功能&#xff0c;为基于Android系统的智能设备应用于数据采集和设备控制领域提供了条件。介绍了Android系统下USB通信的两种模式&#xff0c;并给出了USB配件…...

编程日记 2023/3/9 3:02:53

SpringBoot的基本概念和使用

文章目录一、什么是SpringBoot二、Spring Boot优点三、Spring Boot项目创建四、Spring Boot 配置文件1. yml语法2.properties与yml关系3.多系统的配置五、Spring Boot日志文件1.日志对象2.日志级别日志级别的设置System.out.println VS 日志的两个致命缺点3.日志持久化4.更简单…...

编程日记 2023/3/9 3:01:50

基于计算机软件技术的化工设计特点

2.1 便利性将计算机软件技术应用于化工设计环节&#xff0c;最大的优点就在于提升了化工企业生产的便利性。化工设计作为化工生产的基础&#xff0c;在化工设计环节需要到有关化学反应和工艺流程设计等的相关问题&#xff0c;通过利用计算机软件技术可以为上述工作提供很好的辅…...

编程日记 2023/3/9 3:00:48

Nativefier把网页打包成exe

前要&#xff1a; 今天遇到一个需求&#xff0c;之前的应用都是用的h5挂载在企业微信的小应用&#xff0c;但是现在需要电脑运行的exe安装包&#xff01; 所以需要用到nativefier导报工具&#xff1a;nativefier是一个使用electron将网页转换为app的插件&#xff0c;写这篇博客…...

编程日记 2023/4/22 7:39:51

STM32U5开发(1)----通过 USART1 发送数据

概述 通过 USART1 发送一些数据。 最近在弄ST和GD的课程&#xff0c;需要样片的可以加群申请&#xff1a;6_15061293。 生成例程 使用STM32CUBEMX生成例程&#xff0c;这里使用NUCLEO-U575ZI开发板。 选择工程的时候&#xff0c;先不必选择加载了TrustZone。 样品申请 h…...

编程日记 2023/4/18 23:09:09

20230308 Apdl lsdyna两杆撞击案例学习笔记

本次模拟使用的是ANSYS 16.0 一、设置Element type 首先打开APDL界面 添加element type 在LS-DYNA Explicit选择条件下，选择3D solid 164 二、设置材料类型 选择material models 选择Elastic-Isotropic-输入 Density：密度 EX:杨氏模量 NUXY:泊松比 三、几何模型建…...

编程日记 2023/4/20 20:26:32

互相关延时估计 Matlab仿真

文章目录互相关延时估计什么是互相关延时估计&#xff1f;原理代码实现总结互相关延时估计 互相关延时估计是一种信号处理技术&#xff0c;用于计算两个信号之间的时间延迟。在本篇博客中&#xff0c;我们将使用MATLAB来实现互相关延时估计&#xff0c;并提供多个例子和代码&a…...

编程日记 2023/4/22 7:39:38

谷歌插件Fetch在不同页面之间Cookie携带情况详解

content script 和 script inject 表现情况 在碰到content script 注入和用script标签注入一样&#xff0c;即使服务端有写入Cookie到域名下在该tab标签应用下也不会被保存&#xff0c;所以在发送时也无法自动携带&#xff0c;所以通过content script和<script>这种方式…...

编程日记 2023/4/22 7:39:30

Vue学习笔记（8）

8.1 组件自定义事件 在 Vue 中&#xff0c;组件可以通过自定义事件来实现组件之间的通信。自定义事件可以让一个组件触发一个事件&#xff0c;并向其他组件传递数据。以下是自定义事件的实现步骤&#xff1a; 在组件中定义一个事件名&#xff1a;可以在组件中使用 $emit 方法来…...

编程日记 2023/4/22 7:39:21

知道一个服务器IP应该怎么进入

首先我是国内&#xff0c;访问国外的网站比如谷歌等&#xff0c;访问特别慢&#xff0c;有时候甚至登录不进去。现在知道了一个台湾或者国外的服务器应该怎么登录进去呢&#xff1f;知道服务器IP之后&#xff0c;你还需要知道服务器的远程端口帐号密码才能登录的。知道上面信息…...

编程日记 2023/4/22 7:39:12

【计算机基础】Socket IO

一、I/O 模型 一个输入操作通常包括两个阶段&#xff1a; 等待数据准备好从内核向进程复制数据 对于一个套接字上的输入操作&#xff0c;第一步通常涉及等待数据从网络中到达。当所等待数据到达时&#xff0c;它被复制到内核中的某个缓冲区。第二步就是把数据从内核缓冲区复…...

编程日记 2023/3/9 2:52:16

mingw编译opencv

我这里是msys2 这个是msys2的教程 https://blog.csdn.net/qq_39942341/article/details/105931335?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167821146216800197067008%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&requ…...

编程日记 2023/4/22 3:39:34

数据结构（八）排序

一、排序的概念以及引用概念排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;…...

编程日记 2023/4/22 3:39:16

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/11/7 10:17:11

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/30 15:52:04

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/11/6 6:30:31

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/11/5 5:50:50

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/9/20 22:30:25

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/11/7 6:57:34