标签之文字排版,图片,链接,音视频(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自动播放是在静音模式下自动播放

练习题一:

html 复制代码
<!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>

效果:

练习题二:

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>

效果:

相关推荐
迷雾漫步者2 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-2 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240255 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
darkdragonking5 小时前
FLV视频封装格式详解
音视频
寻找沙漠的人6 小时前
前端知识补充—CSS
前端·css