HTML初识

关注

原创 2022-10-24 17:33:10 366 阅读 AI 写同款· GEO 优化 ›

前端页面设计博客系统博客列表页：显示了当前系统中都有哪些发布出来的博客列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮博客详情页：显示了当前博客，详细正文登录页面：包含了一个登录框，输入用户名，密码，登录按钮博客登录页：登录博客的界面博客编辑页：点击 “写博客" 进入的页面开发一个页面，不是在脑子里，凭空就搞出来的而是要先设计好，然后再对照着这个设计稿来进行开发一般是产品经理，或者美工 (UED) 提供的如果没有个设计图，凭空去想，这个页面啥样，是特别不好做的 (既要实现代码，又要完成设计工作)设计稿阅读详情

HTML初识

Date: August 29, 2022
Summary: HTML标签排版、文本格式化标签、媒体标签、链接标签

◆ 能够理解HTML的基本语法和标签的关系
◆ 能够使用排版标签实现网页中标题、段落等效果
◆ 能够使用相对路径选择不同目录下的文件
◆ 能够使用媒体标签在网页中显示图片、播放音频和视频
◆ 能够使用链接标签实现页面跳转功能

基础认知

目标：认识网页组成和五大浏览器，明确 Web标准的构成，使用 HTML骨架搭建出一个网页。

学习路径：

基础概念铺垫（了解）
认识网页
五大浏览器和渲染引擎
Web标准
HTML初体验
语法规范

总结：

前端基础概念铺垫：
1. 网页的基本组成元素：文字、图片、音频、视频、超链接等
2. 五大浏览器 + Web标准
HTML初体验：
1. HTML：超文本标记语言
2. HTML骨架结构
3. VS Code的使用
语法规范：
1. HTML的注释
2. 标签的构成：双标签 / 单标签
3. 标签的属性：属性名=“属性值”
4. 标签的关系：父子 + 兄弟

➢ Web标准的构成有哪些？分别通过什么语言表示？
• 结构：HTML → 页面元素
• 表现：CSS → 页面样式
• 行为：JavaScript → 页面交互的动态效果

基础概念铺垫（了解）

认识网页（了解）

➢ 问题1：网页由哪些部分组成？

✓ 文字、图片、音频、视频、超链接

➢ 问题2：我们看到的网页背后本质是什么？

✓ 前端程序员写的代码

➢ 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？

✓ 通过浏览器转化（解析和渲染）成用户看到的网页

五大浏览器和渲染引擎

五大浏览器：

➢ 浏览器：是网页显示、运行的平台，是前端开发必备利器
➢ 常见的五大浏览器：

• IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

Untitled

渲染引擎：

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的：

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

注意点：

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）

Web标准

目标：认识网页组成和五大浏览器，明确 Web标准的构成，使用 HTML骨架搭建出一个网页。

1.3.1 为什么需要Web标准？（了解）

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

Web标准中分成三个构成：

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

Untitled

HTML感知

HTML的概念

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

专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

案例：文字变粗案例

体验构建一个网页，需要在网页中显示一个加粗的文字

网页体验-构建基本网页的步骤

在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
双击这个文件，输入代码等内容 → 记得保存！
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为**.html**
双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

Untitled

HTML页面固定结构

网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款等……

网页中也是存在固定的结构的，如：整体、头部、标题、主体

网页中的固定结构是要通过特点的 HTML标签 进行描述的

Untitled

HTML骨架结构由哪些标签组成？

• html标签：网页的整体

• head标签：网页的头部

• body标签：网页的身体

• title标签：网页的标题

语法规范：

HTML标签的结构

标签的结构图：

Untitled

结构说明：

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

总结：

常见标签由几部分组成？称之为？

两部分，双标签

少数标签由几部分组成？称之为？

一部分，单标签

双标签的属性需要写在开始标签还是结束标签中？

开始标签

HTML标签与标签之间的关系可分为

父子关系（嵌套关系）和兄弟关系（并列关系）

Untitled

VScode使用指南

为什么要使用 VS Code？

实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具

开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

前端开发神器：VS Code → 速度快、体积小、插件多

VS Code使用前要求：

open in browser 直接打开浏览器插件安装完毕

Untitled

VS Code创建网页的步骤

双击打开VS Code软件
将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
点击目录上的**+新建文件按钮**创建页面，注意：文件后缀名需要是.html

Untitled

VS Code的基本快捷键

快速生成标签：英文 + tab
保存文件：ctrl + s

注意1：写完文件之后务必需要保存文件，否则网页无变化
注意2：可以设置自动保存省去每次保存的麻烦

快速查看网页效果：右击 → Open in Default Browser

快捷键：alt + b
注意：必须安装了open in browser 插件

快速生成结构标签：! + tab

注意1：!必须是英文的，中文!无效
注意2：必须保证当前文件后缀名是.html，否则无效
VS Code自动生成的骨架多了其他标签，之后会介绍

Untitled

其他快捷键：

快速复制一整行：ctrl + c
快速粘贴一整行：ctrl + v
快速删除（剪切）一整行：ctrl + x

HTML标签学习

排版标签
1. 标题标签
2. 段落标签
3. 换行标签
4. 水平线标签
文本格式化标签
媒体标签
1. 图片标签
2. 路径
3. 音频标签
4. 视频标签
链接标签

排版标签

标题标签：

场景：显示文章主题

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

代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

特点：

文字都有加粗

文字都有变大，并且从h1 → h6文字逐渐减小

独占一行

注意点：

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

段落标签：

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

语义：段落

代码：

<p>我是一段文字</p>

特点：

段落之间存在间隙

独占一行

效果：

Untitled

换行标签：

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

代码：

<br></br>

语义：换行

特点：

单标签

让文字强制换行

水平线标签：

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

代码：

语义：主题的分割转换

特点：

单标签

在页面中显示一条水平线

文本格式化标签

文本格式化标签的介绍：

加粗、下划线、倾斜、删除线标签：

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

标签语义化：

什么是语义化标签：

能够直观表达内容的标签

比如、、

……

语义化标签好处：

对人：好理解，好记忆

对机器：有利于机器解析，对搜索引擎（SEO）有帮助

语义化标签推荐：

strong、ins、em、del，表示的强调语义更强烈！

媒体标签

图片标签

图片标签的介绍

场景：在网页中显示图片

代码：

<video src="movie.ogg" onerror="myFunction（）" controls>
	抱歉，加载视频失败
</video>
<!-- onerror执行某个方法，这里的方法可以自己定义-->

特点：

单标签

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

标签的完整结构图：

Untitled

属性注意点：

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

拓展：


注意点：

视频标签目前支持三种格式：**MP4** 、WebM 、Ogg

---

---

## 链接标签

**链接标签的介绍**

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

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

代码：

```html
<a href = “./目标网页.html”>超链接</a>

特点：

双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的href属性

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

案例：

外部链接：
	<a href="https://www.baidu.com/">跳转到百度</a>
内部链接：
	<a href="./01-标题标签.html">目标网页</a>

链接标签的显示特点（了解）

显示特点：

a标签默认文字有下划线

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

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

链接标签的target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

案例：

<a href = "https://www.baidu.com/" target="_blank">百度一下</a>

链接标签小结

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

链接标签：a标签

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

href属性

通过什么属性可以设置a标签的跳转方式？取值有哪些？

target属性

取值1：_self：在当前窗口中跳转

取值2：_blank：在新窗口中跳转

空链接（拓展补充）

代码：

<a href = “#”>空链接</a>

功能：

点击之后回到网页顶部

开发中不确定该链接最终跳转位置，用空链接占个位置

总结：

排版标签：
1. 标题h系列、段落p、换行br、水平线hr
文本格式化标签：

加粗strong、下划线ins、倾斜em、删除线del
图片标签：

img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
路径：

相对路径：同级目录 + 下级目录 + 上级目录
音频标签、视频标签：

audio标签、 video标签 + src属性 + controls属性
链接标签：

a标签 + href属性 + target属性

综合案例

案例：尝试
在这里插入图片描述

<!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>
    <h2>君不见黄河之水天上来</h2>
    <img src="C:\Users\Administrator\Desktop\前端开发\HTML+CSS\photo\libai.jpg" alt="libai">
</body>
</html>

招聘案例-文本资料

Untitled

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>
    <h1>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
    <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>

今日热词案例-效果图

Untitled

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>
    <h1>今日搜索热词</h1>
    <hr>
    <h2>1、阿卡贝拉</h2>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： <a href="./14-综合案例-跳转/one.html" target="_blank">阿卡贝拉《千与千寻》</a></p>
    
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： <a href="./14-综合案例-跳转/two.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
</body>
</html>