前端-HTML-day1
目录
1、标签语法
2、HTML基本骨架
3、标签的关系
4、注释
5、标题标签
6、段落标签
7、换行和水平线标签
8、文本格式化标签
9、图像标签-基本使用
10、图像标签-属性
11、相对路径
12、绝对路径
13、超链接
14、音频
15、视频
16、综合案例1--个人简介
17、综合案例2--Vue.js
1、标签语法
2、HTML基本骨架
3、标签的关系
4、注释
5、标题标签
6、段落标签
7、换行和水平线标签
8、文本格式化标签
9、图像标签-基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./cat2.jpg"><img src="./dog2.jpg">
</body>
</html>10、图像标签-属性
<!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><img src="./cat2.jpg"><!--以前网速慢，可能导致图片加载不出来，不想影响网页内容的浏览，用alt替换，或者图片不存在--><img src="./cat.jpg" alt="这是一只猫"><img src="./dog2.jpg" title="这是一只狗"><br><!-- 浏览器缩放图片，默认是等比例缩放 --><img src="./cat2.jpg" width="100"><img src="./dog2.jpg" height="600">
</body>
</html>11、相对路径
<!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><!-- 1.jpg --><img src="./1.jpg"> <!-- 1.jpg 在当前文件夹 --><!-- 2.jpg --><img src="./images/2.jpg"> <!-- 2.jpg 在当前文件夹下的images文件夹下 --><!-- cat2.jpg --><img src="../cat2.jpg"> <!-- cat2.jpg 在当前文件夹的上一级文件夹下-->
</body>
</html>12、绝对路径
<!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><img src="D:\vscode_code\HTML\cat2.jpg"> <!-- 图片在自己电脑中 --><img src="D:/vscode_code/HTML/cat2.jpg"><!-- https://www.itheima.com/images/logo.png --> <!-- 图片在网页中 --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>13、超链接
<!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><a href="https://www.baidu.com/">跳转到百度</a><!-- 跳转到本地文件：相对路径查找 --><!-- target="_blank" 新窗口跳转页面 --><a href="./01_标签.html" target="_blank">跳转到01_标签.html</a><!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 --><a href="#">空连接</a>
</body>
</html>14、音频
<!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><!-- 在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词 --><!-- controls 和 controls="controls" 是等价的 --><!-- <audio src="./media/music.mp3"></audio> 只写src一个属性，浏览器中不会有任何显示,需要加上controls --><!-- loop 循环播放 --><!-- autoplay 自动播放，浏览器一般会禁用 --><audio src="./media/music.mp3" controls loop autoplay></audio>
</body>
</html>15、视频
<!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><!-- 在浏览器中，想要自动播放，必须有 muted 属性 --><video src="./media/video.mp4" controls loop muted autoplay></video>
</body>
</html>16、综合案例1--个人简介
<!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="./17_综合案例2.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="./youyuxi.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>
</body>
</html>
17、综合案例2--Vue.js
<!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>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./16_综合案例1.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/video.mp4" controls></video>
</body>
</html>