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

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

news 2026/2/10 22:35:30

图文教程

基本骨架

举个例子，下图所展示的为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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2026/2/8 20:43:00

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/2/9 10:58:49

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42