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

news2024/11/24 13:10:57

目录

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

练习题一:

效果:

练习题二:

效果:


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

    超文本:链接

    标记:标签<>

          双标签

          单标签   <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>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230580.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UE5相机系统初探(一)

UE5相机系统初探&#xff08;一&#xff09; 和Unity类似&#xff0c;UE的相机也是由名为Camera的component控制的。那么&#xff0c;在UE中要如何实现一个跟随玩家的第三人称相机呢&#xff1f;假设我们已经有了一个表示玩家的类ACF_Character&#xff0c;首先第一步就是要先在…

短剧开发新模式:从内容创新到市场突围的全攻略

在探索短剧开发模式的过程中&#xff0c;理解其核心要素是至关重要的第一步。短剧作为一种独特的叙事形式&#xff0c;其特点是在极短的时间框架内讲述一个完整且吸引人的故事&#xff0c;这要求创作者必须具备高超的叙事技巧和对观众心理的深刻理解。创作者面临的首要挑战是如…

模型剪枝,如何把模型的使用成本降下来?

模型剪枝如何为企业节省百万预算&#xff1f; ©作者|DWT 来源|神州问学 近年来&#xff0c;大型语言模型&#xff08;LLM&#xff09;如GPT-3、LLaMA等在自然语言处理领域取得了令人瞩目的成果。然而&#xff0c;这些模型通常拥有数十亿甚至上千亿的参数&#xff0c;训练…

云效+mqtt实现本地构建和远程自动发版

之前写过一篇jenkinsmqtt实现本地构建和远程自动发版_jenkins远程调用和本地调用-CSDN博客 由于本地搭建jenkins实在太费机器了&#xff0c;这次改用云效搭建。不过云效并没有直接发送mqtt的方法&#xff0c;需要编写中转接口。 中转接口采用go-gin框架实现&#xff0c;代码如…

【蔬菜识别】Python+深度学习+CNN卷积神经网络算法+TensorFlow+人工智能+模型训练

一、介绍 蔬菜识别系统&#xff0c;本系统使用Python作为主要编程语言&#xff0c;通过收集了8种常见的蔬菜图像数据集&#xff08;‘土豆’, ‘大白菜’, ‘大葱’, ‘莲藕’, ‘菠菜’, ‘西红柿’, ‘韭菜’, ‘黄瓜’&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神…

安装Blender并使用

前言 该系列记录了如何用Blenderpro来构建自己的场景数据集&#xff0c;从环境搭建到后期构建数据集的整个流程 本文章是第一部分&#xff0c;BlenderPrc2的安装以及环境配置 部分参考https://blog.csdn.net/weixin_49521551/article/details/121573334 官方文档https://dlr…

ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用

本文整理于 2024 年云栖大会阿里云智能集团高级技术专家金吉祥&#xff08;牟羽&#xff09;带来的主题演讲《ApsaraMQ Serverless 能力再升级&#xff0c;事件驱动架构赋能 AI 应用》 云消息队列 ApsaraMQ 全系列产品 Serverless 化&#xff0c;支持按量付费、自适应弹性、跨可…

栈虚拟机和寄存器虚拟机,有什么不同?

本来这节内容是打算直接讲字节码指令的&#xff0c;但讲之前又必须得先讲指令集架构&#xff0c;而指令集架构又分为两种&#xff0c;一种是基于栈的&#xff0c;一种是基于寄存器的。 那不妨我们这节就单独来讲讲栈虚拟机和寄存器虚拟机&#xff0c;它们有什么不同&#xff0…

Rust整合Elasticsearch

Elasticsearch是什么 Lucene&#xff1a;Java实现的搜索引擎类库 易扩展高性能仅限Java开发不支持水平扩展 Elasticsearch&#xff1a;基于Lucene开发的分布式搜索和分析引擎 支持分布式、水平扩展提高RestfulAPI&#xff0c;可被任何语言调用 Elastic Stack是什么 ELK&a…

【Apache Zookeeper】

一、简介 1、场景 如何让⼀个应⽤中多个独⽴的程序协同⼯作是⼀件⾮常困难的事情。开发这样的应⽤&#xff0c;很容易让很多开发⼈员陷⼊如何使多个程序协同⼯作的逻辑中&#xff0c;最后导致没有时间更好地思考和实现他们⾃⼰的应⽤程序逻辑&#xff1b;又或者开发⼈员对协同…

手把手写Linux第一个小程序 - 进度条(5种版本)

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;linux &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

TikTok如何用邮箱注册?用哪种邮箱比较好?

要在TikTok上创建一个账号&#xff0c;首先需要进行注册&#xff0c;这是一个简单但至关重要的步骤。在本篇文章中&#xff0c;我们将详细介绍如何用邮箱注册TikTok的整个过程&#xff0c;包括每个步骤的细节和注意事项。此外&#xff0c;我们还将讨论选择哪种邮箱比较好&#…

LabVIEW在Windows和Linux开发的差异

LabVIEW广泛应用于工程和科研领域的自动化和测量控制系统开发&#xff0c;其在Windows和Linux平台上的开发环境有所不同。这些差异主要体现在操作系统兼容性、硬件支持、软件库和驱动程序、实时系统开发以及部署选择上。以下从各个方面详细对比分析LabVIEW在Windows与Linux系统…

哪个牌子的宠物空气净化器好?口碑好的宠物空气净化器推荐!

哪个牌子的宠物空气净化器好&#xff1f;作为一名家电测评博主&#xff0c;我发现市面上宠物空气净化器的牌子越来越多了&#xff0c;很多厂家都看中了宠物行业的红利&#xff0c;想来分一杯羹&#xff0c;这就导致很多技术不成熟的产品流入了市场。今年我测试了50多台宠物空气…

ios 快捷指令扩展(Intents Extension)简单使用 swift语言

本文介绍使用Xcode15 建立快捷指令的Extension&#xff0c;并描述如何修改快捷指令的IntentHandler&#xff0c;带参数跳转主应用&#xff1b;以及展示多个选项的快捷指令弹框(配置intentdefinition文件)&#xff0c;点击选项带参数跳到主应用的方法 创建快捷指令 快捷指令是…

计算机的错误计算(一百四十一)

摘要 探讨 MATLAB中正弦、余弦的计算精度问题。当自变量为大数时&#xff0c;输出可能出错。 从 IEEE-754-2019 知&#xff0c;三角函数的定义域是实数域。 例1. 计算 直接贴图吧&#xff1a; 这样&#xff0c;MATLAB的输出均为错误结果&#xff0c;即没有正确有效数字。…

医院绩效考核管理系统源码,医院如何构建绩效考核体系?

医院绩效考核管理系统作为现代医院管理的重要组成部分&#xff0c;其核心功能旨在提高医院运营效率、优化资源配置、确保医疗服务质量&#xff0c;以及增强医院竞争力。 业务科室绩效考核体系的构建 临床医疗与医技科室绩效考核的设置 临床医疗的绩效考核采用百分制&#xff…

「C/C++」C/C++标准库之#include<cstdlib>通用工具库

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

Resnet代码实现

图2 18-layer、34-layer的残差结构 图3 50-layer、101-layer、102-layer的残差结构 import torch import torch.nn as nn#这个18或者34层网络的残差模块&#xff0c;根据ResNet的具体实现可以自动匹配 class BasicBlock(nn.Module):conv1 stride1对应的实线残差&#xff0c;因…

为什么大家都在学数字孪生呢?

随着物联网&#xff0c;大数据、人工智能等技术的发展&#xff0c;新一代信息技术与制造业正在深度融合&#xff0c;人们与物理世界的交互方式正在发生转折性的变化。数字化转型正在成为企业的重要战略&#xff0c;而数字孪生则成为全新的焦点。 当下&#xff0c;在数字技术和…