Web前端——HTML基础：标签语法（标签结构）、HTML骨架、标签的关系、注释、标题标签、段落标签、换行和水平线、文本格式化标、图像标签、图像属性、属性语法、路径（相对、绝对路径）、超链接标签、简介

放下华子我只抽RuiKe5

已于 2023-11-23 15:15:01 修改

阅读量289

点赞数 1

分类专栏：前端学习笔记（自用）文章标签：前端 html html5 css 前端框架

于 2023-09-17 16:54:23 首次发布

本文链接：https://blog.csdn.net/weixin_65106708/article/details/132946857

版权

前端学习笔记（自用）专栏收录该内容

16 篇文章 1 订阅

订阅专栏

版本说明

当前版本号[20230917]。

版本	修改说明
20230913	初版

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

HTML 基础

目标：掌握标签基本语法，能够独立布局文章页。

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

12-音频

<audio src="音频的 URL"></audio>

常用属性

1680314629860

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

13-视频

<video src="视频的 URL"></video>

常用属性

1680314703735

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

14-综合案例一-个人简介

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

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

1680314754557

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">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>学习经历</h2>
<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>

同时，也可以进行自己的一个补充与改写，如：
在这里插入图片描述

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>任正非照片</title>
	</head>
	<body>
		<h1>任正非</h1>
		<hr />
		<p>任正非，出生于1944年10月25日，父母是乡村中学教师，中、小学就读于贵州边远山区的少数民族县城，1963年就读于重庆建筑工程学院，毕业后就业于建筑工程单位。</p>
		<img src="../img/任正非照片.jpg" alt="任正非的照片" title="任正非"/>
		
		<h2>工作经历</h2>
		<p>1974年为建设从法国引进的辽阳化纤总厂，应征入伍加入承担这项工程建设任务的基建工程兵，历任技术员、工程师、副所长（技术副团级），无军衔。在此期间，因作出重大贡献，1978年出席过全国科学大会，1982年出席中共第十二次全国代表大会。
		1983年随国家整建制撤销基建工程兵，而复员转业至深圳南海石油后勤服务基地，工作不顺利，
		转而在1987年集资21000元人民币创立 <a href="#">华为公司</a>，1988年任华为公司总裁，至今。</p>
		
		<h2>主要成就</h2>
		<p>创立了华为公司，<strong>推动了中国通信设备制造业的发展，使华为成为全球领先的通信设备制造商之一。</strong>此外，他还获得了许多荣誉和奖项，包括2005年被《时代》杂志评为全球百大最具影响力人物之一。</p>
		
		<h2>社会任职</h2>
		<p>任正非曾担任过华为公司的董事长和CEO，也是华为技术有限公司的创始人之一。 <ins>他曾在2003年被《财富》杂志评为全球50位最具影响力的商业领袖之一。</ins></p>
	</body>
</html>

15-综合案例二-Vue简介

1680314805528

<h1>Vue.js</h1>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
<video src="../media/vue.mp4" controls></video>

同时，也可以进行自己的一个补充与改写，如：

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为</title>
	</head>
	<body>
		<h1>华为</h1>
		<p>华为技术有限公司（HUAWEI TECHNOLOGIES CO.LTD）是一家生产销售通信设备的民营通信科技公司，于1987年创立，总部位于中国广东省深圳市。 
		目前，华为约有19.5万员工，业务遍及170多个国家和地区，服务全球30多亿人口。 华为是全球领先的ICT（信息与通信）基础设施和智能终端提供商，
		致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。</p>
		<p>其总裁为<a href="./js/网课测试.html">任正非</a></p>
		
		<h2>Mate60 pro</h2>
		<p>华为Mate60 Pro是华为公司于2021年12月发布的一款旗舰级智能手机，
		是华为Mate系列的最新产品之一。 它采用了6.82英寸的圆角四曲屏，分辨率为2772×1344像素，
		屏幕刷新率为1-120 Hz LTPO自适应刷新率。 该手机搭载了麒麟9000E处理器，支持5G网络。 
		它还配备了一颗5000万像素的超感知徕卡电影影像镜头和一颗4000万像素的超广角镜头，
		以及一颗1300万像素的长焦镜头和一颗3D深感摄像头。</p>
		
		<p>最近，华为还发布了最新的Mate60 Pro+。</p>
		
		<p>华为Mate60 Pro+是华为公司于2023年3月发布的一款旗舰级智能手机，是华为Mate系列的最新产品之一。 它采用了6.87英寸的圆角四曲屏，分辨率为2772×1344像素，屏幕刷新率为1-120 Hz LTPO自适应刷新率。 
		该手机搭载了麒麟9000E处理器，支持5G网络。 
		它还配备了一颗5000万像素的超感知徕卡电影影像镜头和一颗4000万像素的超广角镜头，以及一颗1300万像素的长焦镜头和一颗3D深感摄像头。</p>
		
		<video src=""></video>
		
	</body>
</html>

通过对这两个html网页互相建立超链接，可以实现互相的跳转。

前端学习笔记第一章插入视频

放下华子我只抽RuiKe5

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端——HTML基础：标签语法（标签结构）、HTML骨架、标签的关系、注释、标题标签、段落标签、换行和水平线、文本格式化标、图像标签、图像属性、属性语法、路径（相对、绝对路径）、超链接标签、简介

网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容 → 写代码 → 保存 → 刷新浏览器，看效果< h1 > 尤雨溪 < hr > < p > 尤雨溪，前端框架 < a href = " ../17-综合案例二/vue简介.html " > Vue.js 的作者， < a href = " # " > HTML5 版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。
复制链接

扫一扫