做好前端的话html和css基础必须夯实

很多前端大佬说,要做好前端的话html和css基础必须夯实。那么,达到什么水平才能叫基础夯实呢?

1、拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程中可能出现的兼容问题。

2、页面在书写的时候可以快速的写出来适合该项目相关的reset.css。并且在书写布局的适合可以借助编辑器的相关快捷键和相应的标记符,迅速把某一大模块的结构书写出来,比如利用hbulider的table快捷键书写快捷结构,div>p.box$*4+p.text,并且做到一步到位准确无误。

3、结构上书写的时候,能合理的应用适合并且快捷的布局方式,比如是用弹性盒子布局、响应式布局、多列布局、双飞翼、圣杯布局等等,快速的达到自己的目的,并且对于一些a、img等这些标签需要的alt、title、target这些属性也会注意的添加上。

4、对于网页结构的优化有一定的认识,比如如何避免蜘蛛陷阱,如何对网站当中用到的URL进行优化,需不需要给网站当中放入网站地图等等。

5、每个不同的浏览器出现了兼容问题,解决方法是什么,哪些是必须要添加特定的过滤器才可以的,如果更完美的话就是能不能换一种方式来实现这个效果,绕过一些存在兼容的属性,这样从优化上又可以减少了代码量。

6、对于移动端在书写的时候,各个单位之间的关系和用法比如rem、vw、vh、dpr、em等,并且知道对不同类型的移动端页面布局,采用不同的方式来做,从而更适合实际的需求。

7、除了常见的一些网页布局和css页面书写之外,对于一些其他的布局和css技巧也能做到熟练应用,比如css实现各种居中、七种css方式让一个容器水平垂直居中、全兼容的多列均匀布局问题、多列等高布局等。

8、晓得层叠顺序(stacking level)与堆栈上下文(stacking context)、IFC、BFC、GFC 与 FFC等的相关概念和实际操作当中的应用。

需要说的东西太多了,其实这些东西如果想要熟悉熟练的掌握到位的话,更多的是需要做大量的一个练习,并且在大量的练习和项目书写过程中,不断的总结自己的经验并且记录下来,最后才能够变成自己的东西,很多东西都是需要从量变到质变的过程,所以听别人的经验再多都不如你亲自的去实际的操作,这样才会有效果。

来源:千锋HTML5

做好前端的话html和css基础必须夯实

原文地址:https://www.cnblogs.com/qfdeu/p/9117606.html

时间: 2024-10-05 04:58:28

做好前端的话html和css基础必须夯实的相关文章

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

1)前端的html和css基础标签

1) 前端:html 这里使用谷歌浏览器 开发工具使用pycharm 1.HTML的概述 html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色.大小等. 注:html中,除了语义,其他什么都没有. 2.HTML的网络术语 · 网页 :由各种标记组成的一个页面就叫网页. · 主页(首页) : 一个网站的起始页面或者导航页面. · 标记: <p>称为开始标记 ,</p&

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,常用样式详细解读

#### CSS属性值background背景 -   背景颜色 - background-image:url(  );背景图片 - background-repeat:no-repeat; 设置背景图片是否平铺 - repeat:平铺,默认值 - no-repeat 不平铺 - background-size:100px 60px;设置图片的大小,值X/Y,可用单位百分比像素 - background-position:100px 60px;设置图片的位置,值X/Y,可用单位百分比像素,英文单

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端学习(九):CSS基础

进击のpython 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 CSS样式表是可以直接把代码放在现有的标签里面去的 这种方法就称为内嵌式: <p style='color:red;'>文字颜色为红色</p> 把对应的style属性,写在p标签的开始标签中 CSS样式代码要写在style=""双引号中,如果有多条CSS样式代码设置可以写在一起

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

软件测试必备-前端知识点之css基础及ps的用法

CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. css常用属性 1.color: red;   设置文字颜色 2.font-size: 50px; 设置文字大小 3.font-family: "黑体"; 设置字体(如果设置的是中文字体,要加双引号!) 4.width: 100px;  设置宽度 5.height: 100px;  设置高度

关于CSS基础框架的学习

什么是CSS基础框架? CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 为什么需要研究和使用它? 在当前浏览器很多 而且各有差异的情况下 如何统一样式 兼容大部分浏览器是很有必要的 从具象的表现中抽出抽象的模块来重复使用,是减少用户下载.方便团队及个人开发最重要的手段.所以CSS框架就很有必要了 现在有哪些比较著名的框架? 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当