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

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

news 2025/9/14 18:19:42

图文教程

基本骨架

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/9/13 15:34:01

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/9/9 10:11:43

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/8/25 23:31:15

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/7/12 9:05:51

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/9/13 23:29:05

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/9/12 23:22:04

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/8/30 5:01:00

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/7/7 1:01:12