HTML5(1)

目录

一.HTML5(超文本(链接)标记(标签<>)语言)

1.开发环境(写代码,看效果)

2.vscode 使用

3.谷歌浏览器使用

4.标签语法

5.HTML基本骨架(网页模板)

6.标签的关系

7.注释

8.标题标签

9.段落标签

10.换行和水平线标签(单标签)

11.文本格式化标签

12.图像标签

13.图像标签的属性

14.路径

15.超链接标签(双标签)

16.音频标签

17.视频标签

18.综合案例--个人简介

19.综合案例--Vue.js简介

资源来自:黑马程序员

一.HTML5(超文本(链接)标记(标签<>)语言)

1.开发环境(写代码,看效果)

编辑器写代码:vscode

浏览器看效果: Google

2.vscode 使用

2.1打开文件夹:新建文件夹->拖拽vscode空白位置

2.2vs插件(暂时):

2.3 缩放代码字号

3.谷歌浏览器使用

设置默认浏览器:控制面板->默认程序

4.标签语法

4.1网页文件后缀名.html

4.2

ctrl+B vscode侧边栏折叠

ctrl+S 文件保存(先保存才能在浏览器查看效果)

4.3

4.4示例:

5.HTML基本骨架(网页模板)

快速生成:

网页标题:

6.标签的关系

作用:明确标签的书写位置

7.注释

8.标题标签

9.段落标签

10.换行和水平线标签(单标签)

11.文本格式化标签

12.图像标签

img单标签

vscode 使用 ./可以快速选择路径

13.图像标签的属性

alt:以前网速慢,可能导致图片加载不出来,为了不影响网页内容的浏览,使用alt当作替换文本

width与height在浏览器缩放土图片是等比例缩放的

14.路径

网页通过路径查找

14.1相对路径

14.2绝对路径

上述是通过绝对路径查找存在自己电脑的图片文件

还可以绝对路径查找别人网页(不存在自己电脑里面)的图片文件:

src属性值使用在线网址

友情链接:文字点击后可以跳转到对应网站(实现:将对应文字做成链接,跳转的位置写成对应的在线网址)

小总结:

1.在工作要找自己电脑的文件一般使用相对路径(不用绝对路路径是因为绝对路径太绝对了,相对路径相对于当前文件的位置,因此在移动网站文件夹或者在不同的服务器上部署网站时,相对路径更加灵活,不需要修改路径; 相对路径可以增加网站的安全性,因为绝对路径可能会暴露服务器的真实路径,造成安全隐患。)

2.绝对路径一般应用于绝对路径在线网址实现友情链接。

15.超链接标签(双标签)

超链接可以跳转:线上和本地文件

也可以点击图片跳转:

但上述是原窗口打开,这样会很不方便(相当新窗口覆盖掉原窗口)

可以使用target属性 赋给值_blank,就可以实现新窗口打开页面了

开发初期了,不知道超链接的跳转地址,href属性值给 # , 表示空链接,不会跳转。(之后将#覆盖掉就行了)

16.音频标签

16.1 controls属性(显示音频控制面板)

在HTML5中,如果属性名与属性值相同,可以简写为一个单词,controls也可以是controls="controls", 效果是一样的。

16.2 loop属性(循环播放)

16.3 autoplay(自动播放)

但浏览器会自动禁用自动播放,所以写了也没有效果,一般是通过按钮手动播放。

17.视频标签

17.1 src(必须属性)

只有src网页视频是静止的

17.2 controls(显示视频控制面板)

现在点击就能播放了

17.3 loop(循环播放)

17.4 muted(静音播放)

17.5 autoplay(自动播放(需要配合静音播放))

如果没有静音,就不会自动播放了

18.综合案例--个人简介

网页制作思路:从上到下,先整体再局部,逐步分析制作

分析内容->写代码->保存->刷新浏览器->看效果

尤雨溪


尤雨溪,前端框架Vue.is的作者,HTML5版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目JavaScrit,最后自己也走上了开源之路,现全职开发和维护Vue.is。

尤雨溪

学习经历

尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。

尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,正是在读硕士期间,他偶然接触到了JavaScript ,从此被这门编程语言深深吸引,开启了自己的前端生涯。

主要成就

2014年2月,开发了一个前端开发库Vue.js。Vue.js是构建Web界面的JavaScript库,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。

社会任职

2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和Weex的JavaScript runtime整合,目标是让大家能用Vue的语法跨三端。

<!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="https://baike.baidu.com/item/Vue.js/19884851#:~:text=Vue%20%28%E5%8F%91%E9%9F%B3%E4%B8%BA%20%2Fvju%CB%90%2F%EF%BC%8C%E7%B1%BB%E4%BC%BC%20view%29%20%E6%98%AF%E4%B8%80%E6%AC%BE%E7%94%A8%E4%BA%8E%E6%9E%84%E5%BB%BA%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E7%9A%84%20JavaScript%20%E6%A1%86%E6%9E%B6%E3%80%82,%E5%AE%83%E5%9F%BA%E4%BA%8E%E6%A0%87%E5%87%86%20HTML%E3%80%81CSS%20%E5%92%8C%20JavaScript%20%E6%9E%84%E5%BB%BA%EF%BC%8C%E5%B9%B6%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E5%A5%97%E5%A3%B0%E6%98%8E%E5%BC%8F%E7%9A%84%E3%80%81%E7%BB%84%E4%BB%B6%E5%8C%96%E7%9A%84%E7%BC%96%E7%A8%8B%E6%A8%A1%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%AB%98%E6%95%88%E5%9C%B0%E5%BC%80%E5%8F%91%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E3%80%82%20%E6%97%A0%E8%AE%BA%E6%98%AF%E7%AE%80%E5%8D%95%E8%BF%98%E6%98%AF%E5%A4%8D%E6%9D%82%E7%9A%84%E7%95%8C%E9%9D%A2%EF%BC%8CVue%20%E9%83%BD%E5%8F%AF%E4%BB%A5%E8%83%9C%E4%BB%BB%E3%80%82 t" target="_blank">Vue.is</a>的作者,<a href="https://baike.baidu.com/item/HTML5?fromModule=lemma_search-box" target="_blank">HTML5</a>版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和MeteorDevelopment Group。由于工作中大量接触开源的项目<a href="https://baike.baidu.com/item/JavaScript?fromModule=lemma_search-box" target="_blank">JavaScrit</a>,最后自己也走上了开源之路,现全职开发和维护<a href="https://baike.baidu.com/item/Vue.js/19884851#:~:text=Vue%20%28%E5%8F%91%E9%9F%B3%E4%B8%BA%20%2Fvju%CB%90%2F%EF%BC%8C%E7%B1%BB%E4%BC%BC%20view%29%20%E6%98%AF%E4%B8%80%E6%AC%BE%E7%94%A8%E4%BA%8E%E6%9E%84%E5%BB%BA%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E7%9A%84%20JavaScript%20%E6%A1%86%E6%9E%B6%E3%80%82,%E5%AE%83%E5%9F%BA%E4%BA%8E%E6%A0%87%E5%87%86%20HTML%E3%80%81CSS%20%E5%92%8C%20JavaScript%20%E6%9E%84%E5%BB%BA%EF%BC%8C%E5%B9%B6%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E5%A5%97%E5%A3%B0%E6%98%8E%E5%BC%8F%E7%9A%84%E3%80%81%E7%BB%84%E4%BB%B6%E5%8C%96%E7%9A%84%E7%BC%96%E7%A8%8B%E6%A8%A1%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%AB%98%E6%95%88%E5%9C%B0%E5%BC%80%E5%8F%91%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E3%80%82%20%E6%97%A0%E8%AE%BA%E6%98%AF%E7%AE%80%E5%8D%95%E8%BF%98%E6%98%AF%E5%A4%8D%E6%9D%82%E7%9A%84%E7%95%8C%E9%9D%A2%EF%BC%8CVue%20%E9%83%BD%E5%8F%AF%E4%BB%A5%E8%83%9C%E4%BB%BB%E3%80%82" target="_blank">Vue.is</a>。</p><img src="https://pic.baike.soso.com/ugc/baikepic2/0/20220502193943-1419367211_png_394_452_359967.jpg/800" alt="尤雨溪" title="尤雨溪"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得<strong>Design & Technology艺术硕士学位</strong>,任职于纽约Google Creative Lab。</p><p>尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,正是在读硕士期间,他偶然接触到了<em>JavaScript</em> ,从此被这门编程语言深深吸引,开启了自己的前端生涯。</p><h2>主要成就</h2><p><ins>2014年2月,开发了一个前端开发库Vue.js。Vue.js是构建Web界面的JavaScript库,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</ins></p><h2>社会任职</h2><p>2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和Weex的JavaScript runtime整合,目标是让大家能用Vue的语法跨三端。</p>
</body>
</html>

19.综合案例--Vue.js简介

Vue.js

Vue.js (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

Vue是一个独立的社区驱动的项目,它是由尤雨溪在2014年作为其个人项目创建, [4]是一个成熟的、经历了无数实战考验的框架,它是目前生产环境中使用最广泛的JavaScript框架之一,可以轻松处理大多数web应用的场景,并且几乎不需要手动优化,并且Vue完全有能力处理大规模的应用。

主要功能

Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计,核心库只关注视图层。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

file:///C:/Users/CGQ/Documents/Typara%E7%AC%94%E8%AE%B0/#

</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.js 简介</title>
</head>
<body><h1>Vue.js</h1><p><a href="https://baike.baidu.com/item/Vue.js/19884851" target="_blank">Vue.js</a> (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。</p><br><p>Vue是一个独立的社区驱动的项目,它是由尤雨溪在2014年作为其个人项目创建, [4]是一个成熟的、经历了无数实战考验的框架,它是目前生产环境中使用最广泛的JavaScript框架之一,可以轻松处理大多数web应用的场景,并且几乎不需要手动优化,并且Vue完全有能力处理大规模的应用。</p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计,核心库只关注视图层。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><video src="#" controls loop muted autoplay></video></body>
</html>

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

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

相关文章

Jetson Orin NX L4T35.5.0平台LT6911芯片 调试记录(2)vi discarding frame问题调试

基于上篇调试记录 Jetson Orin NX L4T35.5.0平台LT6911芯片 调试记录(1)MIPI问题调试-CSDN博客 1.前言 当通过gstreamer持续捕获视频设备时,帧数会下降,并且I输入越高,丢失的帧数越多。 当达到4k30hz时,它完全无法使用,系统会在几秒钟的收集后崩溃并重新启动 4k30hz …

【C++】:类和对象(下)

目录 一&#xff0c;再谈构造函数1.初始化列表2. 隐式类型转换的过程及其优化3. 隐式类型转换的使用4. explcit关键字5. 单参数和多参数构造函数的隐式类型转换 二&#xff0c;static成员1.静态成员变量2.静态成员函数 三&#xff0c;友元3.1 友元函数3.2 友元类 四&#xff0c…

Ansys Speos|进行智能手机镜头杂散光分析

本例的目的是研究智能手机Camera系统的杂散光。杂散光是指光向相机传感器不需要的散光光或镜面光&#xff0c;是在光学设计中无意产生的&#xff0c;会降低相机系统的光学性能。 在本例中&#xff0c;光学透镜系统使用Ansys Zemax OpticStudio (ZOS)进行设计&#xff0c;并使用…

LangChain入门2 RAG详解

RAG概述 一个典型的RAG应用程序,它有两个主要组件&#xff1a; 索引&#xff1a;从源中获取数据并对其进行索引的管道。这通常在脱机情况下发生。检索和生成&#xff1a;在运行时接受用户查询&#xff0c;并从索引中检索相关数据&#xff0c;然后将其传递给模型。 从原始数据…

机器学习:深入解析SVM的核心概念【一、间隔与支持向量】

直接阅读原始论文可能有点难和复杂&#xff0c;所以导师直接推荐我阅读周志华的《西瓜书》&#xff01;&#xff01;然后仔细阅读其中的第六章&#xff1a;支持向量机 间隔与支持向量 **问题一&#xff1a;什么叫法向量&#xff1f;为什么是叫法向量**什么是法向量&#xff1f;…

ChatGPT向付费用户推“记忆”功能,可记住用户喜好 | 最新快讯

4月30日消息&#xff0c;人工智能巨头OpenAI宣布&#xff0c;其开发的聊天机器人ChatGPT将在除欧洲和韩国以外的市场全面上线“记忆”功能。这使得聊天机器人能够“记住”ChatGPT Plus付费订阅用户的详细信息&#xff0c;从而提供更个性化的服务。 OpenAI早在今年2月就已经宣布…

AJAX家政系统 自营+多商家(高级授权)+独立端口 -源码下载

应用介绍 后台&#xff1a;https://service.hnajax.com/hxeJVakAdf.php/index/login AJAX家政系统 自营多商家(高级授权)独立端口 基于FastAdmin和原生微信小程序开发的一款同城预约、上门服务、到店核销家政系统&#xff0c;用户端、服务端(高级授权)、门店端(高级授权)各端…

HTML:认识HTML及基本语法

目录 1. HTML介绍 2. 关于软件选择和安装 3. HTML的基本语法 1. HTML介绍 HyperText Markup Language 简称HTML&#xff0c;意为&#xff1a;超文本标记语言 超文本&#xff1a;是指页面内可以包含的图片&#xff0c;链接&#xff0c;声音&#xff0c;视频等内容 标记&am…

76、堆-数据流的中位数

思路&#xff1a; 这个问题是动态数据流中位数查找问题。在数据流中&#xff0c;数据是逐个到来的&#xff0c;而我们需要在任何时候快速返回已有数据的中位数。中位数是将数据集分成两个等长的子集&#xff0c;一个包含所有较小的元素而另一个包含所有较大的元素。 为了高效解…

升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated

错误描述 vue3-element-admin 项目将Vite4 升级至 Vite5 后,项目运行出现如下警告: The CJS build of Vites Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.图片 问题原因 Vite 官方弃用 C…

WIN10 anaconda 安装 CondaError: Run ‘conda init‘ before ‘conda activate‘

1 下载 https://www.anaconda.com/download/success 2 安装 3 修改环境变量 安装后修改环境变量 4 winrun 进入命令窗口 输入cmd 输入 conda info 5 创建 虚拟环境 conda create -n yolov8 python3.8 -y 6 CondaError: Run ‘conda init’ before ‘conda activate’ c…

在Primavera P6 中维护自定义活动栏

前言 自从 Henry Gantt 在 1910 年左右提出这个想法以来&#xff0c;以图形方式显示项目进度表并沿时间刻度显示条形图一直延续到当今最复杂和流行的项目进度系统中。在本文中&#xff0c;我们将仔细研究 Primavera P6 Professional 中的甘特图&#xff0c;并探索一些自定义其…

【新知实验室 - TRTC 实践】音视频互动 Demo、即时通信 IM 服务搭建

一、TRTC 初识 TRTC 是什么 TRTC&#xff08;Tencent RTC&#xff09;腾讯实时音视频&#xff0c;源自于 QQ 音视频团队&#xff0c;是基于 QQ 音视频多年来的音视频技术积累&#xff0c;位于腾讯云的 RTC 云服务。TRTC 支持腾讯会议、企业微信直播、微信视频号、腾讯云课堂、…

一个类实现Mybatis的SQL热更新

引言 平时用SpringBootMybatis开发项目&#xff0c;如果项目比较大启动时间很长的话&#xff0c;每次修改Mybatis在Xml中的SQL就需要重启一次。假设项目重启一次需要5分钟&#xff0c;那修改10次SQL就过去了一个小时&#xff0c;成本有点太高了。关键是每次修改完代码之后再重…

FineBI学习:K线图

效果图 底表结构&#xff1a;日期、股票代码、股票名称、开盘价、收盘价、最高价、最低价 步骤&#xff1a; 横轴&#xff1a;日期 纵轴&#xff1a;开盘价、最低价 选择【自定义图表】&#xff0c;或【瀑布图】 新建字段&#xff1a;价差&#xff08;收盘-开盘&#xf…

POETIZE个人博客系统源码 | 最美博客

源码介绍 POETIZE个人博客系统源码 | 最美博客 这是一个 SpringBoot Vue2 Vue3 的产物&#xff0c;支持移动端自适应&#xff0c;配有完备的前台和后台管理功能。 网站分两个模块&#xff1a; 博客系统&#xff1a;具有文章&#xff0c;表白墙&#xff0c;图片墙&#xf…

CSS 伪类、伪元素的应用实例:电池充电、高能进度条

一、目的 本文通过 CSS 伪类、伪元素&#xff0c;结合动画 animation 和 Vue 动态样式属性&#xff08;通过 CSS 变量&#xff09;的写法&#xff0c;来实现电池充电、高能进度条的效果&#xff0c;如下图所示。 二、基础知识 1、CSS 伪类、伪元素 简单概括成以下 4 点&#x…

谷粒商城实战(020 RabbitMQ-消息确认)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第258p-第p261的内容 消息确认 生产者 publishers 消费者 consumers 设置配置类 调用api 控制台 抵达brocker 代理 新版本ReturnCallbac…

DevEco Studio mac版启动不了【鸿蒙开发Bug已解决】

文章目录 项目场景:问题描述原因分析:解决方案:此Bug解决方案总结Bug解决方案寄语项目场景: 最近也是遇到了这个问题,看到网上也有人在询问这个问题,本文总结了自己和其他人的解决经验,解决了【DevEco Studio mac版启动不了】的问题。 问题描述 报错如下。 -------…

如何判断第三方软件测试公司是否具有资质

在软件开发的过程中&#xff0c;软件测试是确保软件质量、稳定性和用户体验的关键环节。许多企业选择将软件测试工作交给专业的第三方软件测试公司来完成&#xff0c;以确保测试的准确性和公正性。但是&#xff0c;如何判断一个第三方软件测试公司是否具有资质呢&#xff1f;以…