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

标签之文字排版,图片,链接,音视频(HTML) 基础版

news 2026/3/31 11:37:51

目录

标签之文字排版,图片,链接,音视频知识点:

练习题一:

效果:

练习题二:

效果:

标签之文字排版,图片,链接,音视频知识点:

    超文本:链接

    标记:标签<>

          双标签

          单标签   <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 /**/ …...

编程日记 2024/11/5 21:40:04

基于SpringBoot+Gpt个人健康管家管理系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2024/11/5 21:39:04

十四届蓝桥杯STEMA考试Python真题试卷第二套第一题

来源&#xff1a;十四届蓝桥杯STEMA考试Python真题试卷第二套编程第一题 题目描述&#xff1a; 给定一个字符串&#xff0c;输出字符串中最后一个字符。 输入描述&#xff1a; 输入一个字符串 输出描述&#xff1a; 输出字符串中最后一个字符 样例输入&#xff1a; hgf 样…...

编程日记 2024/11/5 21:36:02

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…...

编程日记 2024/11/5 21:35:01

阿里云-部署CNI flannel集群网络

环境 1.一台阿里云作为k8s-master:8.130.XXX.231&#xff08;阿里云私有IP&#xff09; 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…...

编程日记 2024/11/5 21:32:58

favicon是什么文件？如何制作网站ico图标？

一般我们做网站的话&#xff0c;都会制作一个独特的ico图标&#xff0c;命名为favicon.ico。这个ico图标一般会出现在浏览器网页标题前面。如下图红色箭头所示&#xff1a; 部分博客导航大全也会用到所收录网站的ico图标。比如boke123导航新收录的网站就不再使用网站首页缩略图…...

编程日记 2024/11/5 21:31:57

Linux云计算个人学习总结（一）

windows计算机基础 一、概述 1&#xff0e;计算机基本原则&#xff1a;计算机是执行输入、运算、输出的原则。软件是指命令和数据的结合&#xff0c;计算机中所有的内容皆为数字。 2.计算机的类型 计算器 手机 cps等都属于计算机。 3.计算机的发展 第一代计算机电子管时代&…...

编程日记 2024/11/5 21:27:53

DCRNN解读（论文+代码）

一、引言 作者首先提出&#xff1a;空间结构是非欧几里得且有方向性的&#xff0c;未来的交通速度受下游交通影响大于上游交通。虽然卷积神经网络&#xff08;CNN&#xff09;在部分研究中用于建模空间相关性&#xff0c;但其主要适用于欧几里得空间&#xff08;例如二维图像&a…...

编程日记 2024/11/5 21:24:49

雷池社区版新版本功能防绕过人机验证解析

前两天&#xff0c;2024.10.31&#xff0c;雷池社区版更新7.1版本&#xff0c;其中有一个功能&#xff0c;新增请求防重放 更新记录&#xff1a;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 仔细研究了这个需求&#xff0c;…...

编程日记 2024/11/5 21:22:44

一文详解开源ETL工具Kettle!

一、Kettle 是什么 Kettle 是一款开源的 ETL&#xff08;Extract - Transform - Load&#xff09;工具&#xff0c;用于数据抽取、转换和加载。它提供了一个可视化的设计环境&#xff0c;允许用户通过简单的拖拽和配置操作来构建复杂的数据处理工作流&#xff0c;能够处理各种数…...

编程日记 2024/11/5 21:21:43

《IMM交互式多模型滤波MATLAB实践》专栏目录，持续更新……

专栏链接&#xff1a;https://blog.csdn.net/callmeup/category_12816762.html 专栏介绍 关于IMM的例程 双模型EKF&#xff1a; 【逐行注释】基于CV/CT模型的IMM|MATLAB程序|源代码复制后即可运行&#xff0c;无需下载三模型EKF&#xff1a; 【matlab代码】3个模型的IMM例程&…...

编程日记 2024/11/5 21:19:40

解决数据集中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()# 遍历所有…...

编程日记 2024/11/5 21:17:39

手边酒店多商户版V2源码独立部署_博纳软云

新版采用laraveluniapp开发&#xff0c;为更多平台小程序开发提供坚实可靠的底层架构基础。后台UI全部重写&#xff0c;兼容手机端管理。 全新架构、会员卡、钟点房、商城、点餐、商户独立管理...

编程日记 2024/11/5 21:15:37

32位汇编——通用寄存器

通用寄存器 什么是寄存器呢&#xff1f; 计算机在三个地方可以存储数据&#xff0c;第一个是把数据存到CPU中&#xff0c;第二个把数据存到内存中&#xff0c;第三个把数据存到硬盘上。 那这个所谓的寄存器&#xff0c;就是CPU中用来存储数据的地方。那这个寄存器有多大呢&a…...

编程日记 2024/11/5 21:14:35

vue3项目中实现el-table分批渲染表格

开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题&#xff0c;在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后&#xff0c;最后决定使用分批渲染来解决该问题。 代码实现 表格代码 <el-table :data"currTableData"borderstyle"wi…...

编程日记 2024/11/5 21:13:34

开源办公软件 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/11/5 21:10:30

原生鸿蒙应用市场：开发者的新机遇与深度探索

文章目录 自动化检测前移&#xff1a;提升开发效率与质量的新利器数据服务&#xff1a;数据驱动的精细化运营助手测试服务&#xff1a;保障应用质量的关键环节应用加密&#xff1a;保护应用安全与权益的利器从开发到运营的全方位支持写在最后 2024年10月22日&#xff0c;华为在…...

编程日记 2024/11/5 21:09:29

MATLAB实现蝙蝠算法(BA)

MATLAB实现蝙蝠算法(BA) 1.算法介绍 蝙蝠算法&#xff08;简称BA&#xff09;是一种受微型蝙蝠回声定位机制启发的群体智能算法&#xff0c;由Xin-She Yang于2010年提出。这种算法模拟了微型蝙蝠通过向周围环境发出声音并监听回声来识别猎物、避开障碍物以及追踪巢穴的行为。…...

编程日记 2024/11/5 21:08:27

WPF使用Prism框架首页界面

1. 首先确保已经下载了NuGet包MaterialDesignThemes 2.我们通过包的项目URL可以跳转到Github上查看源码 3.找到首页所在的代码位置 4.将代码复制下来&#xff0c;删除掉自己不需要的东西&#xff0c;最终如下 <materialDesign:DialogHostDialogTheme"Inherit"Ide…...

编程日记 2024/11/5 21:07:26

Linux中的软硬链接文件详解

概述 在Linux文件系统中&#xff0c;软连接&#xff08;Symbolic Link&#xff09;和硬连接&#xff08;Hard Link&#xff09;是两种重要的文件链接方式。它们都可以创建指向相同文件内容的多个“链接”&#xff0c;但在实现方式和特性上有所不同。 1. 硬连接&#xff08;Ha…...

编程日记 2024/11/5 21:05:24

掌握TegraRcmGUI：从入门到精通的Switch注入实践指南

掌握TegraRcmGUI&#xff1a;从入门到精通的Switch注入实践指南 【免费下载链接】TegraRcmGUI C GUI for TegraRcmSmash (Fuse Gele exploit for Nintendo Switch) 项目地址: https://gitcode.com/gh_mirrors/te/TegraRcmGUI TegraRcmGUI是一款基于C开发的图形化界面工具…...

编程新知 2026/3/31 11:29:14

软文SEO的常见指标有哪些_如何撰写有吸引力的软文标题

<h2>软文SEO的常见指标有哪些</h2> <p>在当今的数字营销领域&#xff0c;软文&#xff08;Soft Article&#xff09;已经成为推动网站流量和品牌知名度的重要工具。要让软文真正发挥作用&#xff0c;我们必须了解软文SEO的常见指标&#xff0c;这些指标可以帮…...

编程新知 2026/3/31 8:51:50

Wan2.2-I2V-A14B部署教程：解决OOM/驱动报错/端口冲突三大常见问题

Wan2.2-I2V-A14B部署教程&#xff1a;解决OOM/驱动报错/端口冲突三大常见问题 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存配置进行了深度优化。这个镜像最大的特点是解决了AI视频生成领域常见的…...

编程新知 2026/3/31 8:35:43

DeepSeek-V3.2量化新标杆：w8a8精度突破86%！

DeepSeek-V3.2量化新标杆&#xff1a;w8a8精度突破86%&#xff01; 【免费下载链接】DeepSeek-V3.2-w8a8-mtp-QuaRot 项目地址: https://ai.gitcode.com/Eco-Tech/DeepSeek-V3.2-w8a8-mtp-QuaRot 导语&#xff1a;DeepSeek-V3.2推出w8a8量化版本&#xff0c;采用创新Qu…...

编程新知 2026/3/31 7:39:23

崖山数据库-谓词没提前过滤优化器BUG

数据库版本崖山23.5.1 SQL> select * from v$version;BANNER VERSION_NUMBER ---------------------------------------------------------------- ----------------- Enterprise Edition Release 23.5.1.1…...

编程新知 2026/3/31 7:29:17

【计算机网络工程论文】基于三层交换的局域网设计：连平中学教学楼VLAN划分与eNSP仿真应用

摘 要 随着连平中学发展和信息化平台的建设&#xff0c;面对庞大的信息数据和高要求的管理效率&#xff0c;网络的规划、管理、安全逐渐成为关键。对教学楼而言&#xff0c;规划一个高效、稳定、可扩展的局域网至关重要。 本文针对连平中学教学单位&#xff0c;鉴于其所有部门…...

编程新知 2026/3/31 6:58:59

从LED灯变化理解计算机移位运算：手把手教你用实验箱验证带进位左移

从LED灯变化理解计算机移位运算&#xff1a;手把手教你用实验箱验证带进位左移 在计算机组成原理的学习中&#xff0c;移位运算是一个看似简单却蕴含深度的概念。当我们面对抽象的二进制数字在寄存器中"移动"时&#xff0c;往往难以形成直观理解。而通过实验箱上的L…...

编程新知 2026/3/31 6:28:41

相场法模拟枝晶生长的karma模型研究：基于Matlab的实现

相场法模拟枝晶生长&#xff0c;karma模型&#xff0c;matlab咱们今天来玩点好玩的——用Matlab搞个金属凝固过程的枝晶生长模拟。相场法这玩意儿真是材料模拟界的万金油&#xff0c;特别是Karma模型&#xff0c;处理枝晶分岔那叫一个丝滑。先整点基础配置&#xff1a; % 基础参…...

编程新知 2026/3/31 6:24:40

uView Input前后槽实战：5分钟搞定搜索框+验证码组合

uView Input前后槽实战&#xff1a;5分钟搞定搜索框验证码组合 在移动端开发中&#xff0c;输入框(Input)是最基础也是最常用的UI组件之一。无论是用户登录、搜索功能还是表单填写&#xff0c;都离不开它。但你是否遇到过这样的困扰&#xff1a;想要在输入框左侧添加一个搜索图…...

编程新知 2026/3/31 6:20:39

告别OpenAI API费用：手把手教你用本地BGE模型+FAISS搭建LangChain私有知识库

零成本构建企业级知识库&#xff1a;基于BGE与FAISS的私有化LangChain解决方案 在AI应用开发领域&#xff0c;数据隐私和成本控制正成为越来越多开发者的核心考量。当OpenAI等商业API按调用次数收费时&#xff0c;频繁的查询请求可能让个人开发者和小型团队不堪重负。更关键的是…...

编程新知 2026/3/31 6:12:33