html css 前端基础 学习方法及经验分享

前言:

  入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们。当然,适合每个人的学习方式不同,以下所讲的仅供参考。

  一、关于基础语法

  对于基础语法,此处不做讲解,有需要的同学可以在w3cschool、w3school、慕课网等等进行学习。如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少用到,如果从头到尾把一本书啃完,需要消耗的时间成本会很大,关于前端,知识的更新迭代很快,因此,快速学习是一项首要需要培养的能力。

  现在,html5和css3早已经很火,但是,刚开始一定是要先学习html4.0版本和css2.0版本,此时,关于在新版本中废弃的标签和语法就不要去使用了,等基础OK了,再学习html5和css3时,主要学习新增的部分,即关注差异即可。

  二、关于编辑器

  编辑器是为了提高开发效率的,用着习惯即可,当然,dreamweaver就不推荐使用了,初学者可以使用一些比较小巧的编辑器,Notepad++,EditPlus,sublime,HBulider等都是不错的选择。Webstorm  应该是目前最优秀的一款编译器,也是使用人数最多的,当然体积也比较庞大,适合后期开始做项目的时候使用。

  HBulider是不支持插件安装的,所有的功能都是集成好了的,它的代码提示功能很完善,对于前期的学习使用完全是够用的。sublime 是需要自己安装插件的,网上也有很多教程,此处不再赘述,需要说明的是,大家在下载编辑器的时候,一定要去官网下载,不要直接用别人已经安装好插件的编辑器,虽然说编辑器只是作为工具,不应该花费比研究代码更多的时间去研究一款工具,关于安装插件,网上很多教程都解释地很清晰,但是,当你自己去做的时候,很可能会遇到各种各样的问题,所以有些坑必须要自己踩过,你才能有更深刻的认知。

  三、关于代码规范

  代码写得好不好,最终的结果实现仅仅是一小部分,编程过程中的代码的规范性及语义化尤为重要,如果自己写的代码第二天自己就看不懂写的是什么了,那么对于需求更改和代码维护将是一个灾难,同时,由于代码结构不清晰,编码不规范,也很容易导致错误,而且又不容易查找。所以,从一开始就应该养成良好的编码习惯,注重细节,一定可以帮助你在学习编程的路上更加顺畅。

  在编码的过程中,应当尽量遵循xhtml的规范,它是一个标准更严格的html版本。

  四、关于练习

  基础语法学习过后,就可以按照自己想实现的页面动手制作了,只有多练习,才能踩更多的坑,然后通过查阅资料解决问题,才能对所学的进一步地理解,从而更加地融汇贯通。当然,善于总结也是很重要的。

  如果暂时没有找到合适的页面进行练习,可以先模仿一些大的网站的其中一小模块,通过F12,可以打开控制台,查看到网页的源码,当然,也可以下载一些psd设计稿,进行页面还原。

  五、关于切图

  切图主要涉及到Photoshop的切图工具,画切片,然后存储为web所用格式即可。其他的细节,在使用过程中逐步学习即可。

  六、关于基础阶段需要掌握的知识点

  任何一门技术不是要等到你全部弄懂原理,完全精通了,才可以去做项目,都是需要在有一定的基础上,然后多做项目练习,逐步去深入的,所以,特别是知识储备阶段,一定是快速过基础,然后不断在项目练习中积累经验。

  下面简单列一下基础阶段需要掌握的知识模块,以便于有一个整体的把握:

  1.   文件编码
  2.   路径
  3. 标签
  4.   属性
  5.   选择器、伪类选择器
  6.   CSS样式
  7.   盒模型
  8.   margin塌陷
  9.   块元素、行内元素、行内块及相互之间的转换
  10.   浮动、清除浮动
  11.   定位:相对定位、绝对定位、固定定位、定位层级
  12.   表单控件
  13.   单元格
  14.   CSS Hack处理  

结语:

   吾生也有涯,而知也无涯,以热爱和敬畏的态度,不断地扩展知识的深度和广度,并在工作和生活中进行实践运用,大抵是幸福的一种诠释,你看世界,世界看你的!  

  

  

  

时间: 2024-10-12 20:24:07

html css 前端基础 学习方法及经验分享的相关文章

CSS浮动(float)属性学习经验分享

作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的“门道”. 下面就通过一些例子来归纳总结一下我所学到的浮动特性: (一)浮动元素对其兄弟元素是标准流元素的影响: 现在假定HTML文档中从上到下有3个块元素A.B.C 1.现设定A.C为标准流中的元素,B设为float:left (注:为了更直观地显示,设B的透明度为0.5,B是在C上方的) 由此可见:将B设为浮动元素后,B脱离了标准文档流,浮于其上方,因此他

精华总结:IT学习方法与经验分享

混迹IT行业这些年,从集成商到厂商,从路由交换到无线.服务器.虚拟化.存储.容灾备份,从售后到咨询岗位,再到讲师,我发现: 对一个工程师而言,最重要的并不是技术本身,而是快速学习技术的方法以及思路: 有一套成熟的体系和方法后,无论学习网络.数据库还是编程,套路都差不多: 由0到1 远远比由1到10难. 我大三自学考过了CCIE,当年培养的一套体系和方法至今仍深深影响着我: 我将在公开课分享学习方法和职业经验,供大家参考: 免费公开课内容 1. IT发展大趋势分析 2. 我的CCIE自学经历分享

好程序员web前端学习路线分享前端基础面试题

好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助. 1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元

【笔记-前端】div+css排版基础,以及错误记录

现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础. 下图是一个使用div+css排版的示例: html和css: <html> <head> <style> body{font-size:20px;font-weight:bold;color:white;} .bac

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

前端基础知识之css

前端基础知识之css   https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.   css就是修饰那些html元素的 其主要内容为两大块: 找到标签 和  修饰标签 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. cs

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

【经验分享】响应式网站项目实操过程中的那些事儿

本次网站改版升级是我来到新公司的第一个项目,需求之初并没有提及要做响应式,在首次评审时领导和研发均认为响应式处理与我们网站相对契合,就这样我开始了我职场生涯中第一个响应式网站设计.下面就跟大家分享响应式网站设计中的那些事儿. 因为本人之前并没有接触过响应式设计,在项目开始前便恶补了一些响应式的基础知识.理论性资料网上众多,为了使各位对响应式有初步印象和认知,我在这里只做简单描述,各位若想要更全面深入的了解可自行百度. 1什么叫响应式设计,为什么要做响应式设计 (1)页面的设计和开发应当根据用户行