标签之文字排版,图片,链接,音视频(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>

效果:

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

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

相关文章

Spark_跑批__.checkpoint()为什么比.persist()快

昨天同事和我讨论了一个情况&#xff0c;情况是这样的&#xff1a; 他在跑一个spark程序&#xff0c;跑的时候差不多五六分钟&#xff08;加了persist的情况&#xff09;&#xff0c;如果不加persist&#xff0c;改为..checkpoint()缓存&#xff0c;速度基本维持在三四分钟左右…

后端:Spring、Spring Boot-实例化Bean依赖注入(DI)

文章目录 1. 实例化Bean2. 使用FactoryBean3. 依赖注入(DI)3.1 AutoWired 属性注入(查找顺序&#xff1a;先类型&#xff0c;后名字)3.2 AutoWired 在构造函数&参数上的使用3.3 Inject和Resource 进行依赖注入3.4 Value 进行注入 1. 实例化Bean 默认使用无参构造函数&…

浅谈串口服务器的作用

串口服务器是一种网络设备&#xff0c;它允许通过TCP/IP网络远程访问串行设备。它的作用主要包括&#xff1a; 1、远程访问&#xff1a;通过将串行通信转换为以太网通信&#xff0c;串口服务器使得远程访问串行设备成为可能&#xff0c;这对于远程监控和控制非常有用。 2、数据…

深度|谁在为OpenAI和Anthropic的AI编程竞赛提供“军火”?已赚得盆满钵满

图片来源&#xff1a;Unsplash AI 开发者之所以一致认为编程的重要性&#xff0c;是有原因的&#xff1a;大型语言模型编程能力越强&#xff0c;它回答与软件无关的其他类型问题的能力也越强。 去年秋天&#xff0c;几位 Google 人工智能领导者与初创公司 CEO Jonathan Siddh…

H3C OSPF配置

OSPF配置实验 实验拓扑图 实验需求 1.配置IP地址 2.分区域配置OSPF&#xff0c;实现全网互通 3.为了路由结构稳定&#xff0c;要求路由器使用环回口作为Router-id&#xff0c;ABR的环回口宣告进骨干区域 实验配置 1.配置IP地址 R1&#xff1a; <H3C>system-view …

再探“构造函数”

文章目录 一. 初始化列表1.1 实现1.2 何时必须使用初始化列表2.3 尽量使用初始化列表 二. 类型转换2.1 内置类型 转换 类类型2.2 explicit&#xff1a;不转换2.3 构造函数多参数2.4 使用隐式转换 2.5 自定义---转换为--->自定义类型 三. 静态成员变量概念在main函数调用私有…

每日OJ题_牛客_体操队形_dfs+枚举_C++_Java

目录 牛客_体操队形_dfs枚举 题目解析 C代码 Java代码 牛客_体操队形_dfs枚举 体操队形 (nowcoder.com) 描述&#xff1a; dd作为体操队队长&#xff0c;在给队员们排队形&#xff0c;体操队形为一个单独的纵列&#xff0c;体操队有n个同学&#xff0c;标号为1∼…

【Linux内核大揭秘】程序地址空间

文章目录 什么是程序地址空间地址空间的组成虚拟内存技术 如何理解程序地址空间页表页表的细节关于堆区 在Linux中如何查看各个分段的信息总结 什么是程序地址空间 程序地址空间是一个程序在执行期间可以访问的内存范围。它由操作系统为每个进程分配&#xff0c;以确保进程之间…

C++ 数据结构 静态顺序表、动态顺序表。

静态顺序表&#xff08;Static Array List&#xff09;是一种线性数据结构&#xff0c;通常用数组实现。它具有固定的大小&#xff0c;并在编译时分配内存。以下是静态顺序表的一些基本概念和实现示例。 静态顺序表基本概念 固定大小&#xff1a;静态顺序表的大小在创建时定义…

pgsql表分区和表分片设计

在设计 PostgreSQL 表分区和表分片时&#xff0c;主要目标是提高查询性能、可扩展性和数据管理的效率。以下是一些关键的设计步骤和策略&#xff1a; 1. 分区策略 水平分片&#xff1a;选择按日期进行水平分片&#xff0c;每天一个分片。这种策略适用于具有时间序列数据的场景…

AnaTraf | 网络性能监测系统与分布式性能监测探秘

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具 对于 IT 运维人员来说&#xff0c;维护网络的稳定和业务的连续性是至关重要的使命&#xff0c;而优化网络性能以及在网络出现故障时快速排除故障则是实现这一使命的关键能力。 一、网络性能监测系统&#x…

C#语言入门:从基础到进阶

C#&#xff08;发音为"C sharp"&#xff09;是微软公司推出的一种面向对象的编程语言&#xff0c;它由Anders Hejlsberg和他的团队在.NET框架下开发。C#语言结合了C和Java的特性&#xff0c;并添加了新的功能&#xff0c;使其成为当今最流行的编程语言之一。 C#的特…

npm入门教程18:npm发布npm包

一、准备工作 注册npm账号&#xff1a; 前往npm官网注册一个账号。注册过程中需要填写个人信息&#xff0c;并完成邮箱验证。 安装Node.js和npm&#xff1a; 确保你的计算机上已安装Node.js和npm。Node.js的安装包中通常包含了npm。你可以通过运行node -v和npm -v命令来检查它…

【论文阅读】Associative Alignment for Few-shot Image Classification

用于小样本图像分类的关联对齐 引用&#xff1a;Afrasiyabi A, Lalonde J F, Gagn C. Associative alignment for few-shot image classification[C]//Computer Vision–ECCV 2020: 16th European Conference, Glasgow, UK, August 23–28, 2020, Proceedings, Part V 16. Spri…

SpringBoot-Velocity模板引擎-快速入门

Velocity-快速入门 一 介绍 Apache Velocity 是一个基于 Java 的模板引擎&#xff0c;它允许任何人使用简单而强大的模板语言来引用对象数据&#xff0c;并生成基于文本的输出。Velocity 最初是作为 WebMacro 项目的一部分开发的&#xff0c;后来成为一个独立的开源项目&…

Docker 安装使用操作指南

Docker 是一种开源的容器化平台&#xff0c;它允许开发者将应用及其所有依赖项打包到一个轻量级的容器中&#xff0c;这样就可以在任何地方一致地运行它们。无论是开发环境、测试环境还是生产环境&#xff0c;Docker 都能够提供一致的环境&#xff0c;从而消除“在我的机器上能…

UE5之5.4 第一人称示例代码阅读2 子弹发射逻辑

TP_WeaponComponent.h 看看头文件 暴露了attach weapon和fire给蓝图 这两个函数意义一看名字吧&#xff0c;就是捡起来枪的时候执行&#xff0c;一个就是发射子弹的时候执行 #pragma once#include "CoreMinimal.h" #include "Components/SkeletalMeshComponen…

飞机布雷盖航程公式

飞机布雷盖航程公式 1. 喷气式飞机布雷盖航程公式推导2. 螺旋桨飞机布雷盖航程公式推导3. 喷气式飞机与螺旋桨飞机的差异分析3.1 喷气式飞机的推力产生机制3.2 螺旋桨推进推力产生机制 布雷盖航程公式&#xff08;Breguet Range Equation&#xff09;是描述飞行器巡航飞行阶段航…

智能合约分享

智能合约练习 一、solidity初学者经典示例代码&#xff1a; 1.存储和检索数据&#xff1a; // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; // 声明 Solidity 编译器版本// 定义一个名为 SimpleStorage 的合约 contract SimpleStorage {// 声明一个公共状态变量 d…

绿色智慧冻结 专精深地空间:全国冻结法施工技术交流研讨会即将在京召开

2024年10月29日&#xff0c;由中国煤炭工业协会、中国煤炭建设协会、中国中煤能源集团有限公司主办&#xff0c;中煤建设集团有限公司、中煤邯郸特殊凿井有限公司承办的全国冻结法施工技术交流研讨会将在北京黄河京都会议中心隆重召开。研讨会将以“绿色智慧冻结 专精深地空间”…