01-前端基础知识
网页的基本组成
网页由图片、链接、文字、声音、视频等元素组成
什么是HTML?
是超文本标记语言（Hyper text markup language）
常用的浏览器及其内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident [ˈtraɪdnt] |
| Firefox | Gecko [ˈgekəʊ] |
| Safari | Webkit |
| Chrome | Blink |
| Edge | Chromium 谷歌浏览器之前用的内核 |
| Opera | Blink |
WEB标准的三大组成部分
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构层 | HTML | 规定网页上显示什么内容 |
| 表现层 | CSS | 规定网页上的内容的样式，长什么样子 |
| 行为层 | JavaScript | 规定网页上的内容具备什么行为，负责页面交互 |
HTML骨架标签
<html>
<head>
<title>这是第1个网页</title>
</head>
<body>
</body>
</html>
标签的分类
-
双标签
双标签特点:
- 有开始和结束标签.
- 开始标签用<>括起来
- 结束标签用</>括起来
- 中间可以包含其他的标签
像我们学习过的html标签、head标签、body标签、title标签、p标签都是双标签.
-
单标签
单标签的特点：
- 只有开始标签
- 不能包含其他标签
像我们学习过的meta标签、hr标签就是单标签.
标签之间的关系
-
嵌套关系（父子关系）
当A标签中包含B标签时，他们之间的关系就叫做嵌套关系或者父子关系.
<html>
<head>
</head>
</html>
html标签和head标签就是嵌套关系，html标签被称为父标签，head标签被称为子标签.
- 并列关系(兄弟关系)
<html>
<head>
</head>
<body>
</body>
</html>
head标签与body标签就是兄弟关系。h1标签和hr标签还有p标签就是兄弟关系
兄弟关系的标签建议保持同样的缩进，以便提升代码的阅读性.
快捷键
- VSCode中路径的快捷操作
- 同级或者下级： ./ 之后选择即可.
- 上级目录： ../之后选择即可.
- VSCode基本快捷键
-
快速生成标签：英文 + tab
-
保存文件：ctrl + s
- 写完文件之后务必需要保存文件，否则网页无变化
- 可以设置自动保存省去每次保存的麻烦
-
快速查看网页效果：右击 → Open in Default Browser
- 快捷键：alt+ b
- 注意：必须安装了open in browser 插件
-
快速生成结构标签：! + tab
-
注释快捷键：ctrl + /、
-
快捷复制当前行:option+shift+⬆️ / ⬇️
-
快速设置多个光标:
-
option+鼠标点击
-
option+鼠标滑动
-
8.选定多个相同单词:command+d
9.全局替换某些单词:command+g4
02-文本标签
标题标签
h系列标签，用来表示一篇文章的标题.
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
浏览器显示效果：
-
h系列标签特点：
- 字体h1最大，依次变小， h6最小.
- 字体加粗显示
- 每一个h标签独占一行.
h1标签一般情况下，在一个html文档中最多用一次，表示网页中最重要的内容，比如文章的标题或者网页的logo
段落标签
<p></p>
段落标签为p标签，用来表示一篇文章的一个段落.
<html>
<head>
<meta charset="UTF-8">
<title>程序员</title>
</head>
<body>
<h1>背影</h1>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p>
<p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
<p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p>
</body>
</html>
-
段落标签特点：
- 独占一行, 如果内容一行占不下，会另外起1行.
- 段落之间存在间隙
换行标签
<br>
换行标签br，这个标签不需要包裹内容，他只有开始没有结束标签。表示强制换行。
<html>
<head>
<meta charset="UTF-8">
<title>wyy</title>
</head>
<body>
背影<br>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。
</body>
</html>
水平线标签
<hr>
水平线标签hr，这个标签不需要包裹内容，他只有开始没有结束标签。表示产生一条水平线，用来分隔不同的主题。
文本格式化标签
| 标签 | 显示效果 | 推荐使用 |
|---|---|---|
| b 或者 strong | 被包裹的文本加粗显示 | strong |
| i 或者em | 被包裹的文本斜体显示 | em |
| s或者 del | del | |
| u或者ins | 被包裹的文字以下划线显示 | ins |
特殊符号
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| ®️ | 注册商标 | ®； |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| ✖️ | 乘 | × |
| ➗ | 除 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
有一些文字或者符号，在html中代表特殊的意义，无法原样显示出来.
如果就要显示，那么就是使用它对应的字符实体.
lt: less than
gt: grater than
03-媒体标签
图片标签
img标签的作用用于在网页上显示一张图片
<img src="images/logo.png" title="wyy" alt="图片暂时无法显示" width="500" height="300" border="1"/>
<img src="" alt=""/>
| 属性名 | 属性值 | 作用详解 |
|---|---|---|
| src | url或者图片本站路径 | 指定要显示的图片的路径 |
| title | 文本 | 鼠标悬停时显示的内容 |
| alt | 文本 | 图片无法显示时显示的内容（建议这个属性必须） |
| width | 像素 | 设置显示的图形宽度 默认就是图片本身的宽度 |
| height | 像素 | 设置显示的图形高度 默认就是图片本身的高度 |
| border | 像素 | 设置显示的图片边框粗细 默认就是图片没有边框（一般在css设置） |
音频标签
音频标签 audio 用于在网页中播放音乐.
<audio src="./music.mp3" controls autoplay loop></audio>
-
常见属性：
注意： 音频标签目前支持三种格式：MP3、Wav、Ogg chrome 不支持自动播放
视频标签
视频标签video 用于在网页中播放视频
<video src="./video.mp4" controls autoplay muted loop></video>
常见属性
muted. 静音播放
注意： 音频标签目前支持三种格式：MP3、Wav、Ogg
chrome 只支持静音自动播放
文件路径
绝对路径
一个文件的完整路径，从根目录(盘符)开始，目录下的绝对位置，直接到达目标位置.
<img src="C:\USERS\APPLE\DESKTOP\IMG.jpg" alt="">
<img src="http://www.4399.com/logo.png" alt="">
弊端：不利于打包发送
相对路径
相对于当前文件的路径.
- 同一级目录：图像文件位于当前文件的同一级目录
<img src="baidu.gif" alt="">
- 下一级目录：图像位于当前文件的下一级目录
<img src="images/baidu.gif" alt="">
- 上一级目录：图像位于当前文件的上一级目录
<img src="../baidu.gif" alt="">
05-超链接
外部链接
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a:全称anchor锚
href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，拥有超链接功能
target：用于指定链接页面的打开方式，其中_self在当前页面打开为默认值,_blank新窗口打开方式
<a href="http:www.qq.com" target="_blank">腾讯</a>
内部链接
网站内部页面之间的相互链接，直接链接内部页面名称即可
<a href="index.html" target="_blank">首页</a>
空链接
如果当前没有确定链接目标时
<a href="#" >首页</a>
下载链接
如果href里面地址是一个文件或压缩包，会直接下载
网页元素链接
在网页中的各种元素。文本、图片、表格、音频、视频都可加超链接。
<a href="index.html" ><img src="images/logo.png" /></a>
锚点链接
我们点击链接，可以快速定位到页面中的某个位置
1、在链接文本的href属性中，设置属性值为#名字的形式
2、找到目标位置标签，里面添加一个id属性=刚才的名字
<a href="#live">个人生活</a>
<h3 id="live">个人生活</h3>
06-列表标签
- 列表标签的分类
1、无序列表：展示一组没有顺序的数据
2、有序列表：展示一组有顺序的数据
3、自定列表：一般情况下，用来做网页的底部导航
ol > order list
ul > unorder list
li > list item
无序列表
无序列表： 表示一组无顺序之分的数据，如歌曲列表
<ul>
<li></li>
<li></li>
</ul>
使用注意：
- ul标签中只允许包含li标签.
- li标签中可以包含其它内容，只要业务意义上说的明白.
<h1>我最喜爱的歌曲</h1>
<ul>
<li>红梅赞</li>
<li>小小竹排江中游</li>
<li>英雄赞歌</li>
<li>映山红</li>
<li>唱支山歌给党听</li>
</ul>
有序列表
表示一组有顺序之分的数据，如排行榜.
<ol>
<li>
</li>
</ol>
语法：
使用ol标签，表示一个有序列表.
在ol标签内部，使用li标签表示每一个数据.
<h1>微博热搜</h1>
<ol>
<li>警方通报女生高考后遭村民杀害</li>
<li>演员袁冰妍公司逃税被罚近百万</li>
<li>中国空间站航天员首次出舱1周年</li>
<li>唐山警方通报小树林扎伤事件</li>
<li>大一女生给妈妈做饭被烧成重伤</li>
</ol>
显示效果:
- 每一个li标签单独一行显示.
- 每1项数据前面默认有1个序号
使用注意：
- ol标签中只允许包含li标签.
- li标签中可以包含其它内容，只要业务意义上说的明白.
自定义列表
自定义列表一般用在网页的底部导航，表示主题下面有多个子数据.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
语法标签
dl 标签表示自定义列表的整体. 最外层是1个dl标签.
dt 标签表示自定义列表的主题
dd 标签表示主题的每一项内容. 表示主题下的每一个分类.
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dd>公益基金会</dd>
</dl>
默认显示效果：
每一个子项会相对于主题进行缩进
注意事项：
- dl 下面只能有dt和dd
- dt和dd可以包含任意内容.
07-表格
表格标签
<table><!-- table标签定义一个表格 -->
<caption>
<h1>黑马班级信息统计表</h1><!-- caption标签定义表格的主题名字 -->
</caption>
<thead> <!--thead标签表示表格的头部 -->
<tr><!-- tr标签定义了一行 -->
<th></th> <!--th标签表示表头单元格标签 -->
</tr>
</thead>
<tbody><!--tbody标签表示表格的身体 -->
<tr>
<td></td> <!--td标签表示在第1行中定义了1个单元格 -->
<td></td>
</tr>
</tbody>
<tfoot><!--tfoot标签表示表格的尾部 -->
<tr>
<td></td>
</tr>
</tfoot>
</table>
table标签表示定义一个表格.tr标签在table标签中表示定义了一行.td标签在tr标签中表示定义了一个单元格.- 最终,我们将数据存储在
td单元格中.
案例展示：班级信息统计表
<table>
<tr>
<td>序号</td>
<td>班级名称</td>
<td>班级类型</td>
<td>班级人数</td>
<td>开班时间</td>
<td>教室</td>
<td>班主任</td>
</tr>
<tr>
<td>1</td>
<td>01期</td>
<td>基础班</td>
<td>109</td>
<td>2016/9/12</td>
<td>1301</td>
<td>小花老师</td>
</tr>
<tr>
<td>2</td>
<td>02期</td>
<td>基础班</td>
<td>100</td>
<td>2016/10/6</td>
<td>1303</td>
<td>小李老师</td>
</tr>
<tr>
<td>3</td>
<td>03期</td>
<td>基础班</td>
<td>98</td>
<td>2016/10/1</td>
<td>1308</td>
<td>小隆老师</td>
</tr>
<tr>
<td>4</td>
<td>04期</td>
<td>基础班</td>
<td>99</td>
<td>2016/11/12</td>
<td>1314</td>
<td>小泽老师</td>
</tr>
</table>
展示效果
-
表格的标题
caption 标签专门用来设置表格的标题. 会显示在表格的正上方.
-
th是专门为表头单元格设计的标签.
一般情况下，我们使用th来表示表头单元格.
效果： 加粗 + 居中
-
thead: 专门用来包裹表格的表头.
tbody: 用来包裹表格的主体.
tfoot: 用来包裹表格的尾部
这3个标签不会影响显示的效果，让我们的代码更加具有结构性，方便我们阅读代码.
表格属性
<table align="center" width="500" height="249" border="1" cellpadding="0" cellspacing="0">
</table>
table标签的属性
-
border 为表格设置边框.
值是1个数字，
这样子看起来，就更像是一个表格了。
-
cellspacing 属性
设置单元格与单元格之间的距离.
如果设置为0，那么单元格的边就重合，
看起来就没有间隔。
更像是1个表格.
-
cellpadding属性
设置单元格的内容和单元格的间距.
-
width
height
设置表格的宽高。
-
align
特殊
align属性可以用在table标签上: 设置整个表格的对齐方式. left - 表格靠左 center - 表格居中显示 right - 表格靠右显示
align属性也可以用在tr标签上: 设置这1行的单元格的内容的对齐方式.
align属性也可以单独用在td标签上: 只为这1个单元格的内容设置对齐方式.
合并单元格
-
什么是单元格的跨列?
一个单元格向右占据多个位置.
单元格只能占据它右边的单元格的位置.
-
如何实现单元格的跨列操作呢?
删掉被占的单元格.
-
为左边单元格设置colspan属性，表示这个单元格一共要占几个位置.
<table border="1" cellspacing="0" cellpadding="10" align="center" width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3">7</td>
<!-- <td>8</td>
<td>9</td> -->
</tr>
</table>
-
什么是单元格的跨列?
单元格向右占据其它单元格的位置.
删掉被占的单元格.
为左边的单元格设置colspan属性.
-
什么是单元格的跨行?
单元格向下占据其它单元格的位置.
删掉被占的单元格.
给上边的单元格设置rowspan属性.
-
只能上边的单元格占据下边的单元格.
<table border="1" cellspacing="0" cellpadding="10" align="center" width="300">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<!-- <td>6</td> -->
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
08-表单元素
表单域
form会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"></form>
常用属性:
| 属性 | 定义 | 描述 |
|---|---|---|
| action | url地址 | 用于指定接受并处理表单数据 |
| method | get/post | 用于设置表单数据的提交方式,其取值为get/post |
| name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
input表单元素—用于收集用户信息
<input type="属性值">
input 为单标签
type属性
| 属性值 | 描述 | |
| text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20字符 | |
| placeholder | 占位符,提示文本 | |
| button | 定义可点击按钮(多数情况下,通过javascript启动脚本),通过value属性,设置按钮的文本 | 图像的按钮,即使用Botton标签实现 |
| checkbox | 定义复选框 | |
| file | 定义输入字段和浏览按钮,供文件上传,默认单文件上传. 加个multiple就可以选择多个文件上传 | |
| hidden | 定义隐藏的输入字段 | |
| image | 定义图像形式的提交按钮 | |
| password | 定义密码字段,该字段中的字符被掩码 | |
| radio | 定义单选按钮 | |
| reset | 定义重置按钮,重置按钮会清除表单中的所有数据 | |
| submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
属性
| 属性 | 定义 | 描述 | |
|---|---|---|---|
| name | 由用户定义 | 定义input元素的名称 | 单、复选按钮要有相同的name值 |
| value | 由用户定义 | 规定input元素的值 | 每个表单都有的属性 |
| checked | 规定词input元素首次加载时应被选中 | (默认选中) | |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
-
input标签. 是1个单标签.
它有1个type属性，这个属性的取值不同，那么在页面上就会展示不同的元素。
-
文本输入框:
input标签的type属性设置为text。
那么这就是1个文本输入框.
placeholder属性： 设置文本框的提示文本.
maxlength: 设置文本框最多可以输入多少个字符.
-
密码框
input标签的type属性设置为password。
输入的文本就会以密文的方式显示。
-
单选按钮.
input标签的type属性设置为radio
让多个单选按钮之间互斥.
为这几个单选按钮设置相同的name属性.
希望点文字的时候，就把和其关联的单选按钮点中.
最简单的方式：
使用1个label双标签，将单选按钮和文本包起来.
稍微复杂的方式
用label标签把文字包起来.
为单选按钮设置1个id属性，值任意(不能以数字开头).
为label标签设置1个for属性，值为单选按钮的id属性的值.
设置单选按钮默认被选中：
为这个单选按钮设置属性. checked
-
多选框/复选框
input标签的type属性设置为checkbox
将文本和复选框关联起来. label
默认选中: checked
-
文件选择框
input标签的type属性设置为file
multiple属性，允许用户选择多个文件.
-
提交按钮.
input标签的type属性设置为submit
点击这个按钮，就可以将用户输入的数据提交到服务器.
注意： 如果要生效，就需要使用1个form标签 将所有表单元素包围起来.
-
重置按钮
input标签的type属性设置为reset
点击这个按钮，将form包裹的表单元素进行重置.
-
普通按钮.
input标签的type属性设置为button
通过value属性，设置按钮的文本.
这个时候，这个按钮点击是不会有任何事情发生的。
配合js才可以实现点击按钮，做事情.
-
button标签.
在页面上显示1个按钮.
这是1个双标签。
如果包裹的是文本，那么按钮上就是这个文本.
如果包裹的是1个图片，那么按钮上就会显示这个图片.
lable元素-绑定表单元素
用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将光标转到对应的表单元素上,增加用户体验.
性别:
<input type="radio" name="sex" id="nan" checked><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
注意⚠️:
for属性要与id属性相同
select下拉表单元素
所在城市:
<select name="city" id="">
<option value="choose">请选择</option>
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>
注意:selected—即此为默认选项
如若想要分类,可以使用
<optgroup label="分组名称">
<option></option>
<option></option>
</optgroup>
-
下拉列表: 点击之后，会弹出1个列表，然后用户从列表中选择一个数据.
-
语法:
select标签. 最外层， 表示这是1个下拉列表.
option 每一个数据就使用1个option标签包围起来.
-
默认情况下，是选中第1个option,
如果要实现默认是 请选择
那么就把请选择作为第1个option
-
selected可以设置默认选中的项.
-
-
可以用optgroup为option分组，提升用户的体验.
textarea文本域标签
用于定义多行文本输入的控件
留言板、评论
个人介绍:
<textarea name="个人介绍" id="" cols="100" rows="10"></textarea>
cols=“每行中的字符数”
row=“显示的行数”
我们在实际中不使用,用css改变大小
textarea是一个双标签，开始和结束标签要写在同一行。 否则就会出现点击文本域的时候，光标不会在最顶上。
-
文本域.
输入信息： 文本框 密码框
选择类: 单选 多选 文件选择 下拉列表
希望用户输入比较多的文字.
textarea
-
属性
rows 显示的行数 输入的时候如果超出了，会有滚动条.
cols 显示的列数
控制的文本域的大小.
-
textarea是1个双标签，开始和结束标签要写在一行。
否则就会出现点击文本域的时候，光标不会在最顶上.
botton标签
<form action="url地址" method="提交方式" name="表单域名称">
<button type="submit">提交</button>
<br>
<button type="reset">重置</button>
<br>
<button type="button"><img src="./作业/images/logo_baidu.jpg"></button>
<br>
</form>
案例
<!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>Document</title>
</head>
<body>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
<form action="">
性别:<input type="radio" name="sex" id="nan" checked><label for="nan"><img src="./images/man.jpg" >
男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="./images/women.jpg" alt="">
女</label>
<br><br>
出生年月:
<select>
<option>请选择年</option>
<option>2000</option>
<option>1999</option>
<option selected>2001</option>
<option>2002</option>
<option>1998</option>
</select>
<select>
<option>请选择月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>请选择日</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br><br>
所在地区:
<input type="text" placeholder="奋斗者之家" maclength="6">
<br><br>
婚姻状况:<input type="radio" name="marry" checked><label>单身</label>
<input type="radio" name="marry"><label>未婚</label>
<input type="radio" name="marry"><label>缺爱</label>
<br><br>
学历:
<input type="text" placeholder="小学">
<br><br>
月薪:
<input type="text" placeholder="1000-100000">
<br><br>
手机号:
<input type="text">
<br><br>
昵称:
<input type="text">
<br><br>
喜欢的类型:
<input type="checkbox" name="like" >可爱
<input type="checkbox" name="like" >性感
<input type="checkbox" name="like" >御姐
<input type="checkbox" name="like" >小鲜肉
<input type="checkbox" name="like" >妩媚
<input type="checkbox" name="like" >柔美
<input type="checkbox" name="like" >萝莉
<br><br>
自我介绍:
<textarea name="自我介绍" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>
年满18岁,单身
</li>
<li>
抱着严肃的态度
</li>
<li>
真诚寻找另一半
</li>
</ul>
<input type="checkbox" checked>我同意注册条款和会员加入标准
<br><br>
<input type="submit" >
<input type="reset" >
</form>
</body>
</html>
09-盒子标签
无语义化的div与span
> 多用于网页布局，配合CSS使用.
div独占一行。
span不独占一行
