前端学习第一天--标签

标签语法

1. 标签成对出现,中间包裹内容

2. <>里面放英文字母(标签名)

3. 结束标签比开始标签多/

4. 拓展

   ◆ 双标签:成对出现的标签
   ◆ 单标签:只有开始标签,没有结束标签

HTML 基本骨架

HTML基本骨架是 网页模板。

◆ html:整个网页
◆head:网页头部,存放给浏览器看的代码,例如CSS

◆ body:网页主体,存放给用户看的代码,例如 图片、文字，文字太长时可以Alt+Z进行折叠
◆ title:网页标题

快捷生成方式：！+ 回车

标签的关系

作用：明确代码的书写位置

1. 父子关系（嵌套关系）
2. 兄弟关系（并列关系）

注：标签间有默认间隙

如破坏可用：Tab向后缩，shift+Tab向前缩

注释

快捷键：Ctrl+/

标题标签

标签名:h1~h6(双标签)

显示特点:

· 文字加粗

· 字号逐渐减小

· 独占一行(换行)

注：一般h1只用一次，其余没有限制

段落标签

一般用于新闻段落，文章段落，产品描述信息等

标签名: p + 回车(双标签)

显示特点:

· 独占一行

· 段落之间存在间隙

换行与水平线标签

● 换行 :< br>(单标签)

● 水平线 :< hr>(单标签)

文本格式化标签

作用：为文本添加特殊格式，以突出重点。

常见文本格式

标签名	效果
strong/b	加粗
em/i	斜体
ins/u	下划线
del/s	删除线

图像标签

作用：在网页中插入图片

<img src="图片的URL">

Src用于指定图像的位置和名称,是的必须属性。

以./开头 VS Code有提示功能

常见属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字 以防图片未刷新
width	提示文本	鼠标悬停在图片上面的时候显示的文字
title	图片的宽度	值为数字,没有单位
height	图片的高度	值为数字,没有单位

<img src="/cat.jpg"alt="替换文本"title="提示文本">

· 属性名="属性值”

· 属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序

路径

路径指的是查找文件时,从起点到终点经历的路线。

路径分类:

· 相对路径:从当前文件位置出发查找目标文件

. 当前文件所在文件夹

… 当前文件上一级文件夹

/ 进入某个文件夹里面

· 绝对路径:从盘符出发查找目标文件 符号就用 （ / ）

Windows 电脑从盘符出发

Mac电脑从根目录出发

也可以直接复制图片地址

超链接

符号：a + 回车

<a href="网址">注解</a>

1. href属性值是跳转地址，是超链接的必须属性

2. 作用：单击跳转到其他页面

3. 开发初期,不确定跳转地址,如何书写href属性值?

   # 空链接

4. **target=“_blank”**属性的作用是什么?
   在新窗口打开页面

音频标签

常见属性

属性	作用	特殊说明
src(必须属性)	音频 URL	支持格式:MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验,浏览器一般会禁用自动播放功能

视频标签

常见属性

属性	作用	特殊说明
src(必须属性)	视频 URL	支持格式:MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验,浏览器支持在静音状态自动播放