Web前端初步认知

Web前端说白了就说做网页的，可以快速入门及学习。

Web简介

首先，明白前端与网页的关系，前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容；而网页是在浏览器中呈现内容的文档或页面。

通常，网页使用HTML、CSS以及JavaScrip（简称JS）组成。

HTML：定义了我们这个页面的结果和内容，包括文本、图像、链接等等

CSS：定义页面的样式和布局

JS：用于添加交互性和动态功能作用。

搭建环境

接下来，安装前端的开发环境：VSCode

在VSCode下载三个插件：HTML CSS Support、Live Server(实时预览页面的变化)和Auto Rename Tag。

HTML

HTML通过一系列的标签（也称为元素）来定义文本、图像、链接等等。HTML表签是由尖括号<>包围的关键字。

表签通常成对出现，包括双标签，内容位于这两个标签之间。

除了双标签，也存在单标签。

区别：单标签用于没有内容的元素，双标签用于有内容的元素。

在空白的html文档中，直接输入一个感叹号，按下Tab键，就可以直接生成我们所需的所有标签。

常用文本标签

1.标题标签<h>

标题标签共6级。

 2.段落标签<p>

<b></b>:字体加粗

<i></i>:斜体

<u></u>:下划线

<s></s>:删除线

3.无序列表<ul>和有序列表<ol>

无序列表和有序列表用法相同，表示略有差别。

4.表格标签<table>

tr:table row,表格行

td:table data,表格数据

th:table header,表格标题

HTML标签属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。

<br> ：换行

<hr> ：水平分割线

1.a标签

<a href="百度一下，你就知道 (baidu.com)"target="_blank">这是第二个超链接</a>

其中，traget的属性是定义链接的打开方式,共有4个属性。

1. _self:默认值，表示链接在当前窗口打开；

2. _blank:这个链接在新的窗口打开；

3. _parent:链接在父窗口或父框架打开；

4. _top:链接在顶层窗口或者顶层框架打开。

2.img标签

<img src="pic.jpg" alt="该图片无法显示" width="300" height="200">  

src:图像的路径（相对路径、绝对路径、URL）  ；

alt：如果图像无法加载，网页就显示alt属性中指定的文本；

width和height可以设置图片的高度和宽度，调整图片的大小。

块元素与行内元素

1.块元素（block）

块级元素通常用于组织和布局页面的主要结构和内容，例如：段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

可以包含其他块级元素和行内元素。

常见的块级元素包括：<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<table>、<form>等。

例：

div标签用于创建一个包含其它HTML元素的容器块，没有任何语义，经常用于创建页面的布局结构，比如创建导航栏、页眉、内容区域以及页脚。

如果在创建之前就确定div标签有哪些类，使用.+类名+Tab即可完成创建。

div标签初始附带一个id的话，使用#+id名+Tab即可完成创建。

 2.行内元素（inline）

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如：超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需要的宽度，而不是整行的宽度。

行内元素不能包含块级元素，但可以包含其他行内元素。

常见的行内元素包括<span>、<a>、<strong>、<em>、<img>、<br>、<input>等

例：

span标签：把一小部分文本包装起来，以便于对他们使用样式、CSS或JS行为，内联样式化文本。

HTML表单

表单中的标签<form>，form标签是表单的容器

<form>标签最常用的标签就是input标签，input最重要的属性是type（默认值为text），type规定了input元素的类型

input的其它属性有placeholder、value

placeholder：给用户填写字段时的提示（用户输入字段后消失）

value：给用户填写字段时的文字（用户输入字段后不会消失）

label标签，仅限于和input对应使用，专门为input元素做标记的标签

label标签中for属性可以把label标签绑定到input元素，label中的for属性一般与input中的id对应。

密码有个单独的类别：password，非明文显示，将type改为password即可

input标签可以单选，将type改为radio，加一个name属性，属性一致，变成单选效果

多选效果只需将type改为checkbox。

<input type="submit" value="上传">，不想叫做提交，也可以用value设置名

<form action="#"></form>，action的属性值表示：我们点击提交的时候，向何处发送数据，action的属性值是URL，需要后端提供给我们的API