html5(一)

标签语法

<strong>需要加粗的文字</strong>

• 标签成对出现，中间包裹内容
• <>里面放英文字母（标签名）
• 结束标签比开始标签多/
• 扩展
  - 双标签：成对出现的标签
  - 单标签：只有开始标签，没有结束标签<br>:换行 <hr>水平线

HTML基本骨架

HTML基本骨架是网页模版

• html：整个网页
• head:网页头部，存放给浏览器看的代码，例如CSS
• body:网页主体，存放给用户看的代码，例如图片，文字
• title:网页标题
  VS Code快速生成骨架：
  在HTML文件(.html)中，!（英文）配合Enter/Tab键

标签的关系

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

• 父子关系（嵌套关系）
• 兄弟关系（并列关系）
  向后缩进：Tab
  向前缩进：Shift + Tab

注释

注释就是对代码的解释和说明，能提高程序代码的可读性。方便理解，方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码进行研究。

<!--...-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示。

在VS Code中，添加/删除注释的快捷键：ctrl+ /

标题标签

标签名：h1 - h6 （双标签）
显示特点：

• 文字加粗
• 字号逐渐减小
• 独占一行（换行）
  一般用在新闻标题，文字标题，网页区域名称，产品名称等等。
  经验分享：
• h1 标签在一个网页中只能用一次，用来放新闻标题和网页的logo
• h2 ~ h6没有使用次数的限制

段落标签

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

标签名：p （双标签）

显示特点：

• 独占一行
• 段落之间存在间隙

换行与水平线标签

• 换行：<br>（单标签）
• 水平线：<hr>（单标签）

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线等。

图像标签-基本使用

作用：在网页中插入图片

<img src="图片的URL">

src用于指定图像的位置和名称，是的必须属性。
以./开头，VS Code有提示功能

图像标签-属性

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

• 属性名=" 属性值"
• 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

路径指的是查找文件时，从起点到终点经历的路线
路径的分类:

• 相对路径：从当前文件位置出发查找目标文件
• 绝对路径：从盘符出发查找目标文件windows电脑从盘符出发 Mac电脑从根目录出发

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

• /表示进入某个文件夹里面文件夹名字/
• .表示当前文件所在文件夹./
• …表示当前文件的上一级文件夹../

绝对路径-从盘符出发查找目标文件

• Windows电脑从盘符出发
• Mac电脑从根目录(/)出发

<img src="C:\images\mao.jpg">

• Windows默认是\，其它系统是/，建议统一写为/
• 文件的在线网址：https://www.qianduange.cn/upload/article/logo.png
• 绝对路径的应用场景：友情链接

超链接

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加target="_blank"实现新窗口打开页面。
扩张：开发初期，不确定跳转地址，则href属性值写为#，表示空链接，页面不会跳转，在当前页面刷新一次。

音频标签

<audio src="音频的URL"></audio>

常见属性

视频标签

<video src="视频的URL"></video>

常见属性