HTML/CSS/JS学习笔记 Day2（HTML--网页标签上）

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day2 内容梳理：

HTML 2.网页标签

2.1 基础标签的含义

文档类型声明标签

语种标签

字符集

2.2 语义标签

标题标签

段落标签

换行标签

文本格式化标签

无语义标签

图像标签 & 路径

（1）src属性

（2）其他属性：alt/title/width/height/border

（3）图像标签注意要点：

HTML 2.网页标签

2.1 基础标签的含义

在VS Code中新建文件并将后缀改为.html后，在一行打一个英文的感叹号再点击Tab，得到系统默认的网页骨架，如下：

接下来将逐行解释每个标签的作用。

文档类型声明标签<!DOCTYPE>

作用是告诉浏览器该使用哪种HTML版本来显示网页

比如：<!DOCTYPE html>指当前页面采取的是HTML5版本来显示网页

注意：

必须写在整个页面的第一行。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

语种标签<html lang=” ”>

比如<html lang=”en”>，用途是将当前文档显示的语言定义为英语，

分两类：”en”代表英文网页，”zh-CN”代表中文网页。

不过无论写的是en还是zh-CN，我们都可以在html代码中写各种语言。lang这个属性的作用是帮助浏览器和搜索引擎更好地分辨网页语言，并让用户决定是否翻译网站语言，如下：

字符集<meta charset=” ”>

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

在head标签内，可通过<meta charset=“”>来规定HTML文档应该采用哪种字符编码。

Charset常用的值由UTF-8、G8K、BIG5、GB2312。其中UTF-8也被称为“万国码”，基本包含了全世界所有国家需要用到的字符。

注意只能写成UTF-8，其他格式（比如utf8、UTF8）都可能引起乱码。

2.2 语义标签

语义标签分为：标题标签、段落标签、换行标签

不采用语义标签就会导致所有内容都是同样的格式，不利于阅读，如下图：

标题标签 <h1>到<h6>

HTML提供了6个等级的网页标题，从<h1>到<h6>，按照重要性递减。

它们都是双标签的，比如：

<h1>这里是一级标题</h1>

补充一下，修改后记得先保存，再右键单击，点击”open in default browser”即可看到效果：

左侧是没使用标题标签的情况，右侧是使用了之后：

<h1>到<h6>的标题字体会逐渐变小变细，区别可参考下图（内容截取自笔记最上方的视频）：

其中h2标题的“文字加粗一行显”指的是只有被囊括在双标签内的文字才算是标题。比如：

<h2>这是一个标题</h2>123

这行代码只会显示“这是一个标题”，而不显示“123”。

段落标签<p></p>

双标签<p></p>用于定义段落，比如：

特点：文本在段落中会根据浏览器窗口的大小自动换行；段落和段落之间有明显空隙。

换行标签<br />

一般在HTML中，段落中的文字遇到浏览器窗口的边缘时才会自动换行，如果希望某段文本强制换行，则需要使用单标签<br/>。br是单词break（打断）的缩写。比如：

补充：可通过文本间隔来区分段落标签和换行标签。段落标签会使段落之间有较大缝隙，而换行标签则不会。

文本格式化标签

是文字以特殊效果呈现，有粗体、斜体、下划线等等。

语义	标签	更推荐的标签（因为语义更强烈）
加粗	<strong></strong>或者<b></b>	<strong>双标签
倾斜	<em></em>或者<i></i>	<em>双标签
删除线	<del></del>或者<s></s>	<del>双标签
下划线	<ins></ins>或者<u></u>	<ins>双标签

使用效果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是正常文字。<br />这是<strong>加粗</strong>的文字。<br />这是<em>倾斜</em>的文字。<br />这是<del>带删除线</del>的文字。<br />这是<ins>带下划线</ins>的文字。<br />
</body>
</html>

无语义标签 <div>、<span>

<div>和<span>无语义，它们的作用像是盒子，用来装内容。

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

特点：

<div>双标签用于布局，但是一对<div>会独占一整行，所以可以理解为大盒子。
<span>双标签也用于布局，而一对对<span>可以显示在同一行，可以理解为小盒子

举个例子：

图像标签 & 路径

（1）src属性

<img>是一个单标签，用于定义HTML页面中的图像。

使用格式：

<img src=”图像URL” />

其中src是<img>图像标签的特性，要填入的“图像URL”负责帮网页找到对应图像的文件路径和文件名。

比如我要下图文件夹中的HTML.png显示在网页中，在“图像URL”处就要写HTML.png。

代码和结果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是一个图像<br /><img src="HTML.png" />
</body>
</html>

若图片展示不成功，很可能是该图片和该代码不在同一文件夹下。

（2）其他属性：alt/title/width/height/border

属性	属性值	说明
src	图片路径	必要属性
alt	文本	替换文本。是在图像显示不出来的时候用文字替换。
title	文本	提示文本
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细