一.标签语法
1.对于专有名词的解释：
HTML定义：HTML超文本标记语言——Hyper Text Markup Language
超文本：链接
标记：标记也叫标签，是带尖括号的文本内容
2.标签语法
（1）.标签成对出现，中间包裹内容
（2）.尖括号中放英文字母（标签名）
（3）.结束标签比开始标签多一个/
<strong>要强调的文本内容</strong>（4）.标签又分为单标签（只有开始标签，没有结束标签），和双标签（成对出现的标签）
二.HTML基本骨架
HTML基本骨架是网页模板
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>html：整个网页
head：网页头部
body：网页主体，存放给用户看的代码
title：网页标题
注意：在VS Code中快速生成骨架的方法：在HTML文件中输入!（英文模式的感叹号）配合Enter/Tab键
三.标签的关系
作用：明确代码的书写位置
1.父子关系（嵌套关系）：如在head标签内部的title标签
2.兄弟关系（并列关系）：如head标签和body标签的关系
注意：缩进一共有两种方式，向前缩进：Shift+Tab和向后缩进Tab
四.注释
1.含义：注释就是对代码的解释和说明，目的是让人们能够更加轻松地了解代码，注释是编写程序时，写程序的人给一个语句，程序段，函数等的解释或提示，能提高代码的可读性
2.作用：在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如方便理解，方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己的代码进行修改
3.语法：<!--注释内容-->，注释标签用来在源文档中插入注释，注释不会在浏览器中显示
4.在VS Code中添加和删除注释的快捷键为Ctrl+/
五.标题标签
1.作用：一般用在新闻标题，文章标题，网页区域名称，产品名称等等
标签名：h1-h6（使用双标签的形式）
2.显示特点：
（1）.文字加粗
（2）.字号逐渐减小
（3）.独占一行（换行）
注意：h1标签一般在一个网页中只能用一次，用来放新闻标题或网页的logo，而h2-h6标签就没有使用次数的限制
六.段落标签
1.作用：一般用在新闻段落，文章段落，产品信息描述等等
标签名：p（使用双标签的形式）
2.显示特点：
（1）.独占一行
（2）.段落之间存在间隙
七.换行与水平线标签
1.换行：<br>（单标签）
2.水平线：<hr>（单标签）
为什么要使用这两种换行方式呢？
因为在浏览器中并不能识别代码中的Enter键换行，所以我们需要借助这两个标签完成换行操作
八.文本格式化标签
1.作用：为文本添加特殊格式，以突出重点，常见的文本格式：加粗，倾斜，下划线，删除线等
2.分类：
（1）.
<strong>加粗</strong>（2）.
<em>倾斜</em>（3）.
<ins>下划线</ins>（4）.
<del>删除线</del>注意：以上的标签自带强调含义
九.图像标签的基本使用
1.作用：在网页中插入图片
2.语法：
<img src="图片的URL">src用于指定图像的位置和名称，是img标签的必须属性
3.属性：
（1）.alt
作用：替换文本
说明：在图片无法显示时显示的文字
（2）.title
作用：提示文本
说明：鼠标悬停在图片上面时显示的文字
（3）.width
作用：图片的宽度
说明：值为数字，没有单位
（4）.height
作用：图片的高度
说明：值为数字，没有单位
<img src="图片地址" alt="替换文本" title="标签" width="宽度" height="高度">注意：
组成一个属性的元素为：属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
十.路径
1.路径指的是查找文件时从起点到终点经历的路线
2.路径分类：
（1）.相对路径：从当前文件位置出发查找目标文件
文件夹名字/：表示进入某个文件夹里
./：表示当前文件所在文件夹
（2）.绝对路径：从盘符出发查找目标文件
十一.超链接
1.作用：点击跳转到其他页面
<a href="要跳转的页面地址"></a>href是要跳转的页面地址，是超链接中必要的属性
<a href="要跳转的地址" target="_blank"></a>加上target="_blank"属性之后就会打开一个新窗口，而不是从原来的旧窗口中打开页面
注意：在开发初期不确定跳转地址时可以使用空连接的方式书写href属性值
十二.音频标签
<audio src="音频的URL"></audio>1.属性
（1）.src：
作用：音频URL
说明：支持格式：MP3，Ogg，Wav
（2）.controls：
作用：显示音频控制面板
（3）.loop：
作用：循环播放
（4）.autoplay
作用：自动播放
扫一扫
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
