基础认知
网页的组成和本质
网页由哪些部分组成？
文字、图片、音频、视频、超链接
网页背后的本质是什么？
前端程序员写的代码
前端的代码是通过什么软件转换成用户研制的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
打开浏览器，上网就会看到网页，文字、音频等等。超链接可能体现的不太直观，一般用于菜单或者导航栏。点一下就会跳到下一个网页。
网页还是代码，需要写代码。
不过Java有编译器，python用的是解释器。那么前端的代码就是用浏览器转换的。
浏览器
五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
浏览器就是用来运行HTML代码的，就像python离不开解释器。
这五大浏览器，没全用过，但是都知道，现在IE停用了。以前我用的谷歌浏览器，现在edge微软的浏览器也是很好用的，火狐浏览器，现在Linux系统一般都会预装，safari是苹果的，欧朋浏览器好像在2015年那会特别火。
我还以为360会成为五大浏览器之一
渲染引擎
- 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
- 浏览器出品的公司不同，内在的渲染引擎也是不同的
- 渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实是Webkit的分支 |
渲染引擎就是用来渲染网页的，可以说是编译或者解释HTML代码的
不一样的引擎会有不一样的效果，这也好理解，为什么你的电脑快，我的电脑慢，配置不一样。
这也就说明了有很多浏览器，为什么这个好用，这个不好用，就是引擎不一样。好像现在的360浏览器内核换成谷歌的了，那还是不好用。
Web标准
为什么需要Web标准
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
上面提到过，渲染引擎的不同，那么会导致代码的速度、性能、效果不同。
但是我的电脑配置比较低就只能用这个浏览器，那不可能和打开的浏览器会和你打开的不一样吧
想要一样，那就要遵循一个标准，Web标准
把网页不同的效果统一成一个效果
Web标准的构成
| 构成 | 语言 | 说明结构 |
|---|---|---|
| 结构 | HTML | 网页元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色，大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
JavaScript也成为JS
这也就是著名的前端三件套：HTML、CSS、JS
一开始，我也很迷，这三个分别干什么的，我在网上看了篇文章是这么说的
HTML就是人的骨架，骨头，因为有HTML，所以就有这个人
那人要穿衣服，穿好看的衣服，那就是CSS
JS呢，人是要会吃饭、说话的这就是行为
有了HTML那么网页就出来了，那网页的颜色这些就是CSS的工作，JavaScript交互。
Web感知
HTML的概念
HTML（Hyper Text Markup Language）装完译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
这就是一个标准，我们负责写HTML代码，然后交给浏览器渲染，给人看。图片、音频、视频等内容进行描述
HTML是个语法，和老外交流要懂英语语法，和浏览器交流就要和HTML语法。也就是web标准、
HTML是一标签的形式书写，略懂一点<标签>内容</标签>
**案例：**文字加粗
<strong>你猜，这个字是加粗的吗</strong>
<strong>...</strong>标签可以让文字加粗
HTML骨架
网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特点的 HTML标签 进行描述的
前面在web标准提到了人，现在还是让，人有头有身体，网页也有
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
网页的骨架就和上面的一样，head是头，body身体
头部一般写标题，css、JavaScript等等内容
身子那就是网页的内容
注释
注释的作用：
- 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
注释的快捷键：
在VS Code中：ctrl + /
学习一门语言，或者说每一门语言都会有注释
注释的作用不言而喻，帮助我们理解代码
<!-- 这是一行注释 -->
可以说HTML语言注释的格式是：<!--注释内容-->
标签组成和关系
标签组成
结构说明：
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
<strong>文字要加粗</strong>
<strong>开始标签；文字要加粗包裹的内容；</strong>结束标签
标签由、>、/、英文单词或字母几部分组成，也很容易发现。
双标签是成对出现，<>...</>，但标签<>
标签关系
-
父级关系（嵌套）
<head> <title></title> </head>上下级关系
-
兄弟关系（并列）
<head></head> <body></body>同级
HTML标签学习
排版标签
标题标签
- 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
- 代码：h系列标签
- 语义：1~6级标题，重要程度依次递减
- 特点：
- 文字都有加粗
- 文字都有变大，并且从h1 → h6文字逐渐减小
- 独占一行
- 注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
语法
文字会逐渐减小，独占一行
段落标签
- 场景：在新闻和文章的页面中，用于分段显示
- 代码：
<p> 我是一段文字</p>- 语义：段落
- 特点：
- 段落之间存在间隙
- 独占一行
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0k3FYU5t-1675755478210)(C:\Users\yang\AppData\Roaming\Typora\typora-user-images\image-20230205190419701.png)]
和标题标签一样独占一行，但是段落可以有好几段，每段的间距现在是系统默认的，后面可以用css修改
换行标签
- 场景：让文字强制换行显示
- 代码：
<br>- 语义：换行
- 特点：
- 单标签
- 让文字强制换
<body>
床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>
</body>
换行
有个新发现，换行和段落的间隙是不一样的
水平线标签
- 场景：分割不同主题内容的水平线
- 代码：
<hr>- 语义：主题的分割转换
- 特点：
- 单标签
- 在页面中显示一条水平线
<body>
静夜思
<hr>
床前明月光，疑是地上霜。举头望明月，低头思故乡。
</body>
用于主题转换，上面是标题，下面是正文。中间有条线。
文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码
标签 标签 说明 b strong 加粗 u ins 下划线 i em 倾斜 s del 删除线 语义：突出重要性的强调语境
实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签 • ……
好处：
对人：好理解，好记忆
对机器：有利于机器解析，对搜索引擎（SEO）有帮助
推荐：
strong、ins、em、del，表示的强调语义更强烈！
<body>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除</del>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除</s>
</body>
这个就像word、ppt对文字有个加粗、倾斜的效果，在人们观看的时候有一种视觉上的冲击，这个是重点，会先注意这个。
媒体标签
图片标签
- 场景：在网页中显示图片
- 代码：
<img src="" alt="">- 特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
img标签就是给网页添加图片的，是个单标签
<img src="" alt=""
网页标签里面还有一些内容src=""、alt=""这些属于标签属性
拿出一个举例
src=""这是一个标签属性，其中src是属性名，""是属性值，属性值两边是由英文引号括起来的
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
标签属性写在标签内部，一个标签可以有多个属性，标签与属性或者属性与属性之间空格隔开，属性没有顺序
| 属性 | 说明 |
|---|---|
| src | 指定需要展示图片的路径 |
| alt | 替换文本。当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停时，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
以上是图片的常用属性
body>
<img src="images/cat.gif" alt="这是个猫" title="小猫" width="300">
</body>
这是一个完整的代码
title属性鼠标放在图片上会有提示，我把鼠标放在小猫的图片上会提示小猫
<body>
<img src="" alt="这是个猫" title="小猫" width="300">
</body>
没有给出图片的位置，使用图片没有加载出来，这个时候alt属性的作用就体现出来了。
一般src和alt标签会一起使用，因为如果图片加载不出来，那么会有文字提示用户是什么。
还有一个属性没有用到，height
<body>
<img src="images/cat.gif" alt="这是个猫" title="小猫" width="300" height="500">
</body>
如果，width和height属性一起使用，图片会变形，如果只用一个，图片会等比例放大或缩小，所以为了让图片好看美观，一般使用一个属性就可以。
路径
- 概念普及：
- 当前文件：当前的html网页
- 目标文件：要找到的图片
- 相对路径：从当前文件开始出发找目标文件的过程
- 相对路径分类：
- 同级目录
- 下级目录
- 上级目录
这个路径，在每个编程语言中都会提到，所以我也就学过，但是HTML中上级目录我还是第一次听说，这个概念我明白，但是我不会表示
- 同级目录：当前文件和目标文件在同一目录中
- 类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
- 生活中：两个人独处一室，我想找你，直接喊名字即可！
- 代码步骤：直接写目标文件的名字即可
- 方法一：
<img src="目标图片.gif">- 方法二：
<img src="./目标图片.gif">- VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
网页和目标文件必须在同一个文件夹里面，
<img src="目标图片.gif">
如果不在同一个文件夹，那不行
下级目录：目标文件在下级目录中
类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
- 先知道你去了哪一个房间 → 房间名：卧室
- 进入这个房间 → 进入
- 此时又独处一室 → 直接喊你名字
- 代码步骤
- 先知道在哪个文件夹里面 → 文件夹名字
- 进入这个文件夹 → /
- 此时看到目标文件直接喊她 → 直接写目标文件名字
- VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
就是说为了方便管理，把图片文件放在了文件夹里面，这个文件夹与网页文件是一个目录，那么怎么找到图片文件
会先打开这个文件夹，然后找到文件，写代码也一样
<img src="images/cat.gif">
与同级目录相比，images与网页文件在一个文件夹里面，图片文件在images文件夹里面
在一般写项目的时候，这种方式很常用
上级目录：目标文件在上级目录中
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
- 先要出卧室，来到大厅 → 出去
- 此时又独处一室 → 直接喊你名字
代码步骤：
- 先出当前文件夹，到上一级目录 → …/
- 此时看到目标文件直接喊她 → 直接写目标文件
VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可！
这个与下级目录相反。目标文件在网页文件的上一级。
<img src="../目标图片.gif">
这个第一次听说，也是第一次见
三种不同的路径中最常用的还是下级目录、
音频标签
场景：在页面中插入音频
代码：
<audio src="./music.mp3" controls></audio>常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放（部分浏览器不支持） loop 循环播放 注意点：音频标签目前支持三种格式：MP3、Wav、Ogg
<body>
<audio src="./images/music.mp3" controls autoplay></audio>
</body>
这是一种语法，音频标签，有些网页即使是加了自动播放，也不会自动播放，需要手动
<body>
<audio src="./images/music.mp3" ></audio>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QJgM8IHL-1675755478212)(C:\Users\yang\AppData\Roaming\Typora\typora-user-images\image-20230206181426718.png)]
如果不加控件，会什么都没有，也不会自动播放，我以为哪里有问题
视频标签
场景：在页面中插入视频
代码：
<video src="./video .mp4" controls></video >常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放 loop 循环播放 注意点：音频标签目前支持三种格式：MP4、WebM、Ogg
<body>
<video src="./images/video.mp4" controls autoplay muted></video>
</body>
上面说谷歌浏览器需要配合muted实现自动静音播放，edge也是
这一点其实很人性化，要不然打开网页就有声音，会吓用户一跳
链接标签
- 场景：点击之后，从一个页面跳转到另一个页面
- 称呼： a标签、超链接、锚链接
- 代码：
<a href="目标网页.thml">超链接</a>- 特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
超链接，点击这个链接，网页就会跳转，跳转到指定页面，类似网站首页的菜单
- 属性名：href
- 属性值：点击之后跳转去哪一个网页（目标网页的路径）
- 外部链接：
<a href="https://www.baidu.com">百度一下</a>- 内部链接：
<a href="目标网页.thml">超链接</a>
显示特点：
- a标签默认文字有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
<body>
<a href="https://www.baidu.com">百度一下</a>
</body>
这就是一个a标签，因为我点击过，所以显示紫色。
点击一下，跳转到百度页面。
属性名：target
属性值：目标网页的打开形式
取值 效果 _self 默认值，在当前窗口中跳转（覆盖原网页） _blank 在新窗口中跳转（保留原网页）
<body>
<!-- 外部网页 -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!-- 内部网页 -->
<a href="./01标题标签.html" target="_blank">标题标签</a>
</body>
在新窗口中打开，这个我是刚知道
空链接
- 代码：
<a href="#">空链接</a>- 功能：
- 点击之后回到网页顶部
- 开发中不确定该链接最终跳转位置，用空链接占个位
<a href="#">空链接</a>
空链接，哪里也不会跳转，类似一个占位符。
综合案例
招聘案例
<!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>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
负责重点项目的前端技术方案和架构的研发和维护工作；
<h2>岗位要求</h2>
<p>5年以上前端开发经验， <strong>精通html5/css3/javascript等</strong> web开发技术；</p>
<p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
<p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
<p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./images/map.jpg" alt="">
</body>
</html>
中间部分的岗位要求那里需要加p标签，否则就会不换行。
今日搜索热词
-
主页
<!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> <h1>今日搜索热词</h1> <hr> <h2>1、阿卡贝拉</h2> 阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="./音频.html" target="_blank">阿卡贝拉《千与千寻》</a> <h2>2、翻唱</h2> “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带 来不一样的风格。视频示例： <a href="./视频.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a> </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> <h1>阿卡贝拉《千与千寻》-AZA微唱团</h1> <hr> <h2>音频</h2> <audio src="./images/music.mp3" controls></audio> </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> <h1>有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn</h1> <hr> <h2>视频</h2> <video src="./images/video.mp4" controls autoplay muted></video> </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>
<h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
2016年07月27日 10:58:26 来源：新华网
<hr />
<p>
新华网上海7月26日电（记者李荣）26日13时36分至47分这一时间段，上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录，打破了此前1934年创下的40.2摄氏度的历史极值。
</p>
<p>
上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份“第四高”的高温值，这使得26日的“基础”气温就很高，超过了30摄氏度，然后不断地升温。此外，26日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。
</p>
<p>
在上海历史上，出现40摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站140年来仅出现了5次记录，除了这一次的新纪录，还有就是1934年7月12日的40.2摄氏度；1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。
</p>
<p>
由于气温实在太高，上海26日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到15时05分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。
</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>
<h1>尤雨溪简介</h1>
<h2>基本信息</h2>
<p>
尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于GoogleCreative
Labs和Meteor
DevelopmentGroup。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。
</p>
<h2>学习经历</h2>
<p>
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate
University，后在Parsons设计学院获得Design &
Technology艺术硕士学位，任职于纽约Google Creative Lab。
</p>
<h2>主要成就</h2>
<p>
尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript
，从此被这门编程语言深深吸引，开启了自己的前端生涯。
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>
链接跳转
-
首页
<!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> <h1>欢迎您来到首页</h1> <p> <a href="./链接跳转1.html">首页</a> <a href="./链接跳转2.html">列表页</a> <a href="./链接跳转3.html">详情页</a> <a href="./链接跳转4.html">登录页</a> </p> <img src="./images/index.png" alt="首页" /> </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> <h1>欢迎您来到列表页</h1> <p> <a href="./链接跳转1.html">首页</a> <a href="./链接跳转2.html">列表页</a> <a href="./链接跳转3.html">详情页</a> <a href="./链接跳转4.html">登录页</a> </p> <img src="./images/list.png" alt="列表页" /> </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> <h1>欢迎您来到详情页</h1> <p> <a href="./链接跳转1.html">首页</a> <a href="./链接跳转2.html">列表页</a> <a href="./链接跳转3.html">详情页</a> <a href="./链接跳转4.html">登录页</a> </p> <img src="./images/details.png" alt="详情页" /> </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> <h1>欢迎您来到登录页</h1> <p> <a href="./链接跳转1.html">首页</a> <a href="./链接跳转2.html">列表页</a> <a href="./链接跳转3.html">详情页</a> <a href="./链接跳转4.html">登录页</a> </p> <img src="./images/login.png" alt="登录页" /> </body> </html>
这是一个网页跳转的案例，还有图片标签
总结
这是我的一个新专栏，前端，为什么要学习前端，保密，也有一部分是兴趣，
前端，我的理解是主要是做页面，用户是可以看见的，有一定的设计成分。我也喜欢设计。
然后我看的视频是B站的黑马程序员，Java、Linux也是看着这个博主，
还是老样子，写成博客，当作笔记。
这一部分，HTML认知我是有基础的，所以看的PPT完成的，视频没看多少，后面应该需要认真看了。
CTYPE html>
欢迎您来到登录页
```
[外链图片转存中…(img-WXpYA5hZ-1675755478215)]
这是一个网页跳转的案例，还有图片标签
总结
这是我的一个新专栏，前端，为什么要学习前端，保密，也有一部分是兴趣，
前端，我的理解是主要是做页面，用户是可以看见的，有一定的设计成分。我也喜欢设计。
然后我看的视频是B站的黑马程序员，Java、Linux也是看着这个博主，
还是老样子，写成博客，当作笔记。
这一部分，HTML认知我是有基础的，所以看的PPT完成的，视频没看多少，后面应该需要认真看了。
1469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
