跟着该视频学习,记录笔记:【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day2 内容梳理:
目录
HTML
2.0 网页开发的标签
2.1 基础标签的含义
文档类型声明标签
语种标签
字符集
2.2 语义标签
标题标签:
段落标签
换行标签
文本格式化标签
无语义标签
图像标签 & 路径
(1)src属性
(2)其他属性:alt/title/width/height/border
(3)图像标签注意要点:
HTML
2.0 网页开发的标签
在VS Code中新建文件并将后缀改为.html后,在一行打一个英文的感叹号再点击Tab,得到系统默认的网页骨架,如下:
接下来将逐行解释每个标签的作用。
2.1 基础标签的含义
文档类型声明标签<!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 | 像素 | 设置图像的边框粗细 |
alt,替换文本,例子:
(名为AAAA的图片不存在,因此会显示替换文字)
title,鼠标悬停在图片上时会显示的文字,例子:
width、height:单独使用时,是等比缩放图片的大小。若同时规定两者的数值,则是压扁或拉长图片。实际应用时往往只修改width或heigh。
border,规定边框的粗细,给图片加边框,例子:
图片多了一个15像素宽的黑色边框:
(3)图像标签注意要点:
- 图像标签可以有多个属性,但都必须写在src=”图像URL”的后面。
- 除了src以外的属性之间不分先后顺序,src与其他属性之间、其他属性之间均以空格相互隔开。
- 属性采用键值对的格式,即key=”value”(属性=“属性值”)。
- src这个属性是必须要写的,其他属性按需求加即可。