一个真正 0 基础小白学习前端开发的心路历程

摘要：真正的0基础小白学习前端开发的心路历程。

距离第一阶段的结束敲响了末尾的声音，抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪浅呢？废话不多说上干货。

一、第一阶段html知识都有啥子？

前言

我们介绍了什么是html？w3c？还有html5？以及基础的计算机网络知识？

1：web是啥？

WEB的发展历史:Internet叫做互联网，美国国防局高级研究计划局ArpA建设了军用网叫做‘阿帕网’，于1969年正式启用。

2： w3c是干啥的？

W3C的成立 1994年10月 Tim berner3-lee 在麻省理工学院创立了word wide web conscortium 中文为 万维网联盟 联盟简称为w3c

W3C最重要的工作是发展web规范，描述了web 的通信协议、比如 html和xhtml

www是word wide web 的缩写 也可以写成w3 中文名万维网 是集文本、声音、图像、视频等多媒体信息于 一身的全球信息资源网络，万维网的呈现形式是Internet。

3：了解前端关于网络的知识以及协议？

网站 Website ，人们可以通过网站发布自己想要公开的咨询或者利用网站提供相关网络的服务。

网址:在浏览器中输入网站的地址就可以打开想要访问的网站，那么网站的地址我们称之为url 中文名为统一资源定位符俗称网址。

url格式:协议://主机地址+目录路径+参数

http：超文本传输协议 从万维网服务器传输文本到本地浏览器的传输协议

https实在http基础上增加的更安全的协议

ftp协议：文件传输协议 可以通过ftp访问服务器上的文件

file协议 主要用于访问本地计算机中的文件

二、html的发展史以及基础标签？

Html又叫超文本标记语言，用来构建网页的一种标记语言

Html的历史：

• 1993年由互联网工程工作小组 发布工作草案

• 1995年发布html2.0版本

• 1997年12月18日由w3c发布的html3.2版本

• 1999年由w3c发布html4.01版本

• 2000年由w3c发布xhtml1。0版本 她是一种严格的html代码

Xhtml时后可扩展的标记语言 是一种更严格 纯净的html语言

Html5中新增加了很多语义化标签 不同的html标签代表了不同网页的内容

什么是元素？

Html是一系列标签组成的 每个标签以<>包裹的按此 通常称之为元素

单标签：只有一个变迁就能表达完整的含义如：<input/> <img/>

双标签：由开始标签和结束标签组成<div></div><span></span>

属性: 标签可以有很多属性 属性总是在开始标签中定义 而且是以名值对的形式出现 其中属性值 是以 双引号包裹

三、2html的常用标签基本结构都有啥呢？

1:标题：这里我们会用到head的缩写h1到h6表示标签显示出来的结果顺序是从大到小的结构

2：段落标签：什么是段落标签？用于定义段落的标签呀！用<p>来表示

这里要注意：段落标签用于定义段落 浏览器会自动在其前后创建一些空白

文字行数取决于浏览器窗口的宽度

那么问题来了？如何显示空格呢？html准备了一个专用的空格符 &nbsp来表示

3：块级区域 div标签是 division的含义 代表网页中的块 所以一般把他叫做块标签

4：span标签是内联将一个span元素标记在span中这个非常重要不是很了解的小伙伴可以查一下知识点

5：还有一些我们常用的链接 比如如何点击一个链接跳转到另一个界面呢？这里就可以实现啦那就是a标签 anchor的缩写用于定义网页的链接

href指向链接的地址，还有一些我们常用的空连接void（0）

6：图片img属性来定义图片的方法 他有俩个属性一个是src代表图片的地址 alt属性代表图片无法显示时的代替文本

为此更加细分会有无序列表和有序列表以及自定义列表情况：

1：无序列表？使用ul标签定义无序列表li标签定义列表项无需列标的含义是 前后内容没有顺序

2：有序列表？顾名思义就是每一项都有顺序含义 有序列表的前端通常为字母或数字

3：自定义列表：使用dl标签定义自定义列表 dt定义标题 用dd来定义列标项

四、接下来来到了很重要的重中之重表格标签：

为啥使用表格标签表格标签都有啥子？

在我们浏览网页时总会看见商品的分类在不同的单元中？

比如我们在买东西时会出现分类华为手机要什么型号？什么颜色？这样就需要将类品区分开的同时也要在一个手机的类中

表格标签表示方法：

表格元素：<table>标签定义 里面由若干行和列的单元格组成

在表格元素中 使用<tr>表示表格中的一行 使用<td>表示列

表格可以定义标题 用<caption>标签定义

行？

我们可以把一个网页的整体分为三部分：head body 和foot 代表一个完成的人/网页

表格的行 使用<tr>标签定义表格的行

Tr 表哎内部用来包含td标签

例如:

   <table>
   <tr>
   <td>单元格</td>
   </tr>
   </table>

<th>会把自己的颜色变化 变粗变黑

我们也可以在tr 属性中设置align来调试单元格显示的位置等

表单：

使用表单来简单的设置一个提交的按钮或者是 重置按钮 来实现我们在输入网页信息时的一个小程序？大家可以自主发现！

表单元素：使用form标签定义表单，表单有俩个最重要的属性 action和method action属性定义了，表单提交的地址，eod 属性定义了表单提交的方式

表单提交有俩种方式： 一种是get 一种是 post

其他的表单控件元素 必须放在form标签的内部

Form action=www.huawei.com  method=’post
Input type =”submit value=”提交
Input type = “reset vale = “重置

表单元素：使用form标签定义表单，表单有俩个最重要的属性 action和method action属性定义了，表单提交的地址，eod 属性定义了表单提交的方式

表单提交有俩种方式： 一种是get 一种是 post

其他的表单控件元素 必须放在form标签的内部

案例：

Form action=www.huawei.com  method=’post
Input type =”submit value=”提交
Input type = “reset vale = “重置

表格中的三个属性？select input textare？

1：input：

表格元素： input是一个单标签元素 其属性type代表了input的表单类型 input标签就是通过tupe属性的不同取值来定义不同的表单控件

单本框：可以输入一行文本的表单控件

例如: <input type=”text/>

单选按钮: 具有相同属性的单选按钮只能选择一个

例如:<input type = “radio/>

多选按钮: 可以选中多个的选择框

例如：<input type = “checkbox/>

按钮：

普通按钮：

例如:<input type =”button”/>

提交按钮：会触发将表单数据提交到服务器的功能

<input type =”submit”/>

重置按钮：会清楚表单中的所有数据 回复表单中的原始值

<input type =”reset”/>

文件上传按钮:用于文件上传

2：select选择？如何选中心仪的商品？

Select用来定义列表 option用来定义列表项

示例：

 Select name=”course”>
Option value = “Math”>英语</option
Option value = “Math”>数学</option
</select>

3：textare来显示多行的文本域？

<textarea/>用来表示多行文本域

示例： <textarea rows =”5” col =”10”></textarea>

本文分享自华为云社区《0基础小白如何玩转前端开发？》，原文作者：一只无脑程序员 。

点击关注，第一时间了解华为云新鲜技术~