一、基础认知
1、基础概念（了解）
1.网页的组成部分：文字、图片、音频、视频、超链接
2.相同的网页在不同的浏览器中显示效果不一致，因为不同浏览器渲染引擎不同，解析的效果也会存在差异。
3.Web标准中分成三个构成 ：
| 构成 | 语言 | 说明 |
| 结构 | HTML | 网页元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
Web标准要求页面实现：结构、表现、行为三层分离。
2、HTML初体验
1.HTML：超文本标记语言。
HTML骨架结构
在vscode中打！再回车就会自动生成骨架
在vscode中alt+b就会运行浏览器
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页的主体内容
</body>
</html>3、语法规范
1、HTML的注释<!-- -->
注释快捷键：在vscode中：把光标放到需要注释行，然后ctrl + /
2、标签的结构
<strong>文字内容</strong>
开始标签 包裹的内容 结束标签
结构说明：
（1）、标签由<、>、/、英文字母或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
（2）、双标签：前面叫开始标签，后面叫结束标签，两部分之间包裹内容
（3）、单标签：自成一体，无法包裹内容
3、标签之间的关系
父子关系（嵌套关系）
<head>
<title></title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>
二、HTML标签学习
（一）排版标签
1、标题标签<h系列标签>（有且仅有6个）
在vscode中只要写h1然后回车就会有该双标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
语义：1~6级标签，重要程度依次递减
特点：
#文字都有加粗
#文字都有变大，并且从h1~h6文字逐渐减小
#独占一行
2、段落标签<p></p>
如果一个段落很长，在vscode中需要滚动才能查看非常麻烦，可以在查看中选择自动换行（快捷键：alt+z）
<p>我是一段文字</p>
语义：段落
特点：段落之间存在间隙
独占一行
3、换行标签<br>
<br>
语义：换行
特点：单标签
让文字强制换行
4、水平分割线<hr>
<hr>
语义：主题的分割转换
特点：单标签
在页面中显示一条水平线
（二）文本格式化标签
| 标签 | 说明 |
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 标签 | 说明 |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
两者在视觉效果上相同，只是语境上不同，第二个表格表示的强调语义更强烈
（三）媒体标签
1、图片标签<img src ="" alt="">
<img src = "" alt = "">
src、alt为属性名，“”为属性值，src=""，alt=""为标签属性
src是图片名字，alt是替换文本，只有图片显示异常才会显示，如果图片显示正常则不会显示，
title为提示文本，鼠标悬停时会显示
width(宽度)和height（高度）只需要设置一个即可，这样图片会等比例缩放。
一个标签可以有多个属性
属性之间要用空格隔开
属性之间没有顺序之分
特点：单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置
2、路径
*绝对路径(了解)：通常从盘符开始的路径
*相对路径（常用）：从当前文件开始出发找目标文件的过程
a、同级目录：当前文件和目标文件在同一目录中，
代码：直接写目标文件的名字即可；<img src = "目标文件名.后缀">或<img src = "./目标文件名.后缀">，其中./表示当前目录
b、下级目录：目标文件在下级目录中
代码：<img src = "文件夹名字/目标图片">
1、文件夹名字
2、进入这个文件夹/
3、直接写目标文件名字
c、上级目录：目标文件在上级目录中
代码：<img src = "../目标文件">
1、先出当前文件夹，到上一级目录(../)
2、直接写目录文件
3、音频标签<audio src = "./music.mp3" controls></audio>
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
音频标签目前支持的三种格式：MP3、Wav、Ogg
4、视频标签<video src = "./video.mp4" controls></video>
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
视频标签目前支持三种格式：MP4、WebM、Ogg
4、超链接标签<a href = "./目标网页.html">超链接</a>
a标签<a></a>
href代表跳转地址
开发网站初期，我们还不知道跳转地址的时候，href的值写#，#代表空链接
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定网页，需要设置a标签的href属性
4.1链接-新窗口（target属性）
<a href ="目标网址" target = "_blank"></a>
| 取值 | 效果 |
| _self | 默认值，在当前窗口跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
三、其他HTML标签
（一）列表标签
1、无序列表<ul><li>两个标签
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一页，用于包含每一页的内容 |
显示特点：列表每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容
2、有序列表<ol><li>两个标签
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点：列表每一项前默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意东西
3、自定义列表<dl><dt><dd>三个标签
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
（二）表格标签<table border=""> <tr> <td>三个标签
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用与包裹内容 |
注意点：
标签的嵌套关系：table > tr > td
2.1表格相关属性
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意点：
实际开发时针对于样式效果推荐使用css设置
2.2表格标题(caption)和表头单元格标签（th）
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并剧中显示 |
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
2.3表格的结构标签（了解）
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
2.5合并单元格
场景：将水平或垂直多个单元格合并成一个单元格
合并单元步骤：
1、明确合并哪几个单元格
2、通过左上原则，确定保留谁删除谁
#上下合并---只保留最上的，删除其他
#左右合并---只保留最左的，删除其他
3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
<td rowspon = "合并几行或者几列这里就写数字几"></td>
| 属性名 | 属性值 | 说明 |
| rowspon | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
(三)表单标签
1、input系列标签
场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页
标签名：input
input标签可以通过type属性值的不同，展示不同效果
type属性值：
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入当行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
1.1、文本框text
场景:在网页中显示输入单行文本的表单控件，例如文本框里面的提示字
type属性值：text
常用属性：
| 属性名 | 说明 |
| placeholder | 占位符，提示用户输入内容的文本 |
1.2、单选框radio
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
| 属性名 | 说明 |
| name | 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
男和女为同一组，只能二选一，组名为sex，checked可以默认选中这个选项
1.3、文件选择file
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
| 属性名 | 说明 |
| multiple | 多文件选择 |
1.4、按钮
场景：在网页中显示不同功能的按钮表单控件
<input type = "submit/reset/button" value = "按钮名字">
type属性值；
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
2、button按钮标签（button也能作为标签出现，不一定是属性）
场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）：
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意点：
谷歌浏览器中button默认是提交按钮
button是双标签，更便于包裹其他内容：文字，图片等
3、select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
代码：
<select >
<option >北京</option>
<option >上海</option>
<option >广州</option>
<option selected>深圳</option>
</select>标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
4、textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对样式效果推荐使用css设置
5、label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法（1）：
1、使用lable标签把内容（如：文本）包裹起来
2、在表单标签上添加id属性
3、在label标签的for属性中设置对应的id属性值
使用方法（2）（这个方法方便）：
1、直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2、需要把label标签的for属性删除即可
<label ><input type="radio" name="sex" id="">男</label>
<label ><input type="radio" name="sex" id="">女</label>
（四）语义化标签
1、没有语义的布局标签（-div和span）
场景：实际开发网页时会大量使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<body>
一行文字
<div>这是div标签</div>
<div>这也是div标签</div>
<span>这是span标签</span>
<span>这也是span标签</span>
</body>
2、有语义的布局标签（了解）
场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
（五）字符实体
1、HTML中的空格合并现象
网页不认识多个空格，只认识一个，打多少个空格都会在网页显示一个空格，如果需要打多个空格则需要使用部分字符实体。
2、常见字符实体
场景：在网页中展示特色符号效果时，需要使用字符实体替代
结构：&英文；(后面分号别漏写)
常见字符实体：
| 显示结果 | 描述 | 实体名称 |
| 空格 | （记住这个就好，还有后面英文分号;别漏写） | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | &: |
| " | 引号 | " |
| ' | 撇号 | '(IE不支持) |
| ¢ | 分（cent） | ¢ |
| £ | 镑（pound） | £ |
| ￥ | 元（yen） | ¥ |
| € | 欧元（euro） | € |
| § | 小节 | § |
| © | 版权（copyright） | © |
3428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
