学习参考资料
因为实习需要,故从今天开始极限复习前端基本内容。在此记录学习过程。学习完前端之后再更新数据库的内容。
学习的资料依旧是去B站找尚硅谷的视频。
前端一些背景内容
1.学习前端首先从网页制作开始学习。网页由结构、表现和行为组成,对应由HTML、CSS和JS去实现。
2.一般用VSCode去编写前端代码。
VSCode的一些快捷键和插件:
插件liveserver,则可实现自动刷新网页的功能。
注释快捷键:ctrl+/
快速删除某一行内容:ctrl+shift+k
复制粘贴多行内容:shift+alt+向下箭头
!加回车:快速生成html框架。
HTML
html为超文本标记语言。
1.HTML的基本构成与基本框架
基本构成:标签+属性。
1.1HTML的标签
注意:
1.标签包括双标签和单标签。
2.标签既可以并列也可以嵌套。
1.2HTML的属性
属性是用于给标签提供附加信息。
注意:
一1.个标签可以有多个不同的属性。
2.不同的标签支持的属性不同。
1.3HTML的基本结构
<!DOCTYPE html>
<!-- H5的文档声明 -->
<html lang="en">
<!-- 设置语言 en:英文,zh-CN中国大陆 -->
<head>
<meta charset="UTF-8">
<!-- 告诉浏览器解码方式 默认是utf-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- body内写的是显示在页面上的内容 -->
</body>
</html>
2.标签
2.0标签的一些性质
2.0.1语义化标签:即用特定的标签表达特定的含有。标签呈现出来的默认效果不重要(因为后期可以用CSS调整其样式),重要的是语义。
2.0.2块级元素和行内元素
2.1排版标签
标签:h1~h6标题、p段落、div包裹的大盒子。
注意:
1.h1~h6不能相互嵌套
2.p内不能有h1~h6、p、div标签。
2.2文本标签
标签:em着重阅读的内容、strong更着重阅读的内容、span包裹短语小盒子。
2.3图片标签
标签:img
属性:src图片路径;alt图片描述(当图片无法展示时,有些浏览器会呈现alt值)。
路径一般写相对路径,相对路径的写法如下。
2.4超链接
标签:a(ps:a要和href结合才是超链接,a和name结合是锚点)
属性:
href:要跳转的具体位置。
target:跳转时如何打开网页。_self:默认,在本页签中打开。_blank:在新页签中打开。
<a href="https://baidu.com/" target="_blank">百度</a>
注意:1.代码中多个空格、多个回车,都会被浏览器解析成一个空格。
2.a标签虽然为行内元素。但是它可以包裹除它自身之外的任何元素。
应用:
1.跳转页面。直接在href中写页面地址即可。
2.跳转文件。可以直接跳转的文件类型:jpg、mp4、gif、pdf;浏览器不能直接打开,点击会自动触发下载的文件:zip(强制触发下载:使用download属性)
<a href="./resource/我的自拍.jpg" download="">自拍</a>
3.跳转锚点
锚点:网页中的一个标记点。
设置锚点:a标签配合name属性或者其他标签配合id属性。
<p id="htl">htl</p>
跳转锚点
<a href="#htl">看htl</a>
2.5列表
有序列表
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关闭</li>
</ol>
无序列表
<ul>
<li>黑龙江</li>
<li>吉林</li>
<li>辽宁</li>
</ul>
自定义列表
<h2>如何更好的学习?</h2>
<dl>
<!-- dt术语的名称 -->
<dt>做好笔记</dt>
<!-- dd对术语的描述 -->
<dd>做笔记是复习的抓手</dd>
<dt>多加练习</dt>
<dd>练习能更好的巩固知识</dd>
</dl>
注意:
1.无论是ol还是ul,最好让子元素都是li。若需要写成其他元素,可以用li去包裹。
2.不要单独使用li
3.列表可以嵌套。
<ul>
<li>
<span>黑龙江</span>
<ul>
<li>冰雪大世界</li>
<li>森林公园</li>
</ul>
</li>
<li>吉林</li>
<li>辽宁</li>
</ul>
2.6表格
基本结构
<table>
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
tr:每一行
th、td:每一个单元格(表格头部用th,表格主体、脚注用td)
跨行和跨列
首先写出行数和列数(有多少行和列是看最小的单元数)。
然后根据需求去合并对应的项。
指定要跨的列数:colspan属性;
指定要跨的行数:rowspan属性
2.7表单
标签:form表单、input输入框、button按钮。
表单基本结构
<!-- 通过表单获得搜索结果https://www.baidu.com/s -->
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
<!-- from中的属性:
action:用于指定表单的提交地址
target:用于控制表单提交后如何打开页面。_blank:在新窗口打开,_self在本窗口打开
method:用于控制表单的提交方式(有get、post等)
-->
表单常用控件:
1.文本输入框
<input type="text" name="account" value="zhangsan" maxlength="10">
name:数据的名称
value:输入框的默认输入值
maxlength:输入框最大的输入长度
2.密码输入框
密码:<input type="password" name="pwd">
name:数据的名称
value:输入框的默认输入值(一般不用)
3.单选按钮
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
name:数据的名称。想要单选效果,多个radio的name属性值必须保持一致。
value:提交的数据值。
checked:让该单选按钮默认选中。
4.多选按钮
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
name:数据的名称。
value:提交的数据值。
checked:让该单选按钮默认选中。
5.隐藏域
用户不可见的一个输入区域。作用是提交表单时,携带一些固定的数据。
<input type="hidden" name="tag" value="100">
6.确认按钮
第一种写法
<button>确认</button>
第二种写法
<input type="submit" value="确认">
button标签的type属性默认是submit。
button不要指定name。
input标签编写的按钮,使用value属性指定按钮文字。
7.重置按钮
第一种写法
<button type="reset">重置</button>
第二种写法
<input type="reset" value="点我重置">
button不要指定name。
input标签编写的按钮,使用value属性指定按钮文字。
8.普通按钮
<button type="button">普通按钮</button>
普通按钮可以和js和ajax结合实现各种功能。
9.文本框
<textarea name="other" cols="20" rows="3"></textarea>
10.下拉框
<select name="place">
<option value="001">广西</option>
<option value="002">广东</option>
<option value="003">海南</option>
</select>
name:指定数据的名称
option中的value:有value时提交表单时提交的是value值;没有value时提交表单提交的是option中间的值(建议设置value)
option中selected:默认选中的值。
11.label标签
可以实现表单控件相关联。关联之后点击文字,与之对应的表单控件就会获取焦点。
写法:把表单控件套在label标签内。
<label>
密码:<input type="text" name="pwd">
</label>
2.8框架标签
标签:iframe
应用:
1.利用iframe能嵌入网页、其他内容(用法和超链接类似)
2.能与超链接配合使用,用target的值相同来联系。
<a href="https://www.taobao.com" target="tb">淘宝</a>
<br>
<iframe name="tb" frameboder="0" width="900" height="300"></iframe>
点击超链接后的效果如下。
3.能与表单配合使用。和与超链接配合使用方法同。
<form action="https://so.toutiao.com/search" target="tb">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
<iframe name="tb" frameboder="0" width="900" height="300"></iframe>
2.9其他标签
换行标签:<br>
分割线标签:<hr>
按原文显示标签:<pre></pre>