HTML和CSS达到什么程度才叫基础扎实

简介: HTML和CSS达到什么程度才叫基础扎实

1,盒模型概念一定清楚,知道自己想要的布局到底该写多宽多高。

2,渲染模式要分清楚,怪异和标准,怎么转换,说白了也是盒模型表现的事。

3,不同浏览器的css hack怎么写,选择器的优先级弄明白怎么调整。

4,所有的html标签都知道语义,所有的tag attribute都知道什么含义,记住是所有,并且知道默认样式是什么,了解如何reset。

5,知道css3动画的所有细节,并且知道在不同浏览器下的差异,知道css media query和flex的细节和一些比例单位如em,rem,vm等用法,并且知道怎么用于实际的自适应布局。

6,知道如何做css性能优化,以及如何写出模块化的css。

7,知道不同浏览器的差异属性并且知道如何绕过不使用这些属性。

8,各种垂直居中的写法,相对,绝对,fixed还有float的各种用法。

9,对齐,各种垂直对齐,文本,图片,行内元素和块级元素等。

10,给你一份psd设计稿,写完css和html,去掉css,能保证页面不乱,依然按照语义可以默认样式正常显示文档。

11,对seo有了解,知道怎么让显示和文案同时存在页面,了解css icon fonts,svg,雪碧图等原理和用法。

12,写过简单的js,知道如何给js工程师预留结构和节点钩子,不随意使用id属性来做样式渲染。

下面是对不同阶段的一个补充


1、前端入门

可实现:简单的PC布局

基础:常用的CSS2、HTML4知识(2/8定律中的2,类同),语义化,CSS命名使用规范。

此阶段中的问题大都可以在W3School中找到答案。

2、前端入行

可实现:稍复杂的布局

基础:浏览器兼容(如css reset,逐渐成为过去式的hack、css前缀等),布局技巧(如浮动、垂直居中,清除浮动等),模块化CSS增强复用性,常用的H5+CSS3知识,布局方式(自适应,瀑布流等),浏览器开发者工具中的DOM&CSS部分,常用优化技巧(如压缩,css sprite雪碧图等)。此部分中,js、JQuery的能力也应该具备了,此处忽略。

3、前端入行增强版

可实现:能切出的图都能跨浏览器实现,中小规模整站能够较为标准的完成

基础:能够查阅、理解规范(大多为英文,可配合各种大部头动物书帮助理解),对不常用的知识及细节也具备一定运用的能力(比如绝对定位与浮动的异同,z-index的各种鬼,文档流,较为全面的理解各类HTML标签及其语义,对HTML+CSS的知识面大多已经覆盖),开发者工具使用更加广泛(如对网络、资源等信息有一定的理解);最好对Bootstrap、Modernizr等框架的设计方案有一定理解,以具备自主写出更多通用组件(如自己的css reset)等,即对浏览器布局方案与浏览器兼容等有更深入全面的理解。本阶段开始注重2/8定律中的8。


目录
相关文章
|
5天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
18 1
|
5天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
14 0
|
1天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
4天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
8 2
|
6天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
15 4
|
4天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
5天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
WK
|
7天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
23 3
|
23天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
20天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS