HTML基础知识点（详细）
一、网页基础知识
1、认识网页
（1）网页是由什么组成的呢？
文字、图片、视频、音频、超链接等...
（2）网页背后的本质是什么呢？
代码组合
（3）前端代码是怎么转化的呢？
通过浏览器转化（解析和渲染）成用户看到的网页
2、五大浏览器和渲染引擎
（1）五大浏览器（谷歌常用）
IE浏览器、火狐（Firefox）、谷歌（Chrome）、Safari、欧朋（Opera）
（2）渲染引擎（浏览器内核）
浏览器中专门对代码进行解析渲染的部分
3、Web标准
主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面
- 结构：HTML---页面元素和内容
- 表现：CSS---网页元素的外观和位置等页面样式（颜色、大小）
- 行为：JavaScript---网页模型的定义与页面交互
二、HTML基础概念
1、HTML概念
（Hyper Text Markup Language）---超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述
2、HTML骨架结构
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体
HTML基本格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
写自己的代码
</body>
</html>
3、开发工具
开发工具：Webstorm、VS Code、Hbuilder、Sublime Text、Notepad++、Editplus、Dreamweaver、Atom 其中，Visual Studio Code为常用软件---速度快，体积小、插件多
- WebStorm 是JetBrains公司旗下一款JavaScript 开发工具，和PyCharm等同属一家公司。
- VSCode(全称:Visual Studio Code) 是一款由微软开发且跨平台的免费源代码编辑器。
- HBuilder 是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE.
- Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。
- Notepad+ 是记事本的增强版本。
- EditPlus 是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
- Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，最初为美国Macromedia公司开发，2005年被Adobe公司收购。
- Atom 是github平台为其用户提供的，也有人在使用
4、HTML语法规范
（1）注释
快捷键：ctrl + / （再按一次，取消注释）
（2）标签的构成
1、标签结构图：<起始标签> 内容</结束标签>
2、结构说明：标签分为双标签和单标签
（3）标签的关系
1、嵌套关系（父子关系） 2、并列关系（兄弟关系）
三、HTML中的标签
1、排版标签
（1）标题标签
- 语义：给页面上的文字加上标题，1-6级标题，重要程度依次减小
- 代码：
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
- 特点：文字都有加粗；文字都有大小，从h1-h6文字逐渐减小；独占一行
（2）段落标签
- 语义：在新闻和文章的页面中，用于分段显示，表示一个段落
- 代码：
<p>我是一段文字</p>
- 特点：段落之间存在间隙，独占一行
（3）换行标签
- 语义：让文字强制换行显示
- 代码：
<br>
- 特点：单标签，让文字强制换行
（4）水平线标签
- 语义：分割不同主题内容的水平线，用于主题分割
- 代码显示：
<hr>
- 特点：单标签，在页面中显示一条水平线
2、文本格式化标签
- 语义：需要让文字加粗、下划线、倾斜、删除线等效果
- 代码：
b、strong --- 加粗
u、ins --- 下划线
i、em --- 倾斜
s、del --- 删除线
<em>...</em> 倾斜
<strong>...</strong> 加粗
- 特点：突出重要性的强调语境，那就用全单词表示（即后面的）
3、媒体标签
（1）图片标签
- 语义：在网页中显示图片
- 代码：
<img src="" alt="" title="" height="" width="">
- 属性 属性注意点：
（1）标签的属性写在开始标签内部；
（2）标签上可以同时存在多个属性；
（3）属性之间以空格隔开；
（4）标签名与属性之间必须以一位空格隔开；
（5）属性之间没有顺序之分
1、alt属性
属性值：替换文本
#当图片加载失败时，才显示atl的内容
#当图片加载成功时，不会显示alt的文本
2、title属性
属性值：提示文本---当鼠标悬停时，才显示的文本
注意：title属性不仅仅可以用于图片标签，还可以用于其他标签
3、宽高属性
属性名：width 和 height
属性值：宽度和高度
注意点：
（1）如果只设置宽高其中的一个，另一个没设置的会自动等比例缩放（图片不会变形）
（2）如果同时设置了宽高两个值，若设置不当图片可能会变形
- 特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置
（2）路径
- 语义：页面需要加载图片，需要先找到对应的图片
- 分类 （1）绝对路径（了解）
概念：指目录下的绝对路径，可直接到达目标位置，通常从盘符开始的路径 示例：盘符开头：E:\CODE\images 或者 完整的网址
（2）相对路径
概念：从当前文件开始出发找目标文件的过程
分类：
（1）同级目录---当前文件和目标文件在同一目录中
（2）下级目录---目标文件在下级目录中
（3）上级目录---目标文件在下上级目录中
- 代码：
同级目录：
写法1：<img src="目标图片.gif">
写法2：<img src="./目标图片.gif">
下级目录：
写法1：<img src="./images/目标图片.gif">
写法2：<img src="images/目标图片.gif">
上级目录：
<img src="../images/目标图片.gif"> ---返回几个上级用几个../
（3）音频标签
- 语义：在页面中插入音频
- 代码：
<audio src="音频.mp3" controls autoplay loop></audio>
- 常见属性：
（1）src---音频的路径
（2）controls---显示播放的控件
（3）autoplay---自动播放（部分浏览器不支持）
（4）loop---循环播放
- 注意点：音频标签目前支持的三种格式：MP3、Wav、Ogg
（4）视频标签
- 语义：在页面中插入视频
- 代码：
<video src="../video/video1.mp4" controls autoplay loop></video>
- 常见属性：
（1）src---视频的路径
（2）controls---显示播放的控件
（3）autoplay---自动播放（谷歌浏览器中需配合muted实现静音播放）
（4）loop---循环播放
- 注意点：视频标签目前支持三种格式：MP4、WebM、Ogg
4、链接标签
- 语义：点击之后，从一个页面跳转到另一个页面
- 称呼：a标签、超链接、锚链接
- 代码：
<a href="https://www.baidu.com/">跳转到百度</a>
- 属性：target属性
属性值-目标网页的打开形式
（1）_self ---默认值，在当前窗口跳转（覆盖原网页）
（2）_blank ---在新窗口跳转（保留原网页）
- 特点：双标签，内部包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性
5、列表标签
应用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
标签分类：
（1）无序列表
- 语义：在网页中表示一组无顺序之分的列表，如：新闻列表
- 标签组成：
（1）ul ---表示无序列表的整体，用于包裹 li 标签
（2）li ---表示无序列表的每一项，用于包含每一行内容
- 代码：
<ul type="disc">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
其中，type属性如下：
type=“disc” 实心圆
type=“circle” 空心圆
type=“square” 方形
type=“none” 没有
- 特点：列表的每一项前默认显示圆点标识
- 注意点：ul 标签中只允许包含 li 标签 ；li 标签可以包含任意内容
（2）有序列表
- 语义：在网页中表示一组有顺序之分的列表，如：排行榜
- 标签组成：
（1）ol ---表示有序列表的整体，用于包裹 li 标签
（2）li ---表示有序列表的每一项，用于包含每一行内容
- 代码：
<ol type="A" start="4">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
其中，type、start属性如下：
type=“1/A/a/I/i”
start=“4” 定义开始位置，属性值必须是数字
- 特点：列表的每一项前默认显示序号标识
- 注意点：ol 标签中只允许包含 li 标签；li 标签可以包含任意内容
（3）自定义列表
- 语义：在网页中的底部导航中通常会使用自定义列表实现
- 标签组成：
（1）dl ---表示自定义列表的整体，用于包裹 dt/dd 标签
（2）dt ---表示自定义列表的主题
（3）dd ---表示自定义列表的针对主题的每一项内容
- 代码：
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
- 显示特点：dd 前会默认显示缩进效果
- 注意点：dl 标签中只允许包含 dt/dd 标签；dt/dd 标签可以包含任意内容
（4）表格标签
- 表格的基本标签
语义：在网页中以行 + 列的单元格的方式整齐展示数据，如：学生成绩表
基本标签：
（1）table ---表格整体，可用于包裹多个 tr
（2）tr ---表格每行，可用于包裹多个 td
（3）td ---表格单元格，可用于包裹内容
注意点：标签的嵌套关系：table > tr > td
- 表格相关属性
语义：设置基本表格
常见相关属性：
（1）border --- 数字 --- 边框宽度
（2）width --- 数字 --- 表格宽度
（3）height --- 数字 --- 表格高度
注意点：实际开发时针对样式效果推荐用CSS设置
其中，代码展示如下：
<table border="3" width="500" height="300">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
-
表格标题和表头单元格标签
语义：在表格中表示整体大标题和一列小标题
其他标签：
（1）caption ---表格大标题---表示表格整体大标题，默认在表格整体顶部居中位置显示
（2）th ---表头单元格---表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意点：
（1）caption 标签书写在 table 标签内部
（2）th 标签书写在 tr 标签内部（用于替换 td 标签）
- 合并单元格
语义：将水平或者垂直多个单元格合并成一个单元格 --- 跨行合并，跨列合并
步骤：
（1）明确合并哪几个单元格
（2）通过左上原则，确定保留谁删除谁
（上下合并：只保留最上面的，删除其他；左右合并：只保留最左边）
（3）给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并
- 表格的结构标签（了解）
语义：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
（1）thead ---表格头部
（2）tbody ---表格主体
（3）tfoot ---表格底部
注意点：
（1）表格结构标签内部用于包裹 tr 标签
（2）表格的结构标签可以省略
（5）表单标签
目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建，如登录、注册、搜索等
& input 系列标签
- 语义：在网页中显示收集用户信息的表单效果，如：登录页、注册页
- 标签名：input，input 标签可以通过 type 属性值的不同，展示不同效果
- type属性值：
（1）text ---文本框,用于输入单行文本
常用属性：placeholder ，占位符，提示用户输入内容的文本
代码示例：
<input type="text" placeholder="请输入用户名">
（2）password ---密码框，用于输入密码
（3）radio ---单选框，用于多选一
常用属性：
（1）name ---分组，有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中
（2）checked ---默认选中
注意点：
（1）name 属性对于单选框有分组功能
（2）有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中
代码示例：
婚姻状况（单选）：<input type="radio" name="marriage" checked>未婚
<input type="radio" name="marriage">已婚
<input type="radio" name="marriage">离异
（4）checkbox ---多选框，用于多选多
（5）file ---文件选择，用于之后上传文件
常用属性：multiple ---多文件选择
（6）按钮
属性值：
（1）submit ---提交按钮，用于提交
（2）reset ---重置按钮，用于重置
（3）button ---普通按钮，默认无功能，之后配合 js 添加功能
注意点：
（1）如果需要实现以上按钮功能，需要配合 form 标签使用
（2）form 使用方法：用 form 标签把表单标签一起包裹起来即可
代码示例：
<input type="submit" value="免费注册">
& button 按钮标签
- 语义：在网页中显示用户点击的按钮
- 标签名：button
- type属性值
（1）submit ---提交按钮，点击之后提交数据给后端服务器
（2）reset ---重置按钮，点击之后恢复表单默认值
（3）button ---普通按钮，默认无功能，之后配合 js 添加功能
- 注意点
（1）谷歌浏览器中 button 默认是提交按钮
（2）button 标签是双标签，更便于包裹其他内容：文字、图片等
& select 下拉菜单标签
- 语义：在网页中提供多个选择项的下拉菜单表单控件
- 标签组成：
（1）select 标签：下拉菜单的整体
（2）option 标签：下来菜单的每一项
- 常见属性：selected：下拉菜单的默认选中
- 代码示例：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
& textarea 文本域标签
- 语义：在网页中提供可输入多行文本的表单控件
- 标签名：textarea
- 常见属性
（1）cols：规定了文本域内可见宽度
（2）rows：规定了文本域内可见行数
- 注意点：右下角可以拖拽改变大小，实际应用可用CSS设置
& label 标签
- 语义：常用于绑定内容与表单标签的关系
- 标签名：label
- 常用方法
方法1：
<input type="radio" name="sex" id="1"><label for="1">男</label>
方法2：
<label><input type="radio" name="sex">女</label>
（6）语义化标签
- 无语义布局标签
div 标签，一行只显示一个（独占一行），双标签
span 标签，一行可以显示多个，双标签
- 有语义布局标签（了解）
（1）语义：在 html5 新版本中，推出了一些有语义的布局标签供开发者使用
（2）注意点：以上标签显示特点和 div 一样，但是比 div 多了不同的语义
（3）标签：
header ---网页头部
nav ---网页导航
footer ---网页底部
aside ---网页侧边栏
section ---网页区块
article ---网页文章
（7）字符实体
- 语义：在网页中展示特殊符号效果时，需要使用字符实体替代
- 结构：&英文;
- 常见字符实体：
---空格 （常用）
© ---版权
™ ---商标
® ---已注册
< ---小于号或显示标记
> ---大于号或显示标记
