-
【前端】HTML认知
一、基础认知
1.1基础概念铺垫（了解）
1.1.1认识网页（了解）
问题1：网页由哪些部分组成？
- 文字、图片、音频、视频、超链接
问题2：我们看到的网页背后本质是什么？
- 前端程序员写的代码
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
- 通过浏览器（解析和渲染）成用户看到的网页
1.1.2小结
网页由哪些部分组成？
- 文字、图片、音频、视频、超链接
咱们程序员写的代码是通过什么软件转换成网页的？
- 浏览器
1.2.1五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
- IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
浏览器市场份额
- Google Number One！
1.2.2渲染引擎（了解）
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 FireFox Gecko 火狐浏览器内核 Safari WebKit 苹果浏览器内核 Chrome/Opera Blink Blink其实是Webkit的分支 注意点：
渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
1.2.3小结
五大浏览器有哪些？
- IE，火狐，Google，Safari，欧朋
相同的网页在不同的浏览器中显示效果会完全一致吗？
- 因为不同浏览器渲染引擎不同，解析的效果会存在差异
前端工程师日常推荐使用哪一个浏览器？
- 谷歌浏览器（Chrome）
1.3.1为什么需要Web标准？（了解）
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
- 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
Web标准：让不同的浏览器按照相同的标准显示结果，让显示的效果统一！
1.3.2Web标准的构成
Web标准中分成三个构成：
构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等） 行为 JavaScript 网页模型的定义与页面交互 1.3.3Web标准的记忆方法
Web标准要求页面实现：结构、表现、行为三层分离
结构：HTML（决定了身体）
表现：CSS（决定了样式美观）
行为：JavaScript（决定了交互的动态效果）
1.3.4小结
Web标准构成有哪些？分别通过什么语言表示？
- 结构：HTML→页面元素
- 表现：CSS→页面样式
- 行为：JavaScript→页面交互的动态效果
2.1HTML初体验
2.1.1HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
- 专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述
案例：文字变粗案例
- 体验构建一个网页，需要在网页中显示一个加粗的文字
2.1.2网页体验-构建基本网页的步骤
<strong>Hello Worldstrong>- 1
2.2.1HTML网页固定架构
网页类似于一篇文章：
- 每一页文章内容是有固定的结构的，如：开头，正文，落款等…
- 网页中也是存在固定的结构的，如：整体，头部，标题，主题
网页中的固定结构是要通过特点的HTML标签进行描述的
<html> <head> <title>网页的标题title> head> <body> 网页的主体内容 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.2.2小结
HTML骨架结构由哪些标签组成？
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
2.3.1开发工具有哪些？
Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
3.1语法规范
3.1.1什么是注释？
在之前上课学习时，同学们会在书本段落间记录内容的注释，方便下次看到此处理解
- 问题：同学们在书本段落间记录下的注解是为了给谁看的？
- 下次的阅读课本者（自己）
程序员在写代码时也会添加注释，方便下次看到此处时方便想起功能和含义
- 问题：程序员在代码中添加的注释，是为了给谁看的？
- 下次的阅读代码者（自己或者其他程序员）
3.1.2注释的作用和写法
注释的作用：
- 为代码添加的具有解析性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
注释的快捷键：
- 在VS Code中：Ctrl+/
3.2.1HTML标签的结构
标签的结构图：
<strong>文字要变粗strong>- 1
结构说明：
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
<br>换行（单标签）是line break（换行）的缩写 <hr>水平分割线（单标签）是horize的缩写，意思是水平分割线- 1
- 2
3.3.1HTML标签与标签之间的关系可分为
父子关系（嵌套关系）
<head> <title>title> head>- 1
- 2
- 3
兄弟关系（并列关系）
<head> head> <body> body>- 1
- 2
- 3
- 4
二、HTML标签学习
1.1排版标签
1.1.1标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签
<h1>1级标题h1> <h2>2级标题h2> <h3>3级标题h3> <h4>4级标题h4> <h5>5级标题h5> <h6>6级标题h6>- 1
- 2
- 3
- 4
- 5
- 6
语义：1~6级标题，重要程度依次递减
特点：
- 文字都有加粗
- 文字都有变大，并且从h1→h6文字逐渐减小
- 独占一行
1.1.2小结
标题标签一共有几个？分别代表什么含义？
-
h1标签：一级标题
-
h2标签：二级标题
-
h3标签：三级标题
-
h4标签：四级标题
-
h5标签：五级标题
-
h6标签：六级标题
标题标签有哪些特点？
- 文字都有加粗
- 文字都有变大，但是从h1→h6文字逐渐减小
- 独占一行
1.2.1段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：
我是一段文字
语义：段落
特点：
- 段落之间存在间隙
- 独占一行
1.2.2小结
段落标签的标签名是？
- p标签
段落标签有哪些特点？
- 段落之间存在间隙
- 独占一行
1.3.1 换行标签
场景：让文字强制换行显示
代码：
语义：换行
特点：
- 单标签
- 让文字强制换行
1.4.1水平线标签
场景：分割不同主题内容的水平线
代码：
语义：主题的分割转换
特点：
- 单标签
- 在页面中显示一条水平线
2.1文本格式化标签
2.1.1文本格式化标签的介绍
场景：需要让文字加粗，下划线，斜体，
删除线等效果代码：
标签 说明 b 加粗 u 下划线 i 倾斜 s 删除线 标签 说明 strong 加粗 ins 下划线 em 倾斜 del 删除线 语义：突出重要性的强调语境
3.1媒体标签
3.1.1图片标签的介绍
场景：在网页中显示图片
代码：
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置！
标签的完整结构图：
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
3.1.2图片标签的src属性
属性名：src
属性值：目标图片的路径
注意点：
- 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 路径的情况有很多，稍后会详细介绍
3.1.3图片标签的alt属性
属性名：alt
属性值：替换文本
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
3.1.4图片标签的title属性
属性名：title
属性值：提示文本
- 当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
3.1.5图片标签的width和height的属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.2.1路径的介绍
场景：页面需要加载图片，需要先找到对应的图片
类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！
同理：页面需要找到图片，也是需要通过路径才能找到
路径可分为：
- 绝对路径（了解）
- 相对路径（常用）
3.2.2绝对路径（了解）
绝对路径：指目录下的绝对位置，可直接到达目标位置，常用从盘符开始的路径
例如：
- 盘符开头：D:\day01\images\1.jpg
- 完整的网络地址：
https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png
3.2.3相对路径（常用）
概念普及：
- 当前文件：当前的html网页
- 目标文件：要找到的图片
相对路径：从当前文件开始出发找到目标文件的过程
相对路径分类：
- 同级目录
- 下级目录
- 上级目录
3.2.4相对路径-同级目录
同级目录：当前文件和目标文件在同一个目录中
类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
- 生活中：两个独处一室，我想找你，直接喊名字即可！
代码步骤：直接写目标文件的名字即可
-
方法一：
-
方法二：
3.2.5相对路径-下级目录
下级目录：目标文件在下级目录中
类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
- 先知道你去了哪一个房间→房间名：卧室
- 进入这个房间→进入
- 此时又独处一室→直接喊你名字
代码步骤：
- 先知道在哪个文件夹里面→文件夹名字
- 进入这个文件夹→/
- 此时看到目标文件直接喊它→直接写目标文件名字
3.2.6相对路径-上级目录
上级目录：目标文件在上级目录中
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你
- 先要出卧室，来到大厅→出去
- 此时又独处一室→直接喊你名字
代码步骤：
- 先出当前文件夹，到上一级目录→…/
- 此时看到目标文件直接喊她→直接写目标文件
3.3.1音频标签的介绍
场景：在页面中插入音频
代码：
常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放（部分浏览器不支持） loop 循环播放 注意点：
- 音频标签目前支持三种格式：MP3，wav，ogg
3.3.2小结
要在网页中插入音频使用什么标签？
audio音频标签有哪些常见的属性？
src，controls，autoplay，loop
3.4.1视频标签的介绍
场景：在页面中插入视频
代码：
常见属性：
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放（部分浏览器不支持） loop 循环播放 注意点：
- 视频标签目前支持三种格式：MP4，WebM，Ogg
3.4.2小结
要在网页中插入视频使用什么标签？
- video标签
视频标签有哪些常见属性？
- src，controls，autoplay，loop
3.5.1链接标签的介绍
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签，超链接，锚链接
代码：
超链接特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后
3.5.2链接标签的target属性
属性名：target
属性值：目标网页的打开形式
取值 效果 _self 默认值，在当前窗口中跳转（覆盖原网页） _blank 在新窗口中跳转（保留原网页） -
相关阅读:
Map和Set的区别
智能井盖生产商家，万宾科技井盖传感器产品详情
kafka 消费者 API 使用总结
代码随想录三刷day37
运行时数据区之虚拟机栈
自然语言处理基础——词表示
网络体系结构
springboot：自定义过滤器Filter使用详解
【网络编程】从零开始搭建一个开源博客网站（云服务器+宝塔+WordPress）
基于JavaSwing开发学生管理系统（登录增删改查）+论文报告 课程设计 大作业
- 原文地址：https://blog.csdn.net/qq_39757593/article/details/128088503