前端基础知识总结
基础概念铺垫
认识网页
-
网页是由文字，图片，音频，视频，超链接 组成的
-
网页的本质是前端程序员写的代码
-
同浏览器的解析和渲染成用户所看到的网页
五大浏览器和渲染引擎
浏览器是网页显示，运行的平台
常见的五大浏览器：
- IE浏览器，火狐浏览器（Firefox），谷歌浏览器（Chrome），Safari浏览器，欧朋浏览器（Opera）
渲染引擎（浏览器内核）：浏览器专门对代码进行解析渲染部分
浏览器不同，其内在的渲染引擎也不同：
| 内核 | 浏览器 | 备注 |
|---|---|---|
| Trident | IE | IE 猎豹 360急速浏览器 百度浏览器 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blint | Blink其实是Webkit的分支 |
注意点：
- 渲染引擎不同，导致解析相同代码的速度，性能，效果也不同
- 谷歌浏览器的渲染引擎速度快，性能高，效果好，所以更吸引用户的喜爱
Web标准
Web标准让不同浏览器按照相同的标准显示结果，让显示效果统一，解决了不同浏览器之间的显示效果不同的问题
Wen标准中的三大构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模型的定义和页面交互 |
HTML标签
排版标签
标题标签
使用场景：
在新闻和文章的页面中，都里不开标题标签，用来突出显示文章主题
代码:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
语义：1~6级标题
特点：
- 文字都有加粗
- 文字都变大，并逐级减小
- 独占一行
注意点：h1标签对网页非常重要，早开发中有特定的使用场景，如：新闻标签，网页logo部分
段落标签
场景： 在新闻和文章的页面中用于分段显示
代码：
<p>这是一个段落标签</p>
特点：
- 独占一行
- 段落直接有间隙
换行标签
场景： 让文字强制换行
代码：
<p>这是第一行<br>这是第二行</p>
特点：
- 单标签
- 让文字强制换行
水平标签
场景： 分割不同主题内容的水平线（在代码中很少用，常用于新闻类网页居多）
代码：
<h1>新闻30分</h1>
<hr>
<p>震惊世界的。。。。。。</p>
特点：
- 单标签
- 在页面中显示一条水平线
文本格式化标签
场景： 让需要的文字显示出加粗，下划线，倾斜，删除线等效果
代码：
| 标签 | 说明 |
|---|---|
| b，strong | 加粗 |
| u，ins | 下滑线 |
| i，em | 倾斜 |
| s，del | 删除线 |
<b>这是一段加粗的文字</b> <strong>这也是一段加粗的文字</strong>
<u>这是一段有下滑线的文字</u> <ins>这是一段有下滑线的文字</ins>
<i>这是一段倾斜的文字</i> <em>这是一段倾斜的文字</em>
<s>这是一段有删除线的文字</s> <del>这是一段有删除线的文字</del>
语义： 突出重要性的强调的语境
在开发中推荐使用 strong ，ins，em，del 因为他们表示的语义更加强烈
媒体标签
图片标签
场景： 在网页中显示图片
代码：
<img src="xx.jpg" alt="图片不能显示是显示的文字">
特点：
- 单标签
- img标签需要借助标签的属性进行设置才能达到对应的显示效果
图片标签中的属性
| 属性 | 说明 |
|---|---|
| src | 指定需要展示的图片路径 |
| alt | 替换文本，当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停是，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
属性注意点：
- 标签的属性写在开始标签内部
- 一个标签上可以同时存在多个属性
- 属性直接以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性没有顺序之分
音频标签
场景： 在页面中插入音频
代码：
<audio src="xx.mp3" controls></audio>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意点：音频标签目前支持三种格式：MP3，Wav，Ogg
视频标签
场景： 在页面中插入视频
代码：
<video src="xx.mp4" controls></video>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（在谷歌浏览器中需要配合muted实现静音播放） |
| loop | 循环播放 |
注意点：视频标签目前支持三种格式:MP4，WebM，Ogg
链接标签
场景： 点击之后，从一个页面跳转到另一个页面
称呼： a标签，超链接，瞄标签
代码：
<a href="baidu.com">超链接</a>
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签去指定页面需要设置其href属性
- a标签默认文字有下滑线
- a标签没有被点击过，默认文字显示为蓝色
- a标签被点击过后，文字显示为紫色
属性：
| 属性名 | 功能 |
|---|---|
| href | 设置跳转的目标网页 |
| target | 目标网页打开方式（_self:默认值，在当前窗口跳转，覆盖原网页。 _blank:在新的窗口跳转，保留原网页） |
小拓展
锚点
在相同页面：
<a href="#one"></a> //点击锚点标签后跳到的位置
<h6 id=“one”></h6>//设置在点击这个标签后跳到对应id的锚点
在不同页面：
<a href="xx.html#two"></a>
<h6 id="two"></h6>
列表标签
场景： 在网页中按照一行一行的展示出关联的内容，如新闻列表，排行榜等
特点： 按照行的方式，整齐显示内容
种类： 无序列表，有序列表，自定义列表
无序列表
场景：在网页中表示一组无顺序之分的列表，如新闻列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
代码：
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
...
</ul>
显示特点： 列表的每一项前默认显示圆点标识
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意标签
有序列表
场景： 在网页中表示一组有顺序之分的列表，如排行版等
标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
代码：
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第三</li>
...
</ol>
显示特点：列表的每一项默认显示序号标识
注意点:
- ol标签中只能包含li标签
- li标签可以包含任意标签
自定义列表
场景： 在网页的底部导航通常会使用自定义列表实现
标签组成：
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表主题内容的每一项内容 |
代码：
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
显示特点：dd标签会默认显示缩进效果
注意点：
- dl标签中只能包含dt/dd标签
- dt/dd标签可以包含任意内容
表格标签
场景： 在网页中可以以行+列的单元格方式展示数据，如学生成绩表
基本标签：
| 标签名 | 说明 |
|---|---|
| table | 表格整体，用于包含多个tr |
| tr | 表格的每一行，用于包裹td ，th |
| td | 表格的单元格，用于包裹内容 |
| caption | 表示表格整体大标题，默认在表格整体的顶部居中位置显示 |
| th | 表示一列小标题，通常用于表格第一行，默认内部文字加粗且居中显示 |
注意点：
- 标签的嵌套关系：table>caption&tr>td&th
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
代码：
<table>
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>阿强</td>
<td>100</td>
<td>阿强真强</td>
</tr>
<tr>
<td>阿花</td>
<td>100</td>
<td>阿花真厉害</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>天造地设</td>
</tr>
</table>
表格结构标签
场景： 让表格的内容结构分组，突出表格的不同部分（头部，主题，底部）,使语义更加清晰
结构标签：
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
代码：
<table>
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>阿强</td>
<td>100</td>
<td>阿强真强</td>
</tr>
<tr>
<td>阿花</td>
<td>100</td>
<td>阿花真厉害</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>天造地设</td>
</tr>
</tfoot>
</table>
注意点：
- 表格结构标签内部用于包裹tr标签
- 表格结构标签可以省略
表格标签属性
表格常见属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| border | 数字 | 边框的宽度 |
| width | 数字 | 表格的宽度 |
| height | 数字 | 表格高度 |
| rowspan | 合并单元格的个数 | 跨行合并，并将多行的单元表格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
合并单元格的步骤思路:
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
- 上下合并>只保留最上面的，删除其他
- 左右合并>只保留最左的，删除其他
- 给保留的单元格设置：跨行合并或者跨列合并
- rowspan: 跨行合并>垂直方向合并（上下）
- colspan: 跨列合并>水平方向合并（左右）
注意： 只有在同一个结构标签中的单元表格才可以合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）
代码：
<table>
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>阿强</td>
<td rowspan="1">100</td>
<td>阿强真强</td>
</tr>
<tr>
<td>阿花</td>
<td>阿花真厉害</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="1">郎才女貌</td>
</tr>
</tfoot>
</table>
表单标签
input系列标签
场景： 在网页中显示收集用户信息表单效果,如登录页，注册页等
标签名：input
- input 标签可以通过type属性值不同，展示不同效果
type属性值(部分常见)：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，配合js使用 |
注意： 以上都是常见的，想要了解更多可以查看[][[MDN Web Docs (mozilla.org)文档]developer.mozilla.org/zh-CN/
常用属性：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容文本 |
| value | 用户输入的内容，提交后会发送给后端服务器 |
| name | 提交后告诉后端发送过来的数据是什么含义，在单选框中相同name属性值相同为一组，一组中只能选中一个 |
| checked | 默认选中。作用于单选框和多选框 |
| multiple | 选中多个文件 |
代码：
<form action="">
用户名：<input type="text" placeholder="输入用户名"> <br><br>
密码：<input type="password" placeholder="密码"><br><br>
性别: <input type="radio" name="sex" checked>男
<input type="radio" name="sex">女 <br><br>
多选框: <input type="checkbox" checked>唱
<input type="checkbox" checked>跳
<input type="checkbox" checked>rap
<input type="checkbox" checked>篮球<br><br>
选择文件： <input type="file" multiple><br><br>
提交框： <input type="submit" value="提交"><br><br>
重置框： <input type="reset">
</form>
注意：
- 如要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来即可
button按钮标签
场景： 在网页中显示用户点击按钮
标签名：button
type属性值:
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。配合js使用 |
代码：
<form action="">
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button>普通按钮</button>
</form>
注意点：
- 在谷歌浏览器中默认是提交按钮
- button标签是双标签，便于包裹其他内容：文字，图片等
select下拉菜单标签
场景： 在网页中提供多个选项的下拉菜单表单控件
标签组成：
- select标签：下拉菜单整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中
代码：
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>广州</option>
<option value="">深圳</option>
<option value="">曹县</option>
</select>
textarea文本域标签
场景： 在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
- cols：规定了文本域可见宽度
- rows：规定了文本域内可见行数
注意点：
- 右下角可以拖动改变大小
- 实际开发是针对样式效果推荐使用css设置
代码：
<textarea cols="30" rows="10"></textarea>
