Day01-HTML初识

纯纯不会写代码

已于 2022-09-29 20:25:53 修改

阅读量160

点赞数

分类专栏：女神前端文章标签： html 前端 chrome

于 2022-06-22 22:39:05 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/125417826

版权

女神前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、基础认知

1.1 认识网页

问题1：网页由哪些部分组成？
答：文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么？
答：前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的界面的？
答：通过浏览器转化（解释和渲染）成用户看到的网页

1.2 五大浏览器

五大浏览器有哪些？

IE浏览器
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
safari浏览器
欧朋浏览器（Opera）

相同的网页在不同的浏览器中显示效果会完全一致吗？
答：因为不同浏览渲染引擎不同，解析的效果会存在差异

前端工程师日常推荐使用哪一个浏览器？
答：谷歌浏览器（Chrome）

1.3 Web标准的构成

Web标准中分成三个构成：

web标准的构成

二、HTML标签学习

2.1 标题标签

标题标签一共有几个？分别表示什么含义？

h1标签：一级标题
h2标签：二级标题
h3标签：三级标题
h4标签：四级标题
h5标签：五级标题
h6标签：六级标题

标题标签有哪些特点？

文字都有加粗
文字都有变大，但是从h1->h6文字逐渐减小
独占一行

<!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>
    <!-- ctrl+D -->
    <!-- 标题都是独占一行的 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

标题运行结果

2.2 段落标签

段落的标签名是？
答：p标签

段落标签有哪些特点？

段落之间存在间隙
独占一行

br：强制换行，单标签
hr：水平分割线，单标签


```html

```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>
    <!-- 场景：在新闻和文章的页面中，用于分段显示 -->
    <!-- 特点：（1）段落之间存在间隙 （2）独占一行 -->
    <!-- br:强制换行 -->
    <!-- hr:水平分割线 -->
    <h1>这是文章标题</h1>
    <hr>
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 <br> 哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或</p>
    <p>啧啧啧啧啧啧做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做啧啧啧啧啧啧做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做做在啧啧啧啧啧啧做做做做做</p>
</body>
</html>

段落结果

2.3 文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果

格式化1
格式化2

<!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>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
</body>
</html>

格式化结果

2.4 图片标签

在页面中展示一张图片，需要使用什么标签？
答：img标签

图片的常见属性如下：
图片属性

<!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>
    <!-- alt:替换文本，当图片不显示的时候显示的文字 -->
    <!-- title:当鼠标悬停时，才显示的文本 -->
    <!-- width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形 -->
    <img src="cat.gif" alt="我是替换文本" title="这是title文字，鼠标悬停的时候显示" width="200" >
</body>
</html>

图片结果

2.5 路径的介绍

2.5.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>
    <img src="C:\Users\刘星纯\Desktop\Day001\images\dog.gif" alt="">
</body>
</html>

绝对路径

2.5.2 相对路径-同级

同级目录：当前文件和目标文件在同一目录（文件夹）中

VS Code快捷操作：直接敲./后，会自动提示同级目录有哪些文件，直接选择即可！

<!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>
    <img src="cat.gif" alt="">
    <img src="./cat.gif" alt="">
</body>
</html>

2.5.3 相对路径-下级目录

VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

<!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>
    <img src="images/dog.gif" alt="">
</body>
</html>

2.5.4 相对路径-上级目录

VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可！

<!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>
    <img src="../cat.gif" alt="">
    <img src="../images/map.jpg" alt="">
</body>
</html>

2.6 音频标签的介绍

在网页中插入音频使用什么标签？
答：audio标签

音频标签有哪些常见属性？

音频属性
音频标签目前支持三种格式：MP3、Wav、Ogg

<!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>
    <audio src="./music.mp3" controls autoplay loop></audio>
</body>
</html>

音频结果

2.7视频标签的介绍

要在网页中插入视频要使用什么标签？
答：video标签

视频标签有哪些常见属性？
视频属性
视频标签目前支持三种格式：MP4、WebM、Ogg

<!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>
    <!-- 谷歌浏览器可以让视频自动播放，但是必须是静音状态muted -->
    <video src="./video.mp4" controls autoplay muted loop></video>
</body>
</html>

视频结果

2.8 链接标签的介绍

如果需要实现点击之后，从一个页面跳转到另一个页面，需要使用什么标签？
答：链接标签：a标签

通过什么属性可以设置a标签的到底跳转去哪里？
答：href属性

通过什么属性可以设置a标签的跳转方式？取值有哪些？
target属性
取值1：_self：在当前窗口中跳转
取值2：_blank：在新窗口中跳转

href取#时表示空链接

<!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>
    <!-- href：跳转地址 -->
    <a href="https://www.baidu.com/">跳转到百度</a>
    <br>
    <a href="./01-标题标签.html">点我呀，点了就去01-标题标签</a>
    <!-- 当开发网站的初期，我们还不知道跳转地址的时候，href的值书写#（空连接） -->
    <br>
    <a href="#">空链接，不知道跳到哪里去</a>
    <br>
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
</body>
</html>

链接结果

2.9 综合案例-招聘

<!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年以上前端开发经验，<b>精通html5/css3/javascript等</b>开发技术</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>

在这里插入图片描述

2.10 综合案例-跳转

index.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>
    <h1>今日搜索热词</h1>
    <hr>
    <h2>1、阿卡贝拉</h2>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
    <a href="./one.html" target="_blank"> 阿卡贝拉《千与千寻》</a></p>
    <h2>2、翻唱</h2>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="./two.html"> 有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
</body>
</html>

one.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>
    <h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
    <hr>
    <h2>音频</h2>
    <audio src="./images/music.mp3" controls></audio>
</body>
</html>

two.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>
    <h1>有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn</h1>
    <hr>
    <h2>视频</h2>
    <video src="./images/video.mp4" controls></video>
</body>
</html>