科技与灵魂的碰撞
全栈开发之①前端学习（持续更新）
我的学习
全栈开发之①前端学习（持续更新）
我的学习

全栈开发之①前端学习（持续更新）

全栈开发共分八部分，分别是：前端开发基础、移动Web网页开发、JavaScript网页编程、前后端交互、Vue.js项目实战开发、微信小程序、React项目实战、面试指导+试题

一、VSCode的使用

1.VC Code简介

1.1 Visual Studio（简称 VS Code/VSC），由微软推出,其优点有：

  • 比submit开源，比webstorm更轻
  • 智能提醒
  • 自带emmet
  • 自带调试

2.VS Code的使用

  • 放大缩小视图 ctrl + 和 ctrl –
  • 向上复制一行 alt + shift + 上箭头
  • 向下复制一行 alt + shift + 下箭头
  • 当光标点击到某一行时，默认选中全行，可以直接复制剪切
  • 目录管理功能：File—open floder
  • 更改主题：首选项按钮—color Theme
  • 创建HTML主体输入！，并且按下tab

3.VS Code的插件安装

3.1 安装步骤

1.搜索
2.下载安装

3.2 安装插件推荐

名称 作用
Chinese Language中文语言包
Open in Browser右击在浏览器中打开html文件
Auto Rename Tag自动重命名配对的HTML/XML标签
JS-CSS-HTML Formatter每次保存，都会自动而格式化js、css、html代码

二、HTML

1.什么是网页

  • 网页是网站中的一页，通常是HTML格式的文件，通过浏览器来阅读
  • 网站是指因特网上根据一定的规则，使用HTML等制作出来的的网页集合
  • 网页是构成网站的基本元素

2.什么是HTML

  • HTML是指超文本标记语言（Hyper Text Markup Language）
  • 它不是编程语言，而是一种标记语言，需要有一套标记标签（markup tag）

所谓超文本，有两层含义

  • 可以加入动画、图片等元素，超越文本限制
  • 可以从一个文件转跳到另一个文件，超级链接文本

3.常见浏览器内核

浏览器内核
IETrident
firefoxGecko
SafariWebkit
Chrome/OperaBlink
360、UC、QQ、搜狗等Blink、Webkit

4.Web标准

  • 由W3C（万维网联盟）制定，是国际中最著名的标准化组织
  • 使用相同标准，可以避免同一段代码在不同浏览器中显示不同的问题
  • Web由结构、表现、行为构成，也可以说是由HTML、CSS、JS组成
  • Web标准提出的最佳体验方案： 结构、表现、行为 相分离，既把结构写到HTML中，表现写在CSS中，行为写在JavaScript中

5.HTML语法规范

5.1基本语法规范

  • HTML标签是由尖括号包围的关键词，如<html>
  • HTML通常成对存在，如<html></html>,前者为开始标签，后者为就结束标签
  • 极少情况为单标签，如<br>

5.2 标签关系

双标签分为两类：包含关系和并列关系

6.HTML基本结构标签

标签名定义说明
<html></html>HTML标签页面中最大的标签，称为 根标签
<head></head>文档的头部head标签中必须要设置的标签是title
<title></ title > 文档的标题网页标题
<body></ body > 文档的主题所有内容、页面内容
6.1HTML的标签

6.1 DOCTYPE、lang、字符串的作用

<!DOCTYPE HTML> 文档类型声明标签，告诉浏览器采用html5来显示页面

<html lang=“zh-CN”> 告诉浏览器活搜索引擎，这是一个中文网站

<meta charset=”UTF-8″> 必须写，采取UTF-8（万符码）保存文字，不写就会乱码

7.HTML常用标签

7.1标题标签

<h1>-<h6>

单词head的缩写，作为标题使用，依据重要性递减

<h1>我是一级标题</h1>

7.2段落标签

单词paragraph的缩写

<p>这是一个段落</p>

7.3换行标签(单标签)

单词break的缩写

<br />

7.4文本格式化标签

语义标签
加粗<strong></strong>(更推荐)或者<b></b>
倾斜 <em></em>(更推荐)或者<i></i>
删除线 <del></del>(更推荐)或者<s></s>
下划线 <ins></ins>(更推荐)或者<u></u>

7.5<div>和 <span>标签

没有语义，就是一个盒子，用来装内容的

div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：div独占一行，大盒子

span一行可以存在多个，小盒子

7.6图像标签

<img src="图像url" />
属性说明
src图片路径，必须属性
alt替换文本，图像不能显示的文字
title提示文本，鼠标放在图像上，显示的文字
width设置图像的宽度
height设置图像的高度
border设置图像的边框粗细
图像标签的其他属性
<img src="img.jpg" alt="替换文本" title="提示文本" width="500" height="100" border="15">

7.7路径

目录文件夹：普通文件夹，里边存放了做网页所需要的素材

根目录：打开目录文件夹的第一层就是根目录

相对路径：以引用文件所在位置为参考，建立出来的目录路径

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级
下一级路径/ 图像文件位于HTML文件下一级
上一级路径 ../ 图像文件位于HTML文件上一级

绝对路径：指目录下的路径，通常从盘符开始，例如：D:\web\img\logo.png

注意：绝对路径和相对路径的斜杠方向不同！！

7.8超链接标签

<a href="http://simonlu.cn" target="网页打开的方式">超链接</a>

其中，href为必须属性，target有两种类型：_self是当前窗口打开网页、_blank是新窗口打开页面

超链接分类

分类样式
外部链接<a href=”http://www.simonlu.cn”></a>
内部链接<a href=”dendglu.html”></a>
空连接 <a href=”#”></a>
下载链接 <a href=”logo.zip”></a> 后缀名需要是.exe\.zip
网页元素链接 <a href=”dendglu.html”><img src=”img.png”></a>
锚点链接在链接文本中 <a href=”#标签”></a>。在目标位置添加id属性 <h3 id=”标签”></h3>

8.注释和特殊字符

8.1注释

以<!–开头，以–>结尾

8.1特殊字符

三、表格和列表

使用表格，用于展示数据，使得数据规整，可读性好

1.表格标签

1.1基本语法

<table>
  <tr>
   <td>表格中的文字</td>
   ...
   </tr>
   ...
</table>

其中：<table></table>是定义表格的标签

<tr></tr>用于定义表格中的行，需嵌套在 <table></table> 中

<td></td>用于定义表格中的单元格，需嵌套在 <tr></tr> 中

td指的是table data，即单元格内容

图解

1.2表格单元格标签

一般表格单元格位于第一行或者第一列，采用居中和加粗显示

<th>表示表头部分（table head）

<th>姓名</th>

1.3表格属性

实际开发已弃用，采用css来设置，故仅作了解！

属性名属性值描述
alignleft、center、right表格的位置
border1 或者 “”是否有边框，“”为没有边框
cellpadding像素值边缘与其内容之间的空白，默认1像素
cellspacing像素值单元格之间的空白，默认2像素
width像素值或百分比表格的宽度

1.4表格结构标签

为了更好表达表格语义，可以将表格分割成表格头部和表格主体部分

分别为： <thead>表格头部、<tbody>表格主体 

<table>
<thead>
  <tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>小明</td><td>15</td></tr>
<tr><td>玲玲</td><td>18</td></tr>
</tbody>
</table>

1.5合并单元格

跨行合并：rowspan=“行数”，最上侧单元格为目标单元格，写合并代码

跨列合并：colspan=“行数”， 最左侧单元格为目标单元格，写合并代码

步骤：（1）确定跨行还是跨列

（2）找到目标单元格，写合并代码

（3）删除多余单元格

2.列表标签

表格用来显示数据，列表用来布局

可分为：无序列表、有序列表、自定义列表

2.1无序列表

<ul>表示HTML中的无序列表，<li>表示列表项

基本语法格式

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
  • 无序列表的列表项没有顺序之分
  • <ul></ul>中只能嵌套<li></li>
  • <li></li>相当于与一个容器，可以容纳所有容器

2.2有序列表

<ol>表示HTML中的无序列表，<li>表示列表项

基本语法格式 

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

  • 有序列表会带有自己的样式属性

  • <ol></ol>中只能嵌套<li></li>

  • <li></li>相当于与一个容器，可以容纳所有容器

    • 2.3自定义列表

    <dl>用于定义描述列表，与<dl>（定义项目\名字）、<dd>（描述项目的名字）一起使用

    基本语法格式

    <dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>微信公众号</dd>
</dl>

    <dl></dl>中只能包含<dt></dt>

    <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

    四、HTML表单

    使用表单是为了收集用户信息

    1.表单组成

    一个完整的表单分为：表单域，表单空间（表单元素），提示信息

    其中，<form>用作定义表单域，实现用户信息的收集和传递，会把他范围内的表单元素信息提交给服务器

    <form action="url地址" method="提交方式" name="表单域名称" >
各种表单控件
</form>
    属性作用
    action用于指定接受并处理表单函数的服务器程序的url地址
    methodget\post ,提交表单数据的方式
    name表单的名字
    常用属性

    2.表单元素

    2.1 <input>表单元素

    <input type="" name="" value="" checked="" maxlength="">
    属性值描述
    button可点击按钮，多数情况用于通过JavaScript启动脚本
    checkbox复选框
    file定义输入字段和“浏览”按钮，供文件上传
    hidden定义隐藏的输入字段
    image定义图像形式的提交按钮
    password定义密码字段，该字段中的字符被掩码
    radio定义单选按钮
    reset定义重置按钮，会清除表单中的所有数据
    submit定义提交按钮，会把表单数据发送到服务器
    text定义单行的输入字段，可在其中输入文本
    type的种类

    属性属性值描述
    name自定义定义input元素的名称
    value自定义规定input元素的值
    checkedchecked规定input元素首次加载时应当被选中
    maxlength正整数规定输入字段中的字符最大长度
    其他属性

    3.<lable>标签

    <lable>用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点转到对应的表达那元素上，用来增加用户体验

    <lable for="sex">男</lable>
<input type="radio" name="sex" id="sex">

    <lable>属性里的for的名必须和id名相同

    4.<select>表单元素

    下拉列表

    <select>
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
</select>

    5.<textarea>表单元素

    <textarea rows="3" cols="20">
文本内容
</textarea>

    6.学会查询

    W3C:https://www.w3school.com.cn/

    MDN：https://developer.mozilla.org/zh-CN/

    五、CSS

    1.CSS简介

    1.1 什么是CSS？

    CSS是层叠样式表（cascading style sheets）,一种标记语言，主要用于设置页面中的文本内容、图片的外形、版面的布局和外观显示样式，使页面布局更简单

    • HTML主要做结构，显示元素内容
    • CSS美化HTML，布局网页
    • CSS最大价值在于：由HTML专注去做结构呈现，样式交给CSS，及HTML与CSS分离

    1.2 CSS语法规范

    基本语法：选择器{属性：值；}

    • 属性和属性值以键值对形式出现
    • 属性是对指定的对象设置的属性

    1.3 CSS代码风格

    样式格式书写：展开风格

    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>

    样式大小写：全部使用小写

    空格规范：①“p”与“{}”之间留空格

    ② “：”与”属性值“之间留空格

    2.CSS基础选择器

    选择器就是根据不同需求把不同的标签选出来，简而言之，就是选择标签的

    2.1 选择器分类

    分为 基础选择器 和 符合选择器 两大类

    • 基础选择器是由单个选择器组成的
    • 基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器

    2.2基础选择器

    标签选择器

    用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式

    基本语法

        <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>

    类选择器

    想要差异化选择不同标签，单独选一个或者某几个标签，可以使用类选择器

    类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点”.“显示

    口诀：样式点（.）定义，结构类（class）调用，一个或多个，开发最常用，可被调用多次

    <style>

        .red {
            color: red;
        }
    </style>
----------------------------
<ul>
        <li  class="red">coco</li>
        <li>xoxo</li>
        <li>elio</li>
        <li>simon</li>
    </ul>

    特殊情况_多类名

    各个类名之间用空格分开，这个标签就分别具有这些类名的样式，从而节省CSS代码，统一修改也十分方便

    <ul>
        <li  class="red box">coco</li>
        <li>xoxo</li>
        <li>elio</li>
        <li>simon</li>
    </ul>

    id选择器

    口诀;样式#定义，结构id调用，只能调用一次！

    <style>
        #red {
            color: red;
        }
    </style>
----------------------------
<ul>
        <li  id="red">coco</li>
        <li>xoxo</li>
        <li>elio</li>
        <li>simon</li>
    </ul>

    通配符选择器

    选取页面中的所有元素并使用样式

    <style>
* {
            color: red;
        }
    </style>
----------------------------
<ul>
        <li>coco</li>
    </ul>

    2.CSS样式

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用*标注