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

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

news 2026/2/11 1:00:40

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

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

编程新知 2026/2/10 4:32:45