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

【视频+图文讲解】HTML基础2-html骨架与基本语法

news 2025/11/8 20:59:11

图文教程

基本骨架

举个例子，下图所展示的为html的源代码

-!DOCTYPE：表示文档类型（后边写的html表示文档类型是html）；其中“！”表示声明

只要是加这个声明标签的，浏览器就会把下边的源代码当作html解析

<html>：整个网页都需要被<html></html>包裹

-lang：表示网站的主体语言，如下图所示

-<head></head>：表示网页配置，比如配置字符类型为utf8类型（字符类型的区别如下图所示，需要补充的是若网页是面向国际化的用utf-8，如果是面对国内的用gbk字符集）

-meta：表示基本配置，写在<head>标签内

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码是用于设置网页的视口（viewport）属性，主要是为了让网页在移动设备上能够自适应屏幕大小并正常显示。（对应了网页的基本配置）效果对比如下

不加这段代码

加了这段代码（明显针对手机开启了自适应的模式）

-<title>标签：用来管理浏览器选项卡的名称

-<body>标签：设置我们在浏览器能看到区域的网页内容，比如我们之前举例的“pikachu”按钮

补充

keywords关键字：<meta>标签中的keywords关键字的用途：搜索引擎抓取页面的原理（通过下面的关键词搜索进行抓取网站）

description关键字：同样的也是meta标签中的，用来描述网站的信息

基本语法

标签格式规则

  1. 标签名必须书写在一对尖括号<>内部
  2. 标签分为单标签和双标签，双标签必须成对存在，有开始标签和结束标签
  3. 结束标签必须有关闭符号/
  4. 根据标签内部存放的内容不同，将不同的标签划分为两个级别

其中双标签必须成对存在，有开始标签和结束标签

单标签

双标签

img

h1-h6

br

div

hr

span

p

a

ul+li

<br>：换行

<hr>：表示水平分割线，用于分割内容

<div>：定义页面中的块级元素，用于分组或布局

<ul>：创建无序列表 <li>：列表项，用于放置具体内容

无序列表如下图所示

<p>：换行

<span>：改变字体颜色、字体大小、字体样式，添加特定的标记，使用JavaScript来操作<span>元素，实现一些动态效果或交互功能

根据标签的种类区分两个等级：容器级，文本级

容器级：元素内部除了可以存放文本外，还可以嵌套各种类型的标签

文本级：元素内部只能存放文本或文本标签

容器级标签

文本级标签

div,ol,ul,li,dl,dt,dd,h1-h6

span,img,b,u,i

标签属性

概念：赋予标签一些特殊性质，给标签加上某些性质就相当于给标签赋予了职能（前提是标签必须具备这些职能）————比如：<a></a>标签具备链接性质，后边的属性value可以填上一些网址链接，这样用户可以通过页面点击链接，当然就算不填网址，这个标签依然具备链接属性，只不过并不会跳转网页

书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后边书写属性（href=x）

--href是键（key），x是属性值（value）

href：指定超链接目标的URL，是<a></a>标签专属属性

实例：

<a href="www.baidu.com" title="我是title"></a>

像上句这样连续写两个属性，要用空格隔开

注意：文字的位置是根据标签种类决定

  1. 标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果
  2. 在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的就是为了压缩文件的大小
  3. 标签之间还有嵌套关系

空白折叠现象：不会因为一直空格而显示很多空白（除非用标签&nbsp进行空格留白）

视频教程

哔哩哔哩（B站）搜索框中输入“uid=3546393096489381”即可

用户：star010_

相关文章：

【视频+图文讲解】HTML基础2-html骨架与基本语法

图文教程 基本骨架 举个例子&#xff0c;下图所展示的为html的源代码 -!DOCTYPE&#xff1a;表示文档类型&#xff08;后边写的html表示文档类型是html&#xff09;&#xff1b;其中“&#xff01;”表示声明 只要是加这个声明标签的&#xff0c;浏览器就会把下边的源代码当…...

编程日记 2025/2/1 23:17:23

消息队列篇--原理篇--常见消息队列总结（RabbitMQ，Kafka，ActiveMQ，RocketMQ，Pulsar）

1、RabbitMQ 特点&#xff1a; AMQP协议&#xff1a;RabbitMQ是基于AMQP&#xff08;高级消息队列协议&#xff09;构建的&#xff0c;支持多种消息传递模式&#xff0c;如发布/订阅、路由、RPC等。多语言支持&#xff1a;支持多种编程语言的客户端库&#xff0c;包括Java、P…...

编程日记 2025/2/1 23:12:17

【力扣每日一题】存在重复元素 II 解题思路

219. 存在重复元素 II 解题思路 问题描述 给定一个整数数组 nums 和一个整数 k&#xff0c;要求判断数组中是否存在两个 不同的索引 i 和 j&#xff0c;使得&#xff1a; nums[i] nums[j]且满足 abs(i - j) < k 如果满足上述条件&#xff0c;返回 true&#xff0c;否则…...

编程日记 2025/2/1 23:10:15

React第二十八章(css modules)

css modules 什么是 css modules 因为 React 没有Vue的Scoped&#xff0c;但是React又是SPA(单页面应用)&#xff0c;所以需要一种方式来解决css的样式冲突问题&#xff0c;也就是把每个组件的样式做成单独的作用域&#xff0c;实现样式隔离&#xff0c;而css modules就是一种…...

编程日记 2025/2/1 23:05:09

本地运行大模型效果及配置展示

电脑上用ollama安装了qwen2.5:32b&#xff0c;deepseek-r1:32b&#xff0c;deepseek-r1:14b&#xff0c;llama3.1:8b四个模型&#xff0c;都是Q4_K_M量化版。 运行过程中主要是cpu和内存负载比较大&#xff0c;qwen2.5:32b大概需要22g&#xff0c;deepseek-r1&#xff1a;32b类…...

编程日记 2025/2/1 22:58:01

愿景：做机器视觉行业的颠覆者

一个愿景&#xff0c;两场战斗&#xff0c;专注制胜。 一个愿景&#xff1a;做机器视觉行业的颠覆者。 我给自己创业&#xff0c;立一个大的愿景&#xff1a;做机器视觉行业的颠覆者。 两场战斗&#xff1a;无监督-大模型 上半场&#xff0c;无监督。2025-2030&#xff0c;共五…...

编程日记 2025/2/1 22:53:56

arm-linux-gnueabihf安装

Linaro Releases windows下打开wsl2中的ubuntu&#xff0c;资源管理器中输入&#xff1a; \\wsl$gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf.tar.xz 复制到/home/ark01/tool 在 Ubuntu 中创建目录&#xff1a; /usr/local/arm&#xff0c;命令如下&#xff1a; …...

编程日记 2025/2/1 22:51:55

力扣动态规划-16【算法学习day.110】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

编程日记 2025/2/1 22:50:53

Java基础知识总结（三十四）--java.util.Date

月份从0-11&#xff1b; /* 日期对象和毫秒值之间的转换。 1&#xff0c;日期对象转成毫秒值。Date类中的getTime方法。 2&#xff0c;如何将获取到的毫秒值转成具体的日期呢&#xff1f; Date类中的setTime方法。也可以通过构造方法。 */ //日期对象转成毫秒值 Date …...

编程日记 2025/2/1 22:46:44

零售EDI：Costco EDI 项目须知

Costco 是全球领先的会员制仓储式零售商&#xff0c;致力于为会员提供高品质且价格实惠的商品。其经营范围涵盖食品、电子产品、家居用品、服装和办公设备等多个领域。 Costco 的 EDI 对接需求分析 为了更高效地管理其复杂的全球供应链&#xff0c;Costco 采用了先进的 EDI&am…...

编程日记 2025/2/1 22:45:36

最近最少使用算法（LRU最近最少使用）缓存替换算法

含义 最近最少使用算法&#xff08;LRU&#xff09;是一种缓存替换算法&#xff0c;用于在缓存空间有限的情况下&#xff0c;选择最少使用的数据项进行替换。该算法的核心思想是基于时间局部性原理&#xff0c;即刚被访问的数据在未来也很有可能被再次访问。 实现 LRU算法的…...

编程日记 2025/2/1 22:40:29

sublime_text的快捷键

sublime_text的快捷键 向下复制, 复制光标所在整行并插入到下一行&#xff1a;通过 CtrlShiftD 实现快速复制当前行的功能。 可选多行, 不选则复制当前行 ctrl Shift D 删除当前行&#xff1a;通过 CtrlShiftK 实现快速删除当前行的功能。 可选多行, 不选则删当前行 ctrl S…...

编程日记 2025/2/1 22:39:28

使用Pygame制作“贪吃蛇”游戏

贪吃蛇 是一款经典的休闲小游戏&#xff1a;玩家通过操控一条会不断变长的“蛇”在屏幕中移动&#xff0c;去吃随机出现的食物&#xff0c;同时要避免撞到墙壁或自己身体的其他部分。由于其逻辑相对简单&#xff0c;但可玩性和扩展性都不错&#xff0c;非常适合作为新手练习游戏…...

编程日记 2025/2/1 22:37:23

本地部署DeepSeek开源多模态大模型Janus-Pro-7B实操

本地部署DeepSeek开源多模态大模型Janus-Pro-7B实操 Janus-Pro-7B介绍 Janus-Pro-7B 是由 DeepSeek 开发的多模态 AI 模型&#xff0c;它在理解和生成方面取得了显著的进步。这意味着它不仅可以处理文本&#xff0c;还可以处理图像等其他模态的信息。 模型主要特点:Permalink…...

编程日记 2025/2/1 22:35:18

Java开发vscode环境搭建

1 几个名词 JDK Java Development Kit JRE Java Runtion Environment JVM JDK 包括 Compiler,debugger,JRE等。JRE包括JVM和Runtime Library。 2 配置环境 2.1 安装JDK 类比 C/C的 g工具 官网&#xff1a;https://www.oracle.com/java/technologies/downloads/ 根据自己使…...

编程日记 2025/2/1 22:30:07

深入解析：一个简单的浮动布局 HTML 示例

深入解析&#xff1a;一个简单的浮动布局 HTML 示例 示例代码解析代码结构分析1. HTML 结构2. CSS 样式 核心功能解析1. 浮动布局&#xff08;Float&#xff09;2. 清除浮动&#xff08;Clear&#xff09;3. 其他样式 效果展示代码优化与扩展总结 在网页设计中&#xff0c;浮动…...

编程日记 2025/2/1 22:28:03

车载软件 --- 大一新生入门汽车零部件嵌入式开发

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 简单&#xff0c;单纯&#xff0c;喜欢独处&#xff0c;独来独往&#xff0c;不易合同频过着接地气的生活…...

编程日记 2025/2/1 22:20:55

DDD - 领域驱动设计分层架构：构建可演化的微服务架构

文章目录 引言1. 什么是DDD分层架构&#xff1f;1.1 DDD分层架构的演变1.2 四层架构的起源与问题1.3 依赖倒置和五层架构 2. DDD分层架构的核心层次2.1 用户接口层&#xff08;User Interface Layer&#xff09;2.2 应用层&#xff08;Application Layer&#xff09;2.3 领域层…...

编程日记 2025/2/1 22:12:43

2025数学建模美赛|赛题翻译|E题

2025数学建模美赛&#xff0c;E题赛题翻译 更多美赛内容持续更新中......

编程日记 2025/2/1 22:11:41

DeepSeek-V3 与 DeepSeek R1 对比分析：技术与应用的全面解析

一、背景 在当今科技飞速发展的时代&#xff0c;深度学习技术如同一股强大的浪潮&#xff0c;席卷了自然语言处理&#xff08;NLP&#xff09;、计算机视觉&#xff08;CV&#xff09;以及多模态模型等众多领域。从智能语音助手到图像识别技术&#xff0c;从文本生成工具到多模…...

编程日记 2025/2/1 22:10:38

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/8 12:49:24

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/11/8 2:32:35

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/10/29 9:58:23

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

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

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/11/8 7:59:16

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/9/22 12:41:30

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/11/7 19:15:55

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33