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

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

news 2026/2/8 10:35:54

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2026/2/7 14:33:24