说之前还是先说点其他的,简单介绍下自己为何选择web前端开发:

本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25岁这个年龄段在拼一把,选择学习前端开发,虽然我不是很聪明的那种人,但至少我会坚持

首先,什么是web前端开发,在第一次接触的时候,往往感觉这是个很神秘的职业,让人望而却步,实际不然,在有一定了解下你就会觉得这个东西也不是你想象中的那么神秘,现在进入正题

1:定义

2:组成

在我们日常生活中所见到的网页,小程序等都是可以被实现的,所以web前端开发你可以这样理解:创建WEB页面或app等前端界面呈现给用户看的过程,凡是能肉然看见的,都是可以被实现的,其中在一个页面上我们看到它的结构:页面,那么页面当中又会有很多的内容组成,什么图片啊,视频啊,文字内容等等啊,这些叫做html,他是用来定义页面结构的,后面还会学到css和js,现在先说html,html:hypertxt-markup-language。中文名:超文本标记语言,那么我们可以知道html是由很多内容组成的,这些内容也叫做元素,元素的结构组成<元素名>元素内容</元素名>,(也可以说是起始标记+元素内容+结束标记),在页面上我们是呈现的元素内容,那么现在暂时学到的元素不多,但不影响后面划分页面结构。结构,可以把它想象成混凝土,由模子固定它的形状,粗、细集料(框架)构成混凝土的骨架,水泥,水等外加剂(元素)作为调试混凝土性能的填充物以及功能性作用的东西。一般来说,现在学习的划分区域的元素标签名有div等,由于方便开发者跟维护者看,后面就有了语义化标签:header  nav    aside   article     section      footer

header顾名思义就是头部(也可表示部分区域的头部)的意思   nav导航   aside广告及附加信息    article文章主题     section某一主题的部分,也可以表示章节   footer底部(也可表示部分区域的底部)

有了这个想法后,一个html页面就可以是三部分组成: header      正文内容(div) footer   ,在从ui设计那儿根据需求细分,比如:<header><h1>标题</h1><nav><a>超链接</a></nav></header>,对页面的结构划分就很轻松了,在这儿还是说说平时常见到的容:h1表示标题,h元素有h1-h6这6个级别,数字越小,标题越大;p元素表示段落;article表示正文,如果一个页面的中间不问全是由大量文字组成的话,也可以用article划分区域;a元素表示超链接(点击可以跳转地址)等

有了这些基本知识点过后就可以实现我们对网页的第一步操作了,划分页面结构了。

小白入门Web前端开发学习一周小结的更多相关文章

  1. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  2. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  3. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  4. Web 前端开发学习之路(入门篇)

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...

  5. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  6. Web前端开发学习误区,你掉进去了没?

    从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...

  7. 关于web前端开发学习的顺序

    学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题.下面简单的说一下.由于在国内大学课程里面,几乎没有前端开发这门课程,无非就是一些网页设计之类的课程,但那些课程无论是老师讲还 ...

  8. web前端开发学习路径图

    第一阶段 WEB前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限 ...

  9. web 前端开发学习路线

    初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...

随机推荐

  1. 从零开始学Electron笔记(五)

    在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打 ...

  2. [Qt2D绘图]-04绘制文字&&绘制路径

    注:学习自<Qt Creator 快速入门>第三版.   文档中的示例参考 Qt Example推荐:Painter Paths Example和Vector Deformation   ...

  3. Go Pentester - TCP Proxy

    Building a TCP Proxy Using io.Reader and io.Writer Essentially all input/output(I/O). package main i ...

  4. Python Ethical Hacking - MAC Address & How to Change(1)

    MAC ADDRESS Media Access Control Permanent Physical Unique Assigned by manufacturer WHY CHANGE THE M ...

  5. Python Ethical Hacking - VULNERABILITY SCANNER(9)

    Automatically Discovering Vulnerabilities Using the Vulnerability Scanner 1. Modify the run_scanner ...

  6. xenomai内核解析之信号signal(一)---Linux信号机制

    版权声明:本文为本文为博主原创文章,转载请注明出处.如有错误,欢迎指正.博客地址:https://www.cnblogs.com/wsg1100/ 目录 1. Linux信号 1.1注册信号处理函数 ...

  7. CUDA中关于C++特性的限制

    CUDA中关于C++特性的限制 CUDA官方文档中对C++语言的支持和限制,懒得每次看英文文档,自己尝试翻译一下(没有放lambda表达式的相关内容,太过于复杂,我选择不用).官方文档https:// ...

  8. LESS实战::not与:hover混合使用

    举个例子,有个HTML是这样的. <div class="item light">A</div> <div class="item" ...

  9. 爆肝整理:Linux常用命令,建议收藏!

    目录管理命令:mkdir.rmdir mkdir命令 rmdir命令 文件管理命令:cp.mv.rm cp命令 mv命令 rm命令 文件查看命令:cat.tac.head.tail.more.less ...

  10. Web优化躬行记(1)——CSS

    Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.& ...