HTML认知

一、基础认知

• 网页组成
• 五大浏览器
• web标准

2.1.1HTML概念

➢HTML (Hyper Text Markup Language) 中文译为:超文本标记语言

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

2.2.1HTML页面固定结构

html标签:网页的整体

head标签:网页的头部

body标签:网页的身体

title 标签:网页的标题

vscode  输入!出现默认架构

3.1.1  注释 

3.2.1HTML标签的结构

➢标签的结构图: .

文字要变粗

➢结构说明:

1. 标签由<、>、 /、英文单词或字母组成。并且把标签中< >包括起来的英文单词或字母称为标签名

2.常见标签由两部分组成， 我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容

3.少数标签由一 部分组成，我们称之为:单标签。自成一体,无法包裹内容。

 

 

二、HTML标签学习

1.1.1标题标签

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

➢代码: h系列标签

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

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

➢特点:

• 文字都有加粗
• 文字都有变大，并且从h1→h6文字逐渐减小
• 独占一行

1.2.1段落标签

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

➢代码:

我是一段文字

➢语义:段落

➢特点:

段落之间存在间隙

独占-一行

1.3.1换行标签  

➢场景: 让文字强制换行显示

➢代码:

➢语义:换行

➢特点:

单标签

让文字强制换行

1.4.1水平线标签

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

➢代码:

---

➢语义: 主题的分割转换

➢特点:

单标签

在页面中显示一条水平线

2.1文本格式化标签的介绍

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

➢代码:

标签  说明        标签  说明

b       加粗.         strong  加粗

u    下划线         ins    下划线

I      倾斜            em      倾斜

s     删除线         del    删除线

➢语义: 突出重要性的强调语境

3.1.1图片标签的介绍

➢场景:在网页中显示图片

➢代码:

➢特点:单标签

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

➢属性注意点: .

1. 标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

➢属性名: alt

➢属性值:替换文本

• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本

3.1.4图片标签的title属性

➢属性名: title

➢属性值:提示文本

当鼠标悬停时，才显示的文本

➢注意点: title属性不仅仅可以用于图片标签，还可以用于其他标签

3.1.5图片标签的width和height属性

➢属性名: width和height

➢属性值:宽度和高度(数字)

➢注意点:

如果只设置width或height中的一个，另-个没设置的会自动等比例缩放(此时图片不会变形)

如果同时设置了width和height两个,若设置不当此时图片可能会变形

3.3.1音频标签的介绍

➢场景: 在页面中插入音频

➢代码:

➢常见属性:

属性名          功能

src              音频的路径口

controls    显示播放的控件

autoplay   自动播放(部分浏览器不支持)

loop          循环播放

➢注意点:

3.4.1视频标签的介绍

➢场景: 在页面中插入视频

➢代码:

➢常见属性:

属性名   功能

SrC           视频的路径

controls  显示播放的控件

autoplay 自动播放(谷歌浏览器中需配合muted实现静音播放)

loop         循环播放

➢注意点:视频标签目前支持三种格式: MP4 .WebM、Ogg

4.1链接标签的介绍

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

➢称呼: a标签、 超链接、锚链接

➢代码: 超链接

➢特点:

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

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

4.4链接标签的target属性

➢属性名:target

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

取值     效果

_ self    默认值,在当前窗口中跳转(覆盖原网页)

_blank  在新窗口中跳转(保留原网页)