Web前端学习笔记01 —— 初识 HTML

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

5、Web 标准提出的最佳体验方式：结构、样式行为相分离。简单理解就是，结构写到HTML文件中，表现写在CSS文件中，行为写到Javascript文件中。结构类似身体，表现类似外观装饰，行为类似行为动作。相比较而言，三者中结构最为重要。

四、HTML标签及语法规范

4.1 HTML 标签的结构

1、HTML标签是由尖括号包围的关键词，由 <、>、/ 、英文单词或字母组成，并且把标签中 <> 包括起来的英文单词或字母称为标签名。

2、HTML标签通常是成对出现的，称之为：双标签。前半部分称为开始标签，后半部分称为结束标签，两部分直接包裹内容。如：加粗标签<strong></strong>

3、少部分标签由一部分组成，称之为：单标签。自成一体，无法包裹内容。如：换行标签<br> 、水平分布线<hr>

4.2 标签关系

双标签关系可以分为两类：嵌套 (包含) 关系和并列关系。

#嵌套关系（父子关系）
<head>
    <title></title>
</head>

#并列关系（兄弟关系）
<head></head>
<body></body>

4.3 语法规范 (注释）

1、注释的作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码。

2、浏览器执行代码时会忽略所有的注释。

3、快捷键：在VScode中，Ctrl + / （要取消注释过的语句的注释，再操作一次 Ctrl+/ 即可）

五、开发工具以及部分快捷方式

5.1 工具

Visual Studio Code（速度快、体积小、插件多）

5.2 VScode工具生成骨架标签新增代码

<!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>标题</title>
</head>
<body>
    内容
</body>
</html>

1、<!DOCTYPE>标签文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

注：<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前；

<!DOCTYPE>不是一个HTML标签，而是文档类型声明标签。

2、lang语言种类用来定义当前文档显示的语言。

<html lang = "en"> en定义语言为英文，zh-CN定义语言为中文；

简单来说，定义为en就是英文页面，zh-CN则为中文页面。对于文档显示来说，定义为en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

3、字符集（Character set) <meta charset = ''UTF-8''>

字符集是多个字符的集合，以便于计算机能够识别和存储各种文字。

charset常用的值有：GB2313,BIG5,GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注：上面所提到的语法是必须要有的代码，否则可能会引起乱码的情况。一般情况下，统一使用“UFT-8”编码。

5.3 部分快捷方式

新建文件：Ctrl + N

保存：Ctrl +S （注意后缀为.html）

自动生成HTML骨架：! + Enter键 / Tab键

Open In Default Browser 默认在浏览器中打开：Alt + B

自动换行：Alt + Z

六、HTML常用标签。

6.1 标签语义

根据标签语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

6.2 标题标签 <h1> - <h6>

为了使网页更具语义化，经常会在网页中使用标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6>。（双标签）

语义：1-6级标题，重要程度依次递减，文字都有加粗变大，并且从h1->h6文字逐渐减小。

特点：独占一行。

6.3 段落标签、换行标签和水平线标签

·段落标签 <p></p>

可以把HTML文档分为若干段落。文本在一个段落中会根据浏览器的大小自动换行。

`换行标签 <br>

让文本强制换行显示。<br> 标签只是简单地开始新的一行，与段落不同，段落之间会插入一些垂直的间距。

`水平线标签 <hr> 分割不同主题内容的水平线，在页面中显示一条水平线。

6.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体和下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。（语义：突出重要性，比普通文字重要）

语义	标签	说明
加粗	<strong></strong> 或 <b></b>	更推荐使用 <strong> 标签加粗，语义更强烈
倾斜	<em></em> 或 <i></i>	更推荐使用 <em> 标签加粗，语义更强烈
删除线	<del></del> 或 <s></s>	更推荐使用 <del> 标签加粗，语义更强烈
下划线	<ins></ins> 或 <u></u>	更推荐使用 <ins> 标签加粗，语义更强烈

6.5 <div> 和 <span> 标签

<div> 和 <span> 是没有语义的，它们就相当于一个盒子，用来装内容的。

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：1、<div> 标签用来布局，但一行只能放一个 <div>。(大盒子) 独占一行

2、<span> 标签用来布局，一行上可以有多个 <span>。(小盒子)

6.6 图像标签与路径（重点）

1、图像标签 <img>

在HTML标签中，<img>标签用于定义HTML页面中的图像标签属性进行设置。img标签展示对应的效果，需要借助标签的性质进行设置。

<img src = " " alt = " " title = " " width = " " height = " ">

`src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示时的文字
title	文本	提示文本。鼠标悬停在图像上所显示的文字
width	像素	设置图片的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注：（1）图片标签的alt属性：当图片加载失败时，才会显示 alt 的文本。

（2）title属性不仅仅可以用于图片标签，还可以用于其他标签。

（3）如果只设置 width 和 height 中的一个，另一个没设置的会自动等比例缩放。但如果同时设置了 width 和 height 属性，设置不当可能会导致图片变形。

（4）图像标签可以拥有多个属性，必须写在标签名的后面。

（5）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格隔开。

（6）属性采用键值对的格式，即 key = '' value '' 的格式，属性 = ''属性值''。

2、路径

目录文件夹：就是普通文件夹，里面存放我们做网页所需要的相关素材，比如html文件、图片等。

（2）相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础而建立出目录路径。这里简单说就是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同级目录		图像文件位于HTML文件同一级，如 <img src = "baidu.gif" >
下级目录	./	图像文件位于HTML文件下一级，如 <img src = "images./baidu.gif" >
上级目录	../	图像文件位于HTML文件上一级，如 <img src = "../baidu.gif" >

绝对路径：是指目录下的绝对位置直接到达目标位置，通常是从盘符开始的。(盘符、网络地址等)

6.7 超链接标签（重点）

<a></a>，称呼：a链接、超链接、锚链接。

在HTML中，<a>标签用于定义超链接，作用是从一个页面链接(跳转)到另一个页面。

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

（1）链接标签的 href 属性。( href 作用：跳转地址）

当开发网站初期，在我们不知道跳转地址的时候，href 的值书写为：#（空链接）。

（2）链接标签的 target 属性。（目标网页的打开形式）

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

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

（3）锚点链接：当我们点击链接时，可以快速定位到页面中的某个位置。

`在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href = "#two">第2集</a>；

`找到目标位置标签，在里面添加一个 id 属性 = 刚才的名字，如<h3 id = "two">第2集介绍</h3>。

< a href = " #live " > 个人生活 </a>

< h3 id = '' live '' > 个人生活 < /h3 >

6.8 音频标签

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

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

6.9 视频标签

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

视频标签目前只支持三种格式：MP4、webM、Ogg。

m0_67570919

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习笔记01 —— 初识 HTML

一、网页的相关概念二、常见浏览器以及内核三、Web标准四、HTML标签及语法规范五、开发工具以及部分快捷方式5.1 工具 5.2 VScode工具生成骨架标签新增代码 5.3 部分快捷方式六、HTML常用标签。6.1 标签语义 6.2 标题标签 6.3 段落标签、换行标签和水平线标签 6.4 文本格式化 6.5和标签 6.6 图像标签与路径 6.7 超链接标签 6.8 音频标签 6.9 视频标签
复制链接

扫一扫