HTML 基础认识：
学习路径：
一、基础概念
1.认识网页
（1）组成：
文字、图片、视频、音频、超链接
（2）本质：
前端所写的代码经过浏览器转化（解析和渲染）
2.五大浏览器和渲染引擎
（1）浏览器：
网页显示，运行的平台，是前端开发的必备物品
（2）常见的五大浏览器：
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
（3）渲染引擎
- 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
- 浏览器不同，内置的渲染引擎也可能不同
- 渲染引擎不同，解析相同代码时的速度、性能、效果也不同的
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE浏览器 | Trident | IE\猎豹安全、360极速浏览器、百度浏览器 |
| 火狐浏览器（Firefox） | Gecko | 火狐浏览器内核 |
| 谷歌浏览器（Chrome） | Blink | Blink实际为Webkit的分支 |
| Safari浏览器 | Webkit | 苹果浏览器内核 |
| 欧朋浏览器（Opera） | Blink | Blink实际为Webkit的分支 |
3.Web标准
### （1）Web标准的作用：
让不同浏览器按照相同的标准显示效果，让展示的效果统一
（2）Web标准的组成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
（3）Web标准的记忆方法：
- Web标准要求页面实现：结构、表现、行为三层分离
二、HTML体验
1.HTML的感知
HTML（Hyper Text Markup Language) 中文名：超文本标记语言
- 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
案例：文字变粗案例
- 体验构建网页，实现网页中显示一个加粗的文字
- 创建方法，新建文本文件，修改为HTML后缀
- 以记事本打开HTML后输入需要加粗的文章，在文字前端输入
<strong>，文字后端输入<\strong> - 效果图
2.HTML骨架结构
（1）HTML页面固定结构
- 网页类似于一篇文章：
- 文章的固定结构：开头、正文、落款等…
- 网页的固定结构：整体、头部、标题、主体
- 网页的固定结构是要通过特点的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
（2）HTML骨架结构的标签组成
-
html标签 ：网页的整体
-
head标签：网页的头部
-
body标签：网页的身体
-
title标签：网页的标签
3 HTML的开发工具
(1)实际开发HTML时要注意开发的效率和便携性，因此会使用一些开发工具
- Visual Studio Code（最流行）
- 优点：速度快，体积小，插件多
- Webstorm 、Sublime 、Dreamweaver、Hbuilder
- Webstrom和Sublime较相似，Dreamweaver常在大学CSS的教学上使用
(2) VS Code创建网页的步骤
-
双击打开VS Code软件，在HTML文件夹下创建一个html文件
-
输入
!输入Enter, VS Code补全为:
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
-
创建结果：
三、HTML的语法规范
1.HTML的注释
（1）什么是注释：
- 对代码内容或含义的注解
（2）注释的作用和写法：
- 注释的作用：
- 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
- 注释的快捷键：
-
在VS Code中：ctrl+/
-
2.HTML标签的构成
（1）HTML标签的结构：
- 标签的结构图：
- 结构说明：
- 标签由<、>、/、英文单词或字母组成。并把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
3. HTML标签的关系
HTML标签与标签之间的关系可分为：
- 父子关系（嵌套关系）
<head>
<title></title>
</head>
- 兄弟关系（并列关系）
<head></head>
<body></body>
HTML标签学习
学习目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发
一、排版标签
1.标题标签
- 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主体
- 代码：h系列标签（HTML标准里至多有h1~h6）
<h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> - 语义：1~6级标题，重要性依次递减
- 特点：
-
文字都有加粗
-
文字都有变大，并且从h1 -> h6文字逐渐减小
-
独占一行
-
2.段落标签
- 场景：在新闻和文章的界面中，用于分段显示
- 代码：
<p>我是一段文字</p> - 语义：段落
- 特点：
- 段落之间存在间隙
- 独占一行
3.换行标签
- 场景:让文字强制换行显示
- 代码:·
<br> - 语义：换行
- 特点：
- 单标签
- 让文字强制换行
4.水平线标签
- 场景:分割不同主题内容的水平线
- 代码:
<hr> - 语义：主题的分割转换
- 特点：
- 单标签
- 在页面中显示一条水平线
二、文本格式化标签
1.文本格式化标签介绍
- 场景：需要让文字加粗、下划线、倾斜、
删除线等效果
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
- 语义：突出重要性的强调语境（使用右边语句）
2.标签语义化
- 实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，使用p标签
- 好处：
- 对人：好理解，好记忆
- 对机器：有利于机器解析，对搜索引擎(SEO)有帮助
- 推荐：
-
stong、ins、em、del，表示的强调语义更强烈!
-
三、媒体标签
1.图片标签
（1）图片标签的介绍
- 场景：在网页中显示图片
- 代码：
<img src="" alt=""> - 特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置！
- 标签的完整结构图：
（2）图片标签的src属性
- 属性名：src
- 属性值：目标图片的路径
- 注意点：
- 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 路径情况
<body> <img src="./1.jpg" alt =""> </body> </html>
- 属性注意点：(
src和alt分别是img的两个属性)- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
(3)图片标签的alt属性
- 属性名：alt
- 属性值：替换文本
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
<body> <img src= "./错的路径图片会加载失败" alt= " 我是替换文本" title= ""> </body>
(4)图片标签的title属性
- 属性名: title
- 属性值：提示文本
- 当鼠标悬停时，才显示的文本
- 注意点：title属性不仅可以用于图片标签，还可以用于其他标签
<body>
<img src= "./1.jpg" alt= " 我是替换文本" title= "我是title的效果">
</body>
</html>
（5）图片标签的width和height属性
- 属性名：width和height
- 属性值：宽度和高度（数字）
- 注意点：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height的两个，若设置不当此时图片可能会变形
- 效果图：
3.路径
（1)目录文件夹和根目录
实际工作时文件不可以乱放都需要放入一个文件夹中便于管理。
目录文件夹：普通文件夹，只不过存放了一些做网页的相关素材。
根目录：打开目录文件夹的第一层就是根目录。
（2）相对路径
意义：以引用文件所在的位置为参考基础，而建立出的目录路径。
简单的来说，图片相对于HTML页面的位置
| 相对路径的分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件与HTML文件在同一级 | |
| 下一级路径 | / | 图像文件位于其文件的下一级 |
| 上一级路径 | …/ | 图像文件位于其文件的上一级 |
例如：
<img src="图像名称">
<img src="文件夹名/图片名">
<img src="../图片名">
（3）绝对路径
意义：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例:"D:\wed\img\logo.gif"或完整的网络地址
4.音频标签
作用：引入音频
代码：< audio src=" " controls > < /audio >
属性如下：
5.视频标签：
作用：引入视频
代码：< video src=" "> < /video >
属性如下
作用：引入视频
代码：< video src=" "> < /video >
四、链接标签
1.超链接标签
（1）定义：标签用于定义超链接，作用是从一个页面链接到另一个页面
（2）语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本/图片</a>
点击图片/文字即可进行跳转。请添加图片描述
2.链接分类
（1）外部链接
例：<a href="http://www.baidu.com">百度</a>
特定格式:http：//www........即可
（2）内部链接
网站内部页面之间的相互链接。
直接在href=" "在引号之中直接写自己所书写的html文件的文件名即可跳转。
（3）空连接（#）
空链接是占位的链接。
<a href="#">文件</a>
（4) 下载链接
<a href="压缩包的名字">名字</a>
（5） 网页元素链接
<a href=" "> <img src="地址"> </a>
点击图片即可跳转
（6）锚点链接
是使用在一个网页中，内容太长不好寻找指定内容是所设置的链接，可直接找到想要查找的内容。
在href属性中，设置属性值为#名字的形式。
如：<a href="#two">第二</a>
找到目标位置标签，咋里面添加一个id属性=设置的名字即可
如:<h3 id="two"> 第2集</h3>
五、实战演练
1.招聘
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>腾讯web高级前端开发招聘</h1>
<hr>
<h2>职位描述</h2>
<p>负责一方面内容</p>
<h2>岗位要求</h2>
<p>5年以上的开发经验<strong>精通html5/css3/javascript等</strong></p>
<p>熟悉操作系统</p>
<p>对web熟悉</p>
<h2>工作地址</h2>
<p>上海市</p>
<img src="./images/公司地图地址.jpg" alt="公司地址" style="zoom: 50%;">
</body>
</html>
效果图：
2.跳转-index与其他页面
index.html
<h1>这是首页面index</h1>
<a href="two.html" >到two页面</a>
one.html
<video src="sample.mp4" controls loop>视频</video>
<audio src="sample.mp3" controls loop>音频</audio>
two.html
<h1><a href="one.html">到one页面</a></h1>
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小侯不摆烂</title>
</head>
<body>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank"><h1>对角巷乐队</h1></a>
<p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p>
<img src="2.jpeg" height="650" width="1000" title="对角巷新专辑">
<h4> 一起去吧，更远的地方</h4>
<p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。</p>
<h4>让我们在山的顶峰相遇吧</h4>
<img src="对角巷.webp" title="对角巷乐队初期合照"><br>
<a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>
<p>这首歌曲是由主唱王艺丰包揽词曲，邀请到陈禹骁进行制作，整支乐队也参与到编曲的工作当中。对角巷的每一首歌曲都希望给歌迷们最好的呈现，同时也给人们带来温暖和感动。我们都在这个快节奏的时代中努力地生活着，看似平凡，但是我们所有的努力都是我们存在的价值和意义。</p>
</body>
</html>
跳转网页的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在日月的璀璨间闪耀</title>
</head>
<body>
<h2>对角巷——在日月的璀璨间闪耀</h2>
<img src="在日月.webp"><br>
我们追逐着夕阳<br>
想在它消失前赶到天桥上<br>
忙碌的人去的方向<br>
是不是他心所想<br>
曾经幻想俯瞰世界<br>
如今大多病死荒野<br>
残存的热血挣扎于<br>
疲惫却不肯睡去的夜<br>
仰望仍看不见星河<br>
低头还是熟悉的坎坷<br>
只剩一颗燃烧的心<br>
在日月的璀璨间闪耀着<br>
世间安得双全法<br>
不负远方不负她<br>
头也不回的世界啊<br>
能让我们拥有这一切吗<br>
手机里的音乐在响<br>
逃避着不去想明天会怎样<br>
可谁能逃得过时光<br>
努力的人更绝望<br>
曾经幻想俯瞰世界<br>
如今大多病死荒野<br>
残存的热血挣扎于<br>
疲惫却不肯睡去的夜<br>
仰望仍看不见星河<br>
低头还是熟悉的坎坷<br>
只剩一颗燃烧的心<br>
在日月的璀璨间闪耀着<br>
世间安得双全法<br>
不负远方不负她<br>
头也不回的世界啊<br>
能让我们拥有这一切吗<br>
仰望仍看不见星河<br>
低头还是熟悉的坎坷<br>
只剩一颗燃烧的心<br>
在日月的璀璨间闪耀着<br>
世间安得双全法<br>
不负远方不负她<br>
头也不回的世界啊<br>
我们要拥有这一切呀！<br>
</body>
</html>
8873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
