标签之文字排版,图片,链接,音视频(HTML) 基础版
目录
标签之文字排版,图片,链接,音视频知识点:
练习题一:
效果:
练习题二:
效果:
标签之文字排版,图片,链接,音视频知识点:
超文本:链接
标记:标签<>
双标签
单标签 <br>//换行 <hr>//水平线
向后tab 向前shift+tab
html注释<!---->
css /**/
标题标签: h1~h6 加粗,字号减小,独占一行
h1在网页中只能使用一次 新闻标题和网页的logo
h2~h6没有使用的次数
段落标签: p 段落之间存在间隙
换行<br>
水平标签<hr>
文本格式化标签 :突出重点 加粗 <strong></strong>
下划线 <ins></ins>
倾斜 <em></em>
删除线 <del></del>
图像标签 :<img src="" alt="" title=""> //alt替换文本(图片无法显示时提示的文字)
//title 提示文本(鼠标悬停在图片上时提示的文字)
<img src="" alt="" title="" width="" height=""> //图片等比缩放
超链接a: <a href="https://www.baidu.com/" target="_blank">跳转百度</a> //target="_blank"新窗口打开
<a href="D:\test3\wintervacation\javaweb\Five\产品卡片.html" target="_blank">跳转到Five产品卡片</a>
href="#"为空,不会跳转
<a href="#">空链接</a>
音频 <audio src="" controls loop></audio> //controls显示音频控制面板 属性名和属性值一样//loop循环播放 autoplay自动播放 浏览器一般会禁用自动播放
视频标签 <video src=""></video> //controls显示音频控制面板 loop循环播放 muted静音播放 autoplay自动播放是在静音模式下自动播放
练习题一:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架 <a href="./vue简介.html" target="_blank">Vue.js</a>的作者，<a href="#"> HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2><strong>学习经历</strong></h2> <!--alt+z把行折断--><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯 </ins>。</p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>效果:
练习题二:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue简介</title>
</head>
<body><h1><strong>Vue.js</strong></h1><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./个人简介.html" target="_blank">尤雨溪</a></p><h2><strong>主要功能</strong></h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p><video src="./vue.mp4" controls loop></video></body>
</html>效果:
相关文章：
标签之文字排版,图片,链接,音视频(HTML) 基础版
目录 标签之文字排版,图片,链接,音视频知识点: 练习题一: 效果: 练习题二: 效果: 标签之文字排版,图片,链接,音视频知识点: 超文本:链接 标记:标签<> 双标签 单标签 <br>//换行 <hr>//水平线 向后tab 向前shifttab html注释<!----> css /**/ …...
基于SpringBoot+Gpt个人健康管家管理系统【提供源码+答辩PPT+参考文档+项目部署】
作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...
十四届蓝桥杯STEMA考试Python真题试卷第二套第一题
来源：十四届蓝桥杯STEMA考试Python真题试卷第二套编程第一题 题目描述： 给定一个字符串，输出字符串中最后一个字符。 输入描述： 输入一个字符串 输出描述： 输出字符串中最后一个字符 样例输入： hgf 样…...
【Windows修改Docker Desktop(WSL2)内存分配大小】
记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop，电脑基本每天都需要重启，内存完全不够用，从16g扩展到24，然后到40G，还是不够用；打开Docker Desktop 运行时间一长&#x…...
阿里云-部署CNI flannel集群网络
环境 1.一台阿里云作为k8s-master:8.130.XXX.231（阿里云私有IP） 2.Vmware 两个虚拟机分别作为 k8s-node1:192.168.40.131 k8s-node2:192.168.40.131 3.安装Docker 部署过程 k8s-master,k8s-node1,k8s-node2 初始操作 # 关闭防火墙 systemctl stop fi…...
favicon是什么文件？如何制作网站ico图标？
一般我们做网站的话，都会制作一个独特的ico图标，命名为favicon.ico。这个ico图标一般会出现在浏览器网页标题前面。如下图红色箭头所示： 部分博客导航大全也会用到所收录网站的ico图标。比如boke123导航新收录的网站就不再使用网站首页缩略图…...
Linux云计算个人学习总结（一）
windows计算机基础 一、概述 1．计算机基本原则：计算机是执行输入、运算、输出的原则。软件是指命令和数据的结合，计算机中所有的内容皆为数字。 2.计算机的类型 计算器 手机 cps等都属于计算机。 3.计算机的发展 第一代计算机电子管时代&…...
DCRNN解读（论文+代码）
一、引言 作者首先提出：空间结构是非欧几里得且有方向性的，未来的交通速度受下游交通影响大于上游交通。虽然卷积神经网络（CNN）在部分研究中用于建模空间相关性，但其主要适用于欧几里得空间（例如二维图像&a…...
雷池社区版新版本功能防绕过人机验证解析
前两天，2024.10.31，雷池社区版更新7.1版本，其中有一个功能，新增请求防重放 更新记录：hhttps://docs.waf-ce.chaitin.cn/zh/%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95 仔细研究了这个需求，…...
一文详解开源ETL工具Kettle!
一、Kettle 是什么 Kettle 是一款开源的 ETL（Extract - Transform - Load）工具，用于数据抽取、转换和加载。它提供了一个可视化的设计环境，允许用户通过简单的拖拽和配置操作来构建复杂的数据处理工作流，能够处理各种数…...
《IMM交互式多模型滤波MATLAB实践》专栏目录，持续更新……
专栏链接：https://blog.csdn.net/callmeup/category_12816762.html 专栏介绍 关于IMM的例程 双模型EKF： 【逐行注释】基于CV/CT模型的IMM|MATLAB程序|源代码复制后即可运行，无需下载三模型EKF： 【matlab代码】3个模型的IMM例程&…...
解决数据集中xml文件类别标签的首字母大小写不一致问题
import os import xml.etree.ElementTree as ET# 指定要处理的 XML 文件夹路径 xml_folder_path rD:\CVproject\ultralytics-main\datatrans\Annotationsdef capitalize_first_letter_in_xml(xml_file):# 解析 XML 文件tree ET.parse(xml_file)root tree.getroot()# 遍历所有…...
手边酒店多商户版V2源码独立部署_博纳软云
新版采用laraveluniapp开发，为更多平台小程序开发提供坚实可靠的底层架构基础。后台UI全部重写，兼容手机端管理。 全新架构、会员卡、钟点房、商城、点餐、商户独立管理...
32位汇编——通用寄存器
通用寄存器 什么是寄存器呢？ 计算机在三个地方可以存储数据，第一个是把数据存到CPU中，第二个把数据存到内存中，第三个把数据存到硬盘上。 那这个所谓的寄存器，就是CPU中用来存储数据的地方。那这个寄存器有多大呢&a…...
vue3项目中实现el-table分批渲染表格
开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题，在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后，最后决定使用分批渲染来解决该问题。 代码实现 表格代码 <el-table :data"currTableData"borderstyle"wi…...
开源办公软件 ONLYOFFICE 深入探索
文章目录 引言1. ONLYOFFICE 创建的背景1. 1 ONLYOFFICE 项目启动1. 2 ONLYOFFICE 的发展历程 2. 核心功能介绍2. 1 桌面编辑器2. 1. 1 文档2. 1. 2 表格2. 1. 3 幻灯片 2. 2 协作空间2. 3 文档编辑器 - 本地部署版 3. 技术介绍4. 安装5. 优势与挑战6. 个人体验7. 强大但不止于…...
原生鸿蒙应用市场：开发者的新机遇与深度探索
文章目录 自动化检测前移：提升开发效率与质量的新利器数据服务：数据驱动的精细化运营助手测试服务：保障应用质量的关键环节应用加密：保护应用安全与权益的利器从开发到运营的全方位支持写在最后 2024年10月22日，华为在…...
MATLAB实现蝙蝠算法(BA)
MATLAB实现蝙蝠算法(BA) 1.算法介绍 蝙蝠算法（简称BA）是一种受微型蝙蝠回声定位机制启发的群体智能算法，由Xin-She Yang于2010年提出。这种算法模拟了微型蝙蝠通过向周围环境发出声音并监听回声来识别猎物、避开障碍物以及追踪巢穴的行为。…...
WPF使用Prism框架首页界面
1. 首先确保已经下载了NuGet包MaterialDesignThemes 2.我们通过包的项目URL可以跳转到Github上查看源码 3.找到首页所在的代码位置 4.将代码复制下来，删除掉自己不需要的东西，最终如下 <materialDesign:DialogHostDialogTheme"Inherit"Ide…...
Linux中的软硬链接文件详解
概述 在Linux文件系统中，软连接（Symbolic Link）和硬连接（Hard Link）是两种重要的文件链接方式。它们都可以创建指向相同文件内容的多个“链接”，但在实现方式和特性上有所不同。 1. 硬连接（Ha…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
Python常用模块：time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...