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

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

news 2026/2/10 11:23:21

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

django filter 统计数量 按属性去重

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

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

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

归并排序：分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

编程新知 2026/1/27 17:06:38