链接
HTML 介绍
HTML:HyperText Markup Language,超文本标记语言,是一种用于创建网页的标准标记语言。
HTML 运行在浏览器上,由浏览器来解析。
对于中文网页需要使用 <meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK
为默认编码,则你需要设置为 <meta charset="gbk">
。
HTML 文件的后缀有两种:html
和 htm
,两种后缀名没有区别,都可以使用。
写代码的位置:VSCode
看效果的位置:谷歌浏览器
VSCode 安装插件 open in browser
:
接下来要保证每次用 open in browser
打开的是谷歌浏览器。只需要将谷歌浏览器设置为默认的浏览器即可。
首先进入控制面板,找到默认程序:
VSCode:Ctrl + b 折叠侧边栏。
效果:
修改代码,加上标签:
点击刷新按钮,刷新网页,查看效果:
需要包裹内容时,使用双标签,不需要则使用单标签。
HTML 中绝大多数都是双标签,只有极个别是单标签。
HTML 基本骨架
HTML 基本骨架就是网页模板,所有网页都要基于这个模板来编写代码。这个模板由几个固定的标签组成,用这几个标签来表示 HTML 的不同位置。写代码时可以根据位置的不同来对号入座。
最外层是一对 HTML 标签,HTML 标签表示整个网页。
用快捷键生成模板的效果:
在浏览器中打开时是一个空白的白板,没有任何内容:
如果想要展示一些文字,需要将文字写在 body 标签内部。
例如:
<!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>想要展示的文字。
</body>
</html>
效果:
注意这里代码里的网页标题是 Document,浏览器网页的标题同样也是 Document,是保持对应的。
<!DOCTYPE html>
声明为 HTML5 文档<html>
元素是 HTML 页面的根元素<head>
元素包含了文档的元(meta)数据,如<meta charset="utf-8">
定义网页编码格式为utf-8
<title>
元素描述了文档的标题<body>
元素包含了可见的页面内容<h1>
元素定义一个大标题<p>
元素定义一个段落
在浏览器的页面上使用键盘上的 F12
按键开启调试模式,或者选择 元素
选项卡,就可以看到组成标签。
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言:HyperText Markup Language
-
HTML 不是一种编程语言,而是一种标记语言
-
标记语言是一套标记标签(markup tag)
-
HTML 使用标记标签来描述网页
-
HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
标签的关系
标签之间有两种关系:
- 父子(嵌套)
- 兄弟(并列)
<html><head></head><body></body>
</html>
注释
程序示例:
<!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>这是文字,能看见吗?<br><!-- 这是注释,浏览器不显示。 --><!-- 可以给代码加注释 --><strong>111. 这是加粗的内容。</strong><!-- <strong>222. 这是加粗的内容。</strong> -->
</body>
</html>
效果:
标题标签
程序示例:
<!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><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>
效果:
段落标签
程序示例:
<!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><p>有些亲贵却不在乎前车之鉴,多尔衮一垮台,便纷纷来永平府设立王庄、田庄。这两年山川秀美的所在,不时出现楼阁亭台点缀的花园、歇山顶的高大堂屋、卷棚式的青砖住房,一派华美富丽,乡下人都看得目瞪口呆了。</p><p>虹桥镇的东岳庙前和通向四乡的大路口,早已布棚林立,摊贩如云了。火势旺盛的炉边,热气腾腾,铜勺敲着锅边当当响,卖的是油炸果子、油豆腐、豆浆、豆腐脑、杂碎汤;提篮挎筐的小贩声声吆喝,叫卖着酱鸡、卤蛋、夹肉火烧、点红馒头;茶棚、酒棚随处可见;落花生、炒栗子、金黄柿子、山里红,更摆得一堆一堆的。小地摊最多,在兜售用麦草、箔纸编制的各种玩具:身上写着“富贵有余”字样的红鱼,手捧大元宝笑嘻嘻的“招财童子”,盛满银锭、金光闪闪的“聚宝盆”,象征福气的红绒蝙蝠,等等。摊贩的主顾主要倒不是赛神队伍,而是这些来自方圆百里内的游人看客。这里既有身着直领衫、交领衫、毡帽布鞋,被满洲人称为“蛮子”的汉人,又有长袍短褂、皮帽皮靴,被汉人叫做“鞑子”的满洲人、蒙古人;既有缠腰带、背褡裢、一脸风霜的庄户人,又有长衫翩翩、满面书卷气的文人。不管是哪种人,都将在这纷纷攘攘的庙会上吃饱喝足看够,然后买点小玩艺儿带回家:买个“聚宝盆”,叫做“求财如意”;买只绒蝙蝠,叫做“戴福还家”。只这吉兆,就够叫人舒心快意的了。这就难怪太阳才上一竿,镇上已经万头攒动,一片嘈杂了。</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>Document</title>
</head>
<body>第一行内容。还是第一行内容。<br>第二行内容。<br>第三行内容。<!-- 可以添加多个换行,从而产生空行 --><br><br><br>新的一行。<hr>
</body>
</html>
效果:
文本格式化标签
程序示例:
<!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><strong>strong 加粗</strong><br><b>b 加粗</b><br><em>em 倾斜</em><br><i>i 倾斜</i><br><ins>ins 下划线</ins><br><u>u 下划线</u><br><del>del 删除线</del><br><s>s 删除线</s><br>嵌套写法:<br><strong><em>加粗斜体</em></strong>
</body>
</html>
效果:
图像标签
程序示例:
<!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="./1.jpg"><img src="./2.jpg">
</body>
</html>
两张图片不会换行,除非一张图片太大了,导致放不下,下一张图片会看起来放在了下一行,其实还是在同一行。或者下一张图片比较大,在上一张图片后面放不下,就会单独放到一行中。
在实际工作当中,设置图片的高度和宽度,都是通过 CSS 来设置的,对 HTML 的高度和宽度两个属性,只需要了解即可。
程序示例:
<!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="./11.jpg" alt="周依然"><img src="./2.jpg" title="还是周依然">
</body>
</html>
效果:
程序示例:
<!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="./1.jpg" alt="" width="600"><img src="./1.jpg" alt="" width="900" height="200">
</body>
</html>
效果:
路径
程序示例:
<!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="E:\杂\2.jpg" alt=""><img src="E:/杂/2.jpg" alt="">
</body>
</html>
不希望下载图片,而是使用网络图片:
程序示例:
<!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><!-- https://www.itheima.com/images/logo.png --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>
超链接
超链接标签是双标签 a,中间包裹内容。
程序示例:
<!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><a href="https://www.baidu.com/">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>
对于超链接,按住 Ctrl 键就能在新窗口中打开。
或者再加一个属性,也能实现新窗口打开:
<!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><a href="https://www.baidu.com/" target="_blank">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>
开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次。
程序示例:
<!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><a href="#">空链接</a>
</body></html>
音频标签
音频标签在网页中插入声音。
音频标签是 audio 双标签,src 属性是必须要有的属性。
程序示例:
<!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><audio src="./media/music.mp3"></audio>
</body></html>
此时打开浏览器是没有声音的,因为浏览器把自动播放的功能都是禁用的。而且也看不出来有没有添加成功,因为没有任何提示信息,打开浏览器就是一个空白的白板。如图:
可以使用 controls 属性显示音频控制面板,面板能看到就说明声音插入成功了。
程序示例:
<!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><audio src="./media/music.mp3" controls></audio>
</body></html>
效果:
controls
属性的完整写法为 controls = "controls"
,但是在书写 HTML5
属性时,如果属性名和属性值相同,可以简写为一个单词。因此 controls = "controls"
可以简写为 controls
。
添加 loop 属性可以让音频自动循环播放,一次播放完了后自动开始从头播放。
添加 autoplay 属性将不会起任何作用,因为浏览器是禁用自动播放的。
程序示例:
<!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><audio src="./media/music.mp3" controls loop autoplay></audio>
</body></html>
视频标签
视频标签在网页中插入一个视频。
程序示例:
<!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><video src="./media/vue.mp4"></video>
</body>
</html>
效果:
看不出来是不是一个视频,下面添加控制面板:
<!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><video src="./media/vue.mp4" controls></video>
</body>
</html>
效果:
点击播放按钮就可以开始播放视频了。
添加 muted 属性时,打开浏览器时默认声音是关闭的,可以手动打开。
<!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><video src="./media/vue.mp4" controls loop muted></video>
</body>
</html>
效果:
有了 muted
属性之后再添加 autoplay
属性时,当打开浏览器时,视频将自动播放且静音播放。如果没有 muted
属性却有 autoplay
属性,当打开浏览器时视频将不会播放。
程序示例:
<!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><video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>
综合案例一 个人简介
VSCode 自动换行:alt + z
<!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.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>
</body>
</html>
效果:
综合案例二 Vue 简介
程序:
<!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>Vue.js</h1><p>Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。</p><p>其作者为<a href="./个人简介.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>
</body>
</html>