初识HTML
HTML前置知识
网页由文字、图片、音频、视频、超链接组成，其背后的本质都是代码，通过浏览器转化（解析和渲染）成用户看到的网页
浏览器：是网页显示、运行的平台，是前端开发必备神器
常见五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari、欧朋（Opera）
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实就是Webkit的分支 |
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
注意：①渲染引擎不同，导致解析相同代码时的速度、性能、效果也是不一样的
②谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
Web标准：让不同的浏览器按照相同的标准显示结果，让展示效果统一，但是由于不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
Web标准的三个构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容（决定了身体） |
| 表现 | CSS | 网页元素的外观和位置等页面样式（决定了样式美观） |
| 行为 | JavaScript | 网页模型的定义与页面交互（决定了交互） |
HTML概述
HTML（Hyper Text Markup Language） 超文本标记语言，是一种专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
HTML页面的固定结构是要通过特定的HTML标签进行描述的，基本骨架如下：
<!DOCTYPE html> //html5 标准网页声明
<html lang=""> //lang为语言支持，有en（英文）和zh-CN（中文），网页的搜索引擎和翻译依照此工作
<head>
<meta charset="UTF-8"> //网页编码格式
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>HTML语法规范
HTML的注释
HTML的注释：为代码添加的具有解释性、描述性的信息，主要来帮助开发人员理解代码，方便下次看到此处时能想起功能和含义，浏览器执行代码时会忽略所有的注释
快捷键：ctrl + /
HTML标签的构成
HTML标签的构成：常见标签由两部分组成，是双标签，少数标签由一部分组成，是单标签
HTML标签的属性
HTML标签的属性：可以使HTML标签展示更多的信息，基本语法结构如下：
<标签名 属性名1="属性值1" 属性名2="属性值2".....>网页的内容</标签名>注意：①标签的属性要写在开始标签内部
②标签上可以同时存在多个属性，属性之间没有顺序之分
③标签名和属性，属性和属性之间必须以空格隔开
HTML标签之间的关系
HTML标签与标签之间的关系可分为：父子关系（嵌套关系）和兄弟关系（并列关系）即：
父子关系（嵌套关系）：
<head>
<title></title>
</head>
兄弟关系（并列关系）：
<head></head>
<body></body>HTML常用标签
排版标签
标题标签
标题标签：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签，1~6级标题，重要程度依次递减
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>特点：①文字都有加粗 ②文字都有变大，并且从h1~h6文字依次减小 ③独占一行
注意：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
段落标签
段落标签：在新闻和文章的页面中，用于分段显示
代码：p标签
<p>我是一段文字</p>特点：①段落之间存在间隙 ②独占一行
换行标签
换行标签：让文字强制换行显示
代码：br标签
<br>特点：①单标签 ②让文字强制换行
水平线标签
水平线标签：分割不同主题内容的水平线
代码：hr标签
<hr>特点：①单标签 ②在页面中显示一条水平线
文本格式化标签
文本格式化标签：让文字有加粗、下划线、倾斜、删除线等效果，突出重要性的强调语境
代码如下：
| 标签 | 说明 | 标签 * | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
（推荐使用 *，标签语义化，表示强调语义更强烈）
媒体标签
图片标签
图片标签：在网页中显示图片
代码：img标签
<img src="目标图片的路径" alt="替换文本（图片加载时显示）" title="提示文本（鼠标悬停时显示）" width="图片的宽度" height="图片的高度">特点：①单标签 ②img标签需要展示对应的效果，需要借助标签的属性进行设置
注意：①当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
②当图片加载失败时，才显示alt的替换文本，当图片加载成功时，不会显示alt的替换文本
③title属性不仅仅可以用于图片标签，还可以用于其他标签
④如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
⑤如果同时设置了width和height两个，若设置不当此时图片可能会变形
拓展：*绝对路径和相对路径*
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
eg：盘符开头：D:\HTML\image\1.jpg
完整的网络地址： https://www.baidu.com/img/PCtm_d0bed0b3c7d08cf.png
相对路径：从当前文件开始出发找目标文件的过程
同级目录：当前文件和目标文件在同一目录中
<!-- 方法一 --> <img src="目标图片.jpg" > <!-- 方法二 --> <img src="./目标图片.jpg" >下级目录：目标文件在下级目录中
<!-- 方法一 --> <img src="目标文件夹/目标图片.jpg" > <!-- 方法二 --> <img src="./目标文件夹/目标图片.jpg" >上级目录：目标文件在上级目录中
<img src="../目标图片.jpg" >
音频标签
音频标签：在页面中插入音频
代码：audio标签
<audio src="目标音频的路径" controls（显示播放的控件） autoplay（自动播放） loop（循环播放）></audio>注意：①音频标签目前只支持三种格式：MP3、Wav、Ogg
②autoplay属性在部分浏览器里不支持
视频标签
视频标签：在页面中插入视频
代码：video标签
<video src="目标视频的路径" controls（显示播放的控件） autoplay（自动播放） loop（循环播放）></video>注意：①视频标签目前只支持三种格式：MP4、WebM、Ogg
②autoplay属性在谷歌浏览器中需要配合muted实现静音播放
链接标签
链接标签：点击之后，从一个页面跳转到另一个页面，又叫超链接、锚链接。
代码：a标签
<a href="目标网页的路径" target="目标网页的打开形式">超链接</a>特点：①双标签，内部可以包裹内容 ②默认文字有下划线 ④从未被点击过，默认文字显示蓝色，被点击后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
注意：①如果需要a标签点击后去指定页面，需要设置a标签的href属性
②a标签的href值既可以是外部链接，也可以是内部链接
③href值为 # 时，a标签是一个空连接，点击后回到网页顶部，开发过程中若不确定该链接的最终跳转位置，可以用空连接占个位置
④ target属性的取值有两个：_self(默认值，在当前窗口中跳转，即覆盖原网页) 和 _blank(在新窗口中跳转，即保留原网页)
列表标签
无序列表
无序列表：在网页中表示一组无顺序之分的列表（比如新闻列表）
代码：ul>li标签
<!-- ul表示无序列表的整体，用于包裹li标签 -->
<ul>
<!-- li表示无序列表的每一项，用于包含每一行的内容 -->
<li></li>
<li></li>
......
<li></li>
</ul>特点：①列表的每一项前默认显示圆点标识
注意：①ul标签中只允许包含li标签
②li标签可以包含任意内容
有序列表
有序列表： 在网页中表示一组有顺序之分的列表（比如排行榜）
代码：ol>li标签
<!-- ol表示有序列表的整体，用于包裹li标签 -->
<ol>
<!-- li表示有序列表的每一项，用于包含每一行的内容 -->
<li></li>
<li></li>
......
<li></li>
</ol>特点：①列表的每一项前默认显示序号标识
注意：①ol标签中只允许包含li标签
②li标签可以包含任意内容
自定义列表
自定义列表：在网页的底部导航中通常会使用自定义列表实现
代码：dl>dt/dd标签
<!-- 表示自定义列表的整体，用于包裹dt/dd标签 -->
<dl>
<!-- 表示自定义列表的主题 -->
<dt></dt>
<!-- 表示自定义列表的针对主题的每一项内容 -->
<dd></dd>
......
<dd></dd>
</dl>特点：①dd前会默认显示缩进效果
注意：①dl标签中只允许包含dt/dd标签
②dt/dd标签可以包含任意内容
表格标签
表格基础标签
表格基础标签：在网页中以行+列的单元格的方式整齐展示和数据（比如学生成绩表）
代码: table>tr>td标签
<!-- 表格整体,用于包裹多个tr -->
<table border="边框宽度" width="表格宽度" height="表格高度">
<!-- 表格每行,可用于包裹td -->
<tr>
<!-- 表格单元格,可用于包裹内容 -->
<td></td>
......
<td></td>
</tr>
</table>表格标题和表头单元格标签
表格标题和表头单元格标签：在表格中表示整体大标题和一列小标题
代码：caption标签(表格标题) th标签(表头单元格)
<table>
<!-- 表格大标题 -->
<caption></caption>
<tr>
<!-- 表头单元格-->
<th></th>
<th></th>
......
<th></th>
</tr>
</table>注意:①caption标签书写在table标签的内部
②th标签书写在tr标签的内部（用于替换td标签）
表格结构标签
表格结构标签：让表格的内容结构分组,突出表格的不同部分（头部、主体、底部），使语义更加清晰
代码:thead标签(表格头部) tbody标签(表格主体) tfoot标签(表格底部)
<table>
<caption></caption>
<!-- 表格的头部 -->
<thead>
<tr>
<th></th>
<th></th>
......
<th></th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<td></td>
<td></td>
......
<td></td>
</tr>
........
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td></td>
<td></td>
......
<td></td>
</tr>
</tfoot>
</table>注意:①表格结构标签内部用于包裹tr标签
②表格的结构标签可以省略
表格单元格合并
表格单元格合并：将水平或垂直多个单元格合并成一个单元格
属性代码：rowspan（垂直跨行合并） colspan（水平跨列合并）
<!-- 单元格标签--rowspan -->
<!-- rowspan属性将单元格标签高度扩充为正常单元格高度N倍。在扩充时向下侵占 -->
<td rowspan="n"></td> <!-- 该行的高度占n行 -->
<!-- 单元格标签--colspan -->
<!-- colspan属性将单元格标签宽度扩充为正常单元格宽度N倍。在扩充时向右侵占 -->
<td colspan="n"></td> <!-- 该行的宽度占n列 -->注意：①只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）
②合并单元格的步骤：
a. 明确合并哪几个单元格
b. 通过左上原则（上下合并：只保留最上的，删除其他 左右合并：只保留最左的，删除其他），确定保留谁删除谁
c. 给保留的单元格设置rowspan或者colspan
表单标签
input系列标签
input系列标签：在网页中显示收集用户信息的表单效果（比如登录页、注册页）
代码：input标签，具体属性值如下：
<!-- 文本框,用于输入单行文本(type属性的默认值) -->
<input type="text" placeholder="占位符,提示用户输入内容的文本">
<!-- 密码框,用于输入密码 -->
<input type="password" placeholder="占位符,提示用户输入内容的文本">
<!-- 单选框,用于多选一 -->
<input type="radio" name="用于分组" checked(默认选中)>
<!-- 多选框,用于多选多 -->
<input type="checkbox" checked(默认选中)>
<!-- 文件选择,用于之后上传文件 -->
<input type="file" multiple(多文件选择)>
<!-- 提交按钮,用于提交(点击后提交数据到后端服务器) -->
<input type="submit">
<!-- 重置按钮,用于重置(点击后恢复表单默认值) -->
<input type="reset">
<!-- 普通按钮,默认无功能,之后配合js添加功能 -->
<input type="button">注意：①type属性值不要排错或者多加空格，否则相当于设置了默认值状态：text
②name属性对单选框有分组功能，有相同name属性值的单选框为一组，一组中只能同时有一个被选中
③如果想实现以上的按钮功能，需要配合form标签来使用（即用form标签把表单标签包裹起来）
拓展：*value属性和name属性的作用*
value属性：用户输入的内容，提交后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义后端接收到数据的格式是：name的属性值 = value的属性值
button按钮标签
button按钮标签：在网页中显示用户点击的按钮
代码：button标签（同input系列的按钮标签）
<!-- 提交按钮,用于提交(点击后提交数据到后端服务器) -->
<button type="submit"></button>
<!-- 重置按钮,用于重置(点击后恢复表单默认值) -->
<button type="reset"></button>
<!-- 普通按钮,默认无功能,之后配合js添加功能 -->
<button type="button"></button>注意：①button标签是双标签，更便于包裹其他内容：文字、图片等
②谷歌浏览器中button默认是提交按钮
select下拉菜单标签
select下拉菜单标签：在网页中提供多个选择项的下拉菜单
代码：select>option标签
<!-- 下拉菜单的整体 -->
<select >
<!-- 下拉菜单的每一项 -->
<option selected(默认选中)></option>
<option ></option>
......
<option ></option>
</select>textarea文本域标签
textarea文本域标签：在网页中提供可输入多行文本的表单控件
代码：textarea标签
<textarea cols="文本域内可见宽度" rows="文本域内可见行数"></textarea>注意：①右下角可以拖拽改变大小
②实际开发时针对于样式效果推荐使用CSS设置
label标签
label标签： 常用于绑定内容与表单标签的关系，扩大表单标签的作用范围
代码：label标签
<!-- 使用方法一：
1. 使用label标签把内容（如文本）包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的id属性值 -->
<input type="checkbox" id="one"><label for="one">点我</label>
<!-- 使用方法二：
1. 直接使用label标签把内容（如文本）和表单标签包裹起来
2. 需要把label标签的for属性删除即可 -->
<label><input type="checkbox">点我</label>语义化标签
没有语义的布局标签
没有语义的布局标签：div标签和span标签
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
有语义的布局标签
有语义的布局标签：HTML5中，推出了一些有语义的布局标签供开发者使用
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意：以上标签的显示特点和div一致，但是比div多了不同的语义
字符实体
字符实体：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文;
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ' | 撇号 | '(IE不支持) |
| ¢ | 分（cent） | ¢ |
| £ | 榜（pound） | £ |
| ¥ | 元（yen） | ¥ |
| € | 欧元（euro） | € |
| § | 小节 | § |
| © | 版权 | © |
8956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
