前端DAY1-CSDN博客

本文链接：https://blog.csdn.net/weixin_45982587/article/details/135662303

学习参考资料

因为实习需要，故从今天开始极限复习前端基本内容。在此记录学习过程。学习完前端之后再更新数据库的内容。

学习的资料依旧是去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>