HTML认知（P2-P23）_html p2-优快云博客

本文链接：https://blog.youkuaiyun.com/yuzhiweihhhhhh/article/details/127052215

目标：认识网页和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页，能够理解HTML的基本语法和标签的关系，能够使用排版标签实现网页中标题、段落等效果，能够使用相对路径选择不同目录下的文件，能够使用媒体标签在网页中显示图片、播放音频和视频，能够使用链接标签实现页面跳转功能。

一、基础认知

1.1认识网页

网页由文字、图片、音频、视频、超链接组成，网页背后本的质是前端程序员写的代码，而前端的代码是通过浏览器软件转化（解析和渲染）成用户看到的网页。

1.2五大浏览器和渲染引擎

浏览器：是网页显示、运行的平台，是前端开发必备利器，常见的五大浏览器如下：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）。其中，谷歌浏览器的市场占额最大，最为程序员所喜爱。

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分，浏览器出品的公司不同，内在的渲染引擎也不同：

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	Blink其实是Webkit的分支

注意点：

不同浏览器的渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

1.3Web标准

Web标准让不同的浏览器按照相同的标准显示结果，让展示的效果统一，Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

1.4HTML初体验

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述，HTML骨架结构由四个标签组成，分别是：html标签（网页的整体）、head标签（网页的头部）、body标签（网页的身体）、title标签（网页的标题）

<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>

VScode基本快捷键；

功能	快捷键	注意点
快速生成标签	英文+tab	或者按回车也可以
保存文件	ctrl+s	写完文件后必须保存文件，否则网页无变化
快速查看网页效果	ail+b	必须安装了open in browser插件
快速生成结构标签	！+tab	！是英文的，保证当前文件后缀名是.html
快速复制一整行	ctrl+c
快速粘贴一整行	ctrl+v
快速删除一整行	ctrl+x

注释的作用与写法：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码，浏览器执行代码时会忽略所有的注释，其写法为ctrl+/

HTML标签的结构：

双标签的属性需要写在开始标签中，可以同时有多个属性，标签名与属性之间、属性与属性之间以空格隔开，标签与标签之间的关系可以分为父子关系（嵌套关系）和兄弟关系（并列关系）

二、HTML标签学习

2.1排版标签

2.1.1标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签 h1-h6

语义：1-6级标题，重要程度依次递减

特点：文字都有加粗，文字都有变大，并从h1到h6文字逐渐减小，且独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.1.2段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：<p>我是一段文字</p>

语义：段落

特点：段落之间存在间隙，独占一行

2.1.3换行标签

场景：让文字强制换行显示

代码：<br>

语义：换行

特点：单标签，让文字强制换行

2.1.4水平线标签

场景：分割不同主题内容的水平线

代码：<hr>

语义：主题的分割转换

特点：单标签，在页面显示一条水平线

<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>保证以信念坚定、矢志不渝为思想引领力的理论优势</h2>
    <p>中国共产党诞生之初，就把马克思主义鲜明写在自己旗帜上，中国共产党的历史就是一部不断推进马克思主义中国化的历史，就是一部不断探索推进理论创新并进行理论创造的历史。</p>
    <h2>保证以凝聚共识、使命在肩为政治领导力的政治优势</h2>
    <p>中国共产党自1921年诞生，是中国历史乃至世界历史上“开天辟地的大事变”，始终把为中国人民谋幸福、为中华民族谋复兴作为自己的初心使命。  <br>中国人民和中华民族之所以能够扭转近代以后的历史命运、取得今天的伟大成就，最根本的是有中国共产党的坚强领导。</p>
</body>
</html>

显示效果：

2.2文本格式化标签

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

代码：b加粗、u下划线、i倾斜、s删除线、strong加粗、ins下划线、em倾斜、del删除线

实际项目中开发中选择标签的原则：标签语义化

即：根据语义选择对应正确的标签
如：需要写标题，就使用h系列标签
如：需要写段落，就使用p标签

好处：对人好理解好记忆，对机器有利于节气解析，对搜索引擎（SEO）有帮助

推荐strong、ins、em、del表示的强调语义更强烈

 <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>

显示效果：

2.3媒体标签

2.3.1图片标签

场景：在网页中显示图片

代码：<img src=“” alt=“”>

特点：单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置

图片的属性名：

属性名src的属性值为目标图片的路径，当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
属性名alt的属性值是替换文本，当图片加载失败时，才显示alt的文本；当图片加载成功时，不会显示alt的文本
属性名title的属性值是提示文本，当鼠标悬停时，才显示的文本，title属性不仅仅可以用于图片标签，还可以用于其他标签
属性名width和height的属性值是宽度和高度（数字），如果只设置了width或height中的一个，另一个没设置的会自动等比缩放（此时图片不会变形），如果同时设置了width和height两个，若设置不当此时图片可能会变形

2.3.2路径

场景：页面需要加载图片，需要先找到对应的图片，分为绝对路径和相对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

（例如：盘符开头：D:\day01\images\1.jpg、完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif ）

相对路径：从当前文件（当前的html网页）开始出发找目标文件（要找到的图片）的过程，相对路径分为同级目录、下级目录、上级目录

同级目录：当前文件和目标文件在同一目录中，代码直接写目标文件的名字即可：<img src="目标图片.gif">或者<img src="./目标图片.gif"> 。VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
下级目录：目标文件在下级目录中，代码步骤：先知道在哪个文件夹里面 → 文件夹名字，进入这个文件夹 → /，此时看到目标文件直接喊她 → 直接写目标文件名字。VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
上级目录：目标文件在上级目录中，代码步骤：先出当前文件夹，到上一级目录 → ../ 此时看到目标文件直接喊她 → 直接写目标文件。VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可。

 <!-- 同级目录,可以使用快捷键./或者直接输入 -->
    <img src="cat.gif" alt="">
    <img src="./cat.gif" alt="">
    <!-- 下级目录，使用快捷键./-->
    <img src="./images/dog.gif" alt="">
    <!-- 上级目录，使用快捷键../ -->
    <img src="../04-作业/01-综合案例（必做）/01-（案例）综合案例1-招聘案例/images/map.jpg" alt="">

2.3.3音频标签

场景：在页面中插入音频

代码：<audio src=" " controls></audio>

常见属性：src 音频的路径、 controls显示播放的控件、 autoplay自动播放（部分浏览器不支持）、loop循环播放

注意点：目前支持的三种格式：MP3、wav、ogg

2.3.4视频标签

场景：在页面中插入视频

代码：<video src="./video.mp4" controls></video>

属性同音频标签视频标签,目前只支持三种格式：MP4、Webm、Ogg

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

2.4链接标签

场景：点击之后，从一个页面跳到另一个页面

称呼：a标签、超链接、锚链接

代码：<a href="./目标网页.html">超链接</a>.

特点：双标签，内部可以包裹内容,如果需要a标签点击之后去指定页面，需要设置a标签的href属性

属性名 herf的属性值为点击之后跳转去哪一个网页（目标网页的路径）

属性名 target的属性值是目标网页的打开形式，取值为_self是默认值，在当前窗口中跳转（覆盖原

网页）；取值为_blank是在新窗口跳转（保留原网页）

显示特点：

a标签默认文字有下划线

a标签从未点击过，默认文字显示蓝色

a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

空链接

代码：<a href="#">空连接</a>

点击之后回到网页顶部，开发中不确定该链接最终跳转位置，用空链接占个位置

三、综合案例

3.1招聘案例-效果图

   <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
    <h2>岗位要求</h2>
    <p>
        5年以上前端开发经验，精通html5/css3/javascript等web开发技术；<br>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；<br>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；<br>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；<br>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；<br>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。
    </p>
    <h2>工作地址</h2>
    <p>上海市-徐汇区-腾云大厦</p>
    <img src="./images/map.jpg" alt="">

3.2今日热词案例-效果图