提到HTML和CSS,在很多开发人员看来,它们并不是什么高深的内容,甚至是一些刚刚接触前端的人,也有相同的看法,它们真的如此简单吗?尽管很多人眼中,它们很简单,但是工作中很多人对于使用HTML和CSS经常无从下手,这是一个有趣的现象,一个大多数人看来简单的内容,却在应用方面让人无从着手,我认为这是一个值得思考的问题。

1. 学些什么东西?

从内容上来说,HTML和CSS并不是多么的复杂,其中HTML主要是一些标签和属性,CSS则是一些选择器和样式,两者加在一起,常用的内容超不过二百,相比于其他编程语言来说,它们可以说太简单了,要学会这些内容,估计两天足够了,但真的如此吗?大多人看来就是这样的,除了标签、属性、选择器、样式,难道还需要其他内容吗?事实如果真的如此,为什么我们后来在开发的时候会无从下手呢?我想,HTML和CSS的学习应该不止包括这些内容。

1.1 默认样式

我们知道,在HTML中针对一些标签,浏览器会添加一些默认的效果,比如标题标签字号会增大,字体会加粗,链接标签会呈现为蓝色,锚文字下方还会有下划线……为什么要提到这些效果呢?因为很多这些默认的装饰效果并不是我们需要的,而且不同浏览器里默认的样式可能不同,在浏览器中针对这些样式需要进行重置,如果不熟悉这些内容,那么如何确定需要重置哪些元素呢?

1.2 规范和习惯

我一直认为,代码是否规范和开发人员的习惯有很大关系,而开发人员的编码习惯是从学习到工作中不断逐步累积形成的,也就是说在最初学习阶段的时候就接触一些编码规范并不是一件坏事,不然在之后的编码中会出现很多不和谐的内容,比如HTML的标签没有严格的约束大小写、自闭合标签的结尾是否加了斜杠等等,尽管这些内容对于最终的效果不会产生多大的影响,但是代码的维护、阅读性、SEO优化等方面会带来极大的好处。

1.3 常用技巧

提到技巧,很多时候,我们认为这是需要通过不断练习去累积的,但是很遗憾,对于开发工作来说,一些通用的技巧如果不熟悉那么就无法开展工作。比如我们希望网页头部的LOGO文字居中显示,这里的居中说得是水平和垂直双重方向的居中,这是一个常见的操作,但很多人在学完HTML和CSS之后并没有办法实现这种功能,这些是否也是在学习阶段需要了解的内容呢?我认为是的,而且必须尽可能多的了解这些东西。

……

上述的很多内容,在大多数人看来这是需要一定工作经验的人才能够积累的,我也不否认这种说法,不过目前社会招聘的开发人员大多要求有一定的经验,即使他们知道对面面试的人员刚刚毕业,也会提出同样的要求,作为一个迫切希望一份工作的人又能怎么办呢?只能不断的学习和积累,好在对于软件开发来说,我们可以实践的成本很低,只要拥有一台自己的计算机就可以了。

2. 开发和维护中的麻烦

如果在工作中,必须让我完成前端的开发工作,那么我最关心的问题是之前是否有其他人参与过编码,之所以关注这个问题,并不是我希望了解自己接下来要完成多少任务,而是多大时候,接手别人的代码是一件痛苦的事情,特别是前端的代码,HTML和CSS尤为突出。

曾经,我参与一个商城系统的开发,项目已经进行到后期,在我看来,这是一个即将完工的项目,对于这个阶段的项目来说,大多数功能会存在相似模块,可以通过复制粘贴来完成,但打开HTML和CSS的时候,我傻眼了,接下来的工作很是痛苦,这里不妨和大家列举我发现的一些问题。

首先,在HTML中嵌套了大量的

标签,很多地方换行也不是很清楚,我无法从这些代码中看出整个网页的结构,经常有些模块看起来很相似,但是复制之后在效果上出现了很大的差异,最糟糕的是,在网页中使用了多种绑定JS脚本的方法,有些地方明显使用的是标签的属性,有些地方又使用的是JS脚本,甚至有些地方同时使用了这些方法,为了修改一个功能常常需要修改很多地方,十分的头疼。

和HTML相比,CSS代码更加糟糕,因为在样式文件中,每个样式的声明没有任何的顺序可言,在排列上也没有什么规律,有些样式代码甚至已经不使用了,最糟糕的是有些样式的声明对于网页中其他元素产生了影响,这对于一个新手来说,修改这样一份样式文件恐怕是不可能的。

不知道,多少人和我遇到过类似的情况,又是什么感觉呢?如果介绍到这里,您依旧认为HTML和CSS是一门简单的课程,就太不应该了,它有很多内容需要我们去学习,而且这些内容很琐碎,没有什么相关性,所以如果您打算学习它们的话,请一定不要轻视它们,特别是要注意养成良好的编码习惯。

为什么改了css网页没有变化_「前端开发」HTML/CSS真的好学吗?为什么小胖认为它并没那么简单...相关推荐

  1. html文本显示_「前端开发」HTML入门与实战

    [什么是HTML]: HTML: 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. HTML 是用来描述网页的 ...

  2. dreamweaver 正则表达式为属性值加上双引号_「前端篇」不再为正则烦恼

    作者:李一二 转发链接:https://mp.weixin.qq.com/s/PmzEbyFQ8FynIlXuUL0H-g 前言 有不少朋友都为写正则而头疼,不过笔者早已不为正则而烦恼了.本文分享一些 ...

  3. 为什么改了css网页没有变化_同样升级「大轮毂」:为什么有的汽车油耗升高,有些却没有变化?...

    内容概述:汽车动力传动系统基础结构,簧下质量的概念与影响 「升级轮毂」是汽车改装中最常见的项目,轿车喜欢大尺寸轮毂加扁平比很小的轮胎,越野车喜欢小齿轮轮毂加扁平比更大的AT(全地形)轮胎.两种改装都是 ...

  4. 介绍家乡网页html代码_「HTML一」 html基础

    一.html的介绍 1.1 html的定义 HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言.标记:就是标签, 标签名称>,比如:. 等,标签大多 ...

  5. css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画

    我们知道,CSS支持将元素的border属性设为虚线,例如: <h1>君喻学堂h1> h1 {   border: dashed 1px; } 但是,CSS的虚线样式是固定的,如果我 ...

  6. vue:无法将“vue”识别为脚本_「前端架构」React和Vue -CTO的选择正确框架的指南...

    快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...

  7. mysql虚拟列表_「前端进阶」高性能渲染十万条数据(虚拟列表)

    前言 在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表.比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益.亏损.手数等),此时对于 ...

  8. 火焰效果材质实现_「游戏开发」使用Unity实现魔法火焰效果

    *本文转载自公众号"Unity官方平台". 本文由视觉效果艺术家Evgeny Starostin分享如何使用Unity制作魔法火焰效果的过程,让我们一起学习和制作魔法火焰吧. 下面 ...

  9. class react 获取_「前端进阶」React系列九 - 受控非受控组件

    源自:coderwhy 一. refs的使用 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播 ...

最新文章

  1. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十五章:第一人称摄像机和动态索引...
  2. 启动转换安装失败 拷贝windows安装文件时出错_男人的生产力工具:极速拷贝 效率神器 TeraCopy精品推荐...
  3. 通用的权限管理系统发布
  4. leetcode 1356. 根据数字二进制下 1 的数目排序(排序)
  5. C# 数据库连接字符串集合
  6. django-模板变量
  7. Set、Map集合、栈、队列
  8. CUDA——线程配置
  9. 入侵检测技术目的-发现黑客
  10. A星寻路算法(A* Search Algorithm)
  11. 19【推荐系统3】AutoRec
  12. VS2017 Ankhsvn不可用
  13. 如何阅读一本书-读书笔记
  14. 请设计输出实数的格式,包括:(1)一行输出一个实数;(2)一行输出两个实数;(3)一行输出三个实数。实数用%6.2f格式输出。
  15. 大数据量点的地图展示,借助PostGIS实现动态点抽稀/聚合效果
  16. 在普通maven项目应用中使用MQ
  17. 最新代千元机!Redmi Note 9正式发布:性能提升100% 1299元起售!
  18. 信息系统项目管理师与系统集成项目管理工程师5大区别
  19. JQGrid各种参数详解
  20. Unity3D 内存 释放

热门文章

  1. Linux上面开发android手机驱动加载.
  2. 干货 | Dart 并发机制详解
  3. lisp实现框选裁切_《剪切成虚线》v3.1版(支持框选)
  4. 金融+科技,民生银行与华为携手打造数字化智能银行
  5. sqlserver不同版本之间数据库的还原方法
  6. mysql在线主从复制_使用MySQL8.0 clone技术在线搭建主从复制
  7. mysql在线主从复制_一篇搞懂MySQL 8.0 Clone技术在线搭建主从复制全过程
  8. Win10任务栏透明工具TranslucentTB(TranslucentTB基础配置)
  9. 你应该知道的50个项目管理术语(下)
  10. Clipper库中文帮助文档