一个真正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准备了一个专用的空格符  来表示
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基础小白如何玩转前端开发?》,原文作者:一只无脑程序员 。
点击关注,第一时间了解华为云新鲜技术~
一个真正0基础小白学习前端开发的心路历程相关推荐
- android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
- html5制作心路历程,一个真正0基础小白学习前端开发的心路历程
距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪浅呢?废话不多说上干货. 一.第一阶段html知 ...
- 0基础跟班学习前端的第三天(因为上完一次课需要上一天自习啦~)内容整理归纳还有附带的小练习~希望大家多动手练习(二)
关于HTML 我们终于迎来了正题,开始学习前端基础的第一部分,老师强调前端一般都是结构(HTML)丶样式(CSS)和交互(JavaScript)相分离的. 我们的HTML只负责页面的结构. 一丶< ...
- JUCE 0基础小白学习历程day1--基础了解
记录小白学习JUCE第一天: 一.下载与安装 官方下载教育版安装 二.使用 在projucer中创建GUI项目,GUI项目自带窗口类,创建完成后选择自己的编译器打开,即可编译代码,我们可以看到GUI项 ...
- day1开始在百度前端技术学院零基础学院学习前端开发
2020年10月14日 第一天:为什么有那么多人要做前端? 学习总用时:1小时30分钟 今天的目标是大概知道什么是Web,什么是HTML,CSS,JavaScript. Web(World Wide ...
- 0基础如何学习安卓开发
文章始发于我的知乎专栏:bird-hu 安卓学习步骤: 学习任何一个东西之前,都要学会思考以下几点,这样任何东西都会学的很好. 1.他是什么? 2.他是干什么的,是怎么干的? 3.他为什么这么干? ...
- 【0基础】学习solidity开发智能合约-初识solidity
本篇课程开始,我们来学习一下如何使用solidity开发智能合约,由于博主对于solidity的学习,也是自学的,所以一些不足或有纰漏之处还望指出,大家共同进步,本系列课程会分很多节课讲述,从入门到进 ...
- JUCE 0基础小白学习day2---Timer
上一篇学到了TextButton控件,JUCE还有一些其他基础控件如Combobox组合框.ListBox.TableListBox表,等等,他们跟TextButton控件类似,区别在于他们可以添加自 ...
- 我是小白0基础,现在我想学习前端开发,该如何系统的学习?
以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助. 开始 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以多我们提出的要求也就越来越高了.所以我们需要的也就不仅 ...
最新文章
- 移动互联网漫谈(4)-移动通信网络
- “汇新杯”新兴科技+互联网创新大赛青年创客专项赛即将截止报名
- P1083 [NOIP 2012]借教室
- 如何调整ABAP程序的性能
- mysql 不join的原因
- iOS手势操作简介(三)
- 俄国数学家称:“平行线可以相交”,却遭到质疑,死后12年被证实
- 《101 Windows Phone 7 Apps》读书笔记-BABY MILESTONES
- Git提交本地代码到GitHub
- 小白学开发(iOS)OC_ SEL数据类型(2015-08-10)
- php入门教程 苹果系统,phpstudy有mac版本吗,如何在Mac系统下使用phpstudy
- 天池比赛——新闻文本分类比赛(零基础入门NLP)
- 小程序云开发教程七:贴子的详情及评论功能
- MSDN上关于WinDbg的手册
- 互联网2B和2C的区别
- 蓝色基因超级计算机玩仙剑6,世界上最快的计算机——蓝色基因超级计算机
- 「Ceph源码分析」纠删码解码
- CCF人工智能的A类期刊会议列表
- Web前端开发与应用
- mac kendryte使用model-cmpiler运行kpu-demo
热门文章
- 运算器为计算机提供了计算与逻辑,【单选题】运算器为计算机提供了计算与逻辑功能,因此称它为()....
- centos5安装oracle11,CentOS 6.5 x64 安装 Oracle11g R2
- cpp 原子操作_C++ 新特性学习(八) — 原子操作和多线程库[多工内存模型]
- ansys用什么cpu_ansys参数化建模教程专栏——以例子吹爆APDL的省时省力(一)。...
- c语言函数与指针,C语言指针与函数篇
- java8怎么按照两个字段的乘积排序_django-orm F对象的使用 按照两个字段的和,乘积排序实例...
- LuoguP1113 杂务
- OpenStack基础知识
- Echarts初体验
- 每天学点Shiro-集成spring