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

Wed前端--HTML基础

news 2025/7/7 9:54:12

目录

一、开发工具

二、HTML文档结构 

 2.1头部head

2.1.1title标记

2.1.2元信息meta标记

具体实例

​编辑

一、开发工具

最基础的开发工具是：HBuilder

二、HTML文档结构 

HTML文档由头部head和主体body组成

头部head标记中可以定义标题样式，头部信息不显示在网页上；

主体body 标记中可以定义段落，标题字，超链接，脚本，表格，表单

HTML文档的基本结构如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

 2.1头部head

头部head标记主要包含页面标题标记，元信息标记，样式标记，脚本标记，链接标记

头部标记所包含的信息不会展示在网页上。

2.1.1title标记

语法说明

<title>是开始标记

</title>是结束标记

两者之间内容显示在浏览器的标题栏上

例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body></body>
</html>

2.1.2元信息meta标记

 meta标记用来描述一个HTML网页文档属性，也称为元信息，这些信息不会显示在浏览器页面中，例如：作者，日期，时间

基本语法

			<meta name=""content="" ><meta http-equiv=""content="">

name属性用于描述网页，它是“名称/值”形式中的名称，name属性的值所描述的内容通过content属性表示，便于搜索引擎机器人查找，分类，其中最重要的是description、keywords、 robots

http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助浏览器正确精准的显示网页内容，http-equiv属性的值所描述的内容通过content属性表示

meta标记的属性、取值如下所示

具体实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>传统美德故事：铁杵磨成针</title><style type="text/css">div{text-align: center;}p{text-align: left;text-indent:2em;margin: 3px ;}strong,em(color:red;)</style>	</head><body bgcolor="#FEFEFE" leftmargin="100px"rightmargin="100px"><h2 align="center">传统美德故事：铁杵磨成针</h2><hr size="1"color="red"width="100%" /><div id="class="><img src="R-C.jpg" /><p>唐朝大诗人李白，小时候不喜欢读书。一天，乘老师不在屋，悄悄溜出门去玩儿。他来到山下小河边，见一位老婆婆，在石头上磨一根铁杵。李白很纳闷，上前问：“老婆婆，您磨铁杵做什么？”老婆婆说：“我在磨针。”李白吃惊地问：“哎呀！铁杵这么粗大，怎样能磨成针呢？”老婆婆笑呵呵地说：“只要天天磨铁杵总能越磨越细，还怕磨不成针吗？” </p><p>聪明的李白听后，想到自己，心中惭愧，转身跑回了书屋。从此，他牢记<strong>“只要功夫深，铁杵磨成针”</strong>的道理，发奋读书，最后成为有名的大诗人。</p>“书山有路勤为径，学海无涯苦作舟”   中华民族自强不息的精神，在勤奋读书方面表现得格外突出。不论是善于治国的政治家，还是胸怀韬略的军事家；不论是思维敏捷的思想家，还是智慧超群的科学家，他们之所以在事业上不同凡响，都是与他们从小的远大抱负分不开的。俗话说：“有志者立常志，无志者常立志”，立志，贵在少年。 </p><hr size="1" color="red" width="100%" /></div></body>
</html>

相关文章：

Wed前端--HTML基础

目录 一、开发工具 二、HTML文档结构 2.1头部head 2.1.1title标记 2.1.2元信息meta标记 具体实例 ​编辑 一、开发工具 最基础的开发工具是&#xff1a;HBuilder 二、HTML文档结构 HTML文档由头部head和主体body组成 头部head标记中可以定义标题样式&#xff0c;头部信…...

编程日记 2024/9/30 7:08:41

Latex 自定义运算符加限定条件的实现

“\operatorname{mean}\limits_{n \in N}” 的效果 mean ⁡ n ∈ N \operatorname{mean}\limits_{n \in N} meann∈N​ “\operatorname*{mean}\limits_{n \in N}” 的效果 mean ⁡ n ∈ N \operatorname*{mean}\limits_{n \in N} n∈Nmean​ 参考这篇文章...

编程日记 2024/9/30 7:06:39

大数据实时数仓Hologres（三）：存储格式介绍

文章目录 存储格式介绍 一、格式 二、使用建议 三、技术原理 1、列存 2、行存 3、行列共存 四、使用示例 存储格式介绍 一、格式 在Hologres中支持行存、列存和行列共存三种存储格式&#xff0c;不同的存储格式适用于不同的场景。在建表时通过设置orientation属性指…...

编程日记 2024/9/30 7:05:38

关于vue2+uniapp+uview+vuex 私募基金项目小程序总结

1.关于权限不同tabbar处理 uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客 但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的&#xff0c;点击tabbar时候会导致错乱 第三个问题…...

编程日记 2024/9/30 7:04:37

多线程（一）：线程的基本特点线程安全问题ThreadRunnable

目录 1、线程的引入 2、什么是线程 3、线程的基本特点 4、线程安全问题 5、创建线程 5.1 继承Thread类&#xff0c;重写run 5.1.1 创建Thread类对象 5.1.2 重写run方法 5.1.3 start方法创建线程 5.1.4 抢占式执行 5.2 实现Runnable&#xff0c;重写run【解耦合】★…...

编程日记 2024/9/30 7:03:36

启动hadoop集群出现there is no HDFS_NAMENODE_USER defined.Aborting operation

解决方案 在hadoop-env.sh中添加 export HDFS_DATANODE_USERroot export HDFS_NAMENODE_USERroot export HDFS_SECONDARYNAMENODE_USERroot export YARN_RESOURCEMANAGER_USERroot export YARN_NODEMANAGER_USERroot 再次运行即可。...

编程日记 2024/9/30 7:02:35

Redis实现短信登录解决状态登录刷新的问题

Redis实现短信登录 获取验证码控制层 /*** 发送手机验证码*/PostMapping("/code")public Result sendCode(RequestParam("phone") String phone) {// TODO 发送短信验证码并保存验证码return userService.sendCode(phone);} 获取验证码服务层 Result sendC…...

编程日记 2024/9/30 7:01:34

33. java快速排序

1. 前言 排序算法是数据结构中最基础的算法，快速排序则是面试中最常见的排序算法。无论是校招面试还是社招面试，快速排序算法的出现频率远高于其他算法，而且经常会要求候选人白板手写实现算法。快速排序算法的核心是分治处理，重点是分析时间复杂度。 2. 快速排序算法 面试…...

编程日记 2024/9/30 7:00:33

普通二叉搜索树的模拟实现【C++】

二叉搜素树简单介绍 二叉搜索树又称二叉排序树&#xff0c;是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右子树也分别为二叉搜索树 注意…...

编程日记 2024/9/30 6:59:32

unity 介绍Visual Scripting Scene Variables

Visual Scripting中的场景变量是指在Unity中使用可视化脚本时&#xff0c;能够在不同场景间传递和存储数据的变量。这些变量可以用来跟踪游戏状态、玩家信息或其他动态数据&#xff0c;允许开发者在不编写代码的情况下创建复杂的游戏逻辑。 场景变量的优势包括&#xff1a; 1…...

编程日记 2024/9/30 6:58:31

linux服务器部署filebeat

# 下载filebeat curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-7.17.23-linux-x86_64.tar.gz # 解压 tar xzvf filebeat-7.17.23-linux-x86_64.tar.gz# 所在位置&#xff08;自定义&#xff09; /opt/filebeat-7.17.23-linux-x86_64/filebeat.ym…...

编程日记 2024/9/30 6:57:30

个人获取Wiley 、ScienceDirect、SpringerLink三个数据库文献的方法

在同学们的求助文献中经常出现Wiley 、ScienceDirect、SpringerLink这三个数据库文献。本文下面就讲解一下个人如何不用求助他人自己搞定这三个数据库文献下载的方法。 个人下载文献首先要先获取数据库资源&#xff0c;小编平时下载文献是通过科研工具——文献党下载器获取的数…...

编程日记 2024/9/30 6:55:28

Java五子棋

目录 一&#xff1a;案例要求&#xff1a; 二&#xff1a;代码&#xff1a; 三&#xff1a;结果&#xff1a; 一&#xff1a;案例要求&#xff1a; 实现一个控制台下五子棋的程序。用一个二维数组模拟一个15*15路的五子棋棋盘&#xff0c;把每个元素赋值位“┼”可以画出棋…...

编程日记 2024/9/30 6:53:27

【从0开始自动驾驶】用python做一个简单的自动驾驶仿真可视化界面

【从0开始自动驾驶】用python做一个简单的自动驾驶仿真可视化界面 废话几句废话不多说&#xff0c;直接上源码目录结构init.pysimulator.pysimple_simulator_app.pyvehicle_config.json 废话几句 自动驾驶开发离不开仿真软件成品仿真软件种类多https://zhuanlan.zhihu.com/p/3…...

编程日记 2024/9/30 6:52:26

一拖二快充线：单接与双接的多场景应用

在当代社会&#xff0c;随着智能手机等电子设备的普及&#xff0c;充电问题成为了人们关注的焦点。一拖二快充线作为一种创新的充电解决方案&#xff0c;因其便捷性与高效性而受到广泛关注。本文将深入探讨一拖二快充线的定义、原理以及在单接与双接手机场景下的应用&#xff0…...

编程日记 2024/9/30 6:50:24

接口自动化测试概述

目录 1 接口自动化测试简介 1.1 什么是接口 1.2 什么是接口测试 1.3 为什么要做接口测试 1.4 什么是接口测试自动化 1.5 为什么要做接口测试自动化 2 接口自动化测试规范 2.1 文档准备 2.1.1 需求文档 2.1.2 接口文档 2.1.3 UI 交互图 2.1.4 数据表设计文档 2.2 明…...

编程日记 2024/9/30 6:49:23

Fingerprint.js：精准用户识别的浏览器指纹技术

在数字化时代&#xff0c;用户识别成为互联网服务中不可或缺的一环。随着隐私保护意识的增强&#xff0c;传统的用户识别方法如Cookies和本地存储面临着越来越多的挑战。而Fingerprint.js作为一种创新的浏览器指纹技术&#xff0c;以其高效、隐私友好的特性&#xff0c;逐渐在个…...

编程日记 2024/9/30 6:43:16

Gson将对象转换为JSON（学习笔记）

JSON有两种表示结构&#xff0c;对象和数组。对象结构以"{"大括号开始&#xff0c;以"}"大括号结束。中间部分由0或多个以”&#xff0c;"分隔的”key(关键字)/value(值)"对构成&#xff0c;关键字和值之间以":"分隔&#xff0c;语法结…...

编程日记 2024/9/30 6:42:15

什么是IPv6

目前国内的网络正在快速的向IPv6升级中&#xff0c;从网络基础设施如运营商骨干网、城域网&#xff0c;到互联网服务商如各类云服务&#xff0c;以及各类终端设备厂商如手机、电脑、路由器、交换机等。目前运营商提供的IPv6线路主要分为支持前缀授权和不支持前缀授权两种。 说…...

编程日记 2024/9/30 6:41:14

python画图|放大和缩小图像

在较多的画图场景中&#xff0c;需要对图像进行局部放大&#xff0c;掌握相关方法非常有用&#xff0c;因此我们很有必要一起学习 【1】官网教程 首先是进入官网教程&#xff0c;找到学习资料&#xff1a; https://matplotlib.org/stable/gallery/subplots_axes_and_figures…...

编程日记 2024/9/30 6:36:10

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/5 21:20:33

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/6/18 2:20:36

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/7/6 7:16:45

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/7/2 12:22:47

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

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

编程新知 2025/6/16 20:22:52

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/7/4 15:17:28

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

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

编程新知 2025/7/5 18:24:10

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/6 3:14:03

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/7/5 21:10:52

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10