目录
HTML基本语法概述
基本语法概述：
- HTML标签是由尖括号包围的关键词
- HTML标签通常是成对出现的，为双标签，例：<p> </p>。
双标签：包含关系（父子）、并列关系（兄弟）
- 有些特殊的标签也会是单个标签，称为单标签，例：<br /> 。
HTML基本结构标签
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也叫HTML文档。
<!DOCTYPE html> <!--文档类型声明-->
<html lang="en"> <!--定义当前文档显示的语言-->
<head>
<meta charset="UTF-8"> <!--字符集 以便计算机能识别和存储各种文字-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档的标题</title>
</head>
<body>
文档的主体
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，称根标签 |
| <head></head> | 文档的头部 | 注意head中必须设置标签title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包括文档的所有内容，页面内容基本放在body里 |
HTML常用标签
标题标签
<h1> - <h6> 作为标题使用，依据重要性递减。
<hn> 内容 </hn>
段落和换行标签
<p> </p> 用于定义段落，可以将HTML文档分割为若干个段落。
<p> 内容 </p>
<br /> 强制换行显示。
<br />
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体、下划线等效果，使用HTML文本格式化标签，使文字以特殊方式显示。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong> 内容 </strong> |
| 倾斜 | <em> 内容 </em> |
| 删除线 | <del> 内容 </del> |
| 下划线 | <ins> 内容 </ins> |
| 文本高亮 | <mark> 内容 </mark> |
| 引用 | <cite> 内容 </cite> |
<strong> 加粗 </strong>
<em> 倾斜 </em>
<del> 删除线 </del>
<ins> 下划线 </ins>
<mark> 高亮 </mark>
<cite> 引用 </cite>
水平分割线标签
<hr /> 水平分割线。
<hr size="粗细" color="颜色" width="宽度"/>
字体标签
<font> </font>
<font size="字号" color="颜色" face="字形"> 内容 </font>
滚动标签
<marquee> </marquee>
<marquee direction="滚动方向" scrollamount="滚动速度" behavior="滚动方式"> 文本或图像 </marquee>
- direction的属性值：left（默认）、right、up、down
- behavior的属性值：scroll（默认-单方向循环滚动）、alternate（来回滚动）、slide（只滚动一次）
- scrollamount的属性值：数值，数字越大滚动越快
<div>和<span>标签
布局页面。
<div> 内容 </div>
<span> 内容 </span>
图像标签和路径
<img /> 标签用于定义HTML页面中的图像。
<img src="图片路径" alt="替换文本" title="提示文本" width="图像的宽度" height="图像的高度" border="图像的边框粗细" vspace="垂直间距" hspace="水平间距" />
路径：
目录文件夹：普通文件夹，里面存放了我们做页面需要的相关素材。
根目录：打开目录文件夹的第一层就是根目录。
- 相对路径：以引用文件所在位置为参考基础而建立的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | ./ | 图像文件和HTML文件同一级 |
| 下一级路径 | / | 位于HTML文件的下一级 |
| 上一级文件 | . ./ | 位于HTML文件的上一级 |
- 绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，例如：“ D:/web/img/logo.gif ”。
图像的打开方式：
- 将图像作为背景：background-image
- 使用图像标签：<img src=“图像路径” />
超链接标签
<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
- target的属性值：_self（默认-在原页面跳转）、_blank（在新窗口中打开）
链接的分类：
- 外部链接
<a href="http://www.baidu.com"> 百度 </a>
- 内部链接
<a href="./index.html"> 首页 </a>
- 空链接
<a href="#"> 空链接 </a>
- 下载链接
<a href="文件或压缩包"> 下载 </a>
- 锚点链接
<a href="#名字"> 需要跳转的链接 </a>
<h3 id="名字"> 跳转到的地方 </h3>
音频标签
音频格式： .mp3 .ogg .wav .avi等
<audio src="音频文件名" controls="controls"> </audio>
| 属性 | 说明 |
|---|---|
| src | 音频文件的全路径名 |
| controls | 提供播放控件（播放、暂停、定位、音量、全屏切换等） |
| autoplay | 页面载入完成后自动播放音频 |
| loop | 循环播放 |
| preload | 页面加载时，预播放音频（若使用了autoplay则该属性忽略） |
视频标签
视频格式：.mp4 .ogg .webm等
<video src="视频文件名" controls="controls" poster="图片路径"> </video>
| 属性 | 说明 |
|---|---|
| src | 视频文件全路径名 |
| controls | 提供播放控件（播放、暂停、定位、音量、全屏切换等） |
| autoplay | 自动播放（页面加载完成后） |
| loop | 循环播放 |
| preload | 页面加载时，预播放视频（若使用了autoplay则该属性忽略） |
| poster | 当视频缓冲不足时，按比例显示该属性指定的图像 |
<source>标签
<source>标签为媒体元素（例如<video>和<audio>）定义媒体资源。
<source>标签允许规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls="controls">
<source src="文件全路径名" type="文件类型">
<source src="文件全路径名" type="文件类型">
</audio>
HTML语义标签
语义是指对一个词或句子含义的正确解释。
很多HTML标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。它可以清楚地向浏览器和开发者描述其意义。
| 语义标签 | 语义 |
|---|---|
| <header> </header> | 表示页面的头部 |
| <nav> </nav> | 表示导航栏 |
| <footer> </footer> | 表示页面或区域的底部 |
| <article> </article> | 表示页面中独立的文档内容 |
| <section> </section> | 用于对页面内容进行分块 |
| <aside> </aside> | 表示页面的附属信息(侧边栏、广告等) |
更多：
HTML注释和特殊字符
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，需要使用注释。添加注释可以更好的理解代码的功能。
快捷键：Ctrl + /
<!--注释-->
特殊字符
在HTML中，一些特殊的符号不便直接使用，我们可以用下面的字符来替代。
空格符：&nbst;
小于号：<
大于号：>
和号：&
人民币：¥
版权：©
注册商标：®
摄氏度：°
正负号：±
乘号：×
除号：÷
平方：²
立方：³
下标：<sub></sub>
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
