㈠ Web前端工程师要了解的html+css基础知识
今天小编要跟大家分析的文章是关于Web前端工程师要了解的html+css基础知识。正在从事Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮橡镇助。一、什么是HTML？
HTML即超文本标记语言(HyperTextMarkupLanguage)，是用来描述网页的一种语言。
超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。
标记语言是一套标记标签(markuptag)
HTML使用标记标签来描述网页
如下代码：
MyFirstHeading
Myfirstparagraph.
例子解释:
与之间的文本描述网页
与之间的文本是可见的页面内容
与
之间的文本被显示为标题与
之间的文本被显示为段落二、HTML元素
HTML文档是由HTML元素定义的。
HTML元素指的是从开始标签（starttag）到结束标签（end
tag）的所有代码。
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
开始标签
元素内容
结束标签
Thisisaparagraph
href="default.htm">
Thisisalink注释：启梁开始标签常被称为开放标签（openingtag），结束标签常称为闭合标签（closingtag），大多数HTML元素可拥有属性。
空的HTML元素：
没有内容的HTML元素被称为空元素。在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如:
就是没有关闭标签的空元素,而
是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。
HTML提示：使用小写标签
HTML标签对大小写不敏感：
等同于
。许多网站都使用大写的HTML标签。 ㈡ Web 设计的CSS 工具有哪些 Web程序员必备的CSS工具 CSS问题检查工具：CSS Lint CSS代码分析统计工具：CSS Stats CSS代码优化压缩工具：CSS Shrinks CSS代码整理工具：ProCSSor Codrops CSS 语法参考 CSS3浏览器兼容支持情况查询工具：Can I Use 检查你的代码是否符合CSS标准：W3C CSS Validation Service CSS动画生成工具：Gradient Animator ㈢ Web前端工程师要掌握的CSS技巧
今天小编要跟大家分享的文章是关于昌亮Web前端工程师要掌握的CSS技巧。正在从事web前端工作的小伙伴们快来和小编一起看一看吧，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。 ㈣ web前端开发学习路线 第一阶段： HTMLCSS: HTML进阶、CSS进阶、divcss布局、HTMLcss整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚竖斗动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、陪纤陪变形、JQueryUI组件基本使用。 第二阶段： HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。 第三阶段： HTTP服务和AJAX编程 WEB服务器基础： 服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。 PHP基础： PHP基础语法、使用PHP处理简单的GET或者POST请求、 AJAX上篇： Ajax简介和异步的概念、Ajax框架的封装、对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。 AJAX下篇： JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。 第四阶段： 面向对象进阶 面向对象终极篇： 从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。 面向对象三大特征： 继承性、多态性、封装性、接口。 设计模式： 面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式芦蠢、装饰者模式、适配器模式、面向切面编程。 第五阶段： 封装一个属于自己的框架 框架封装基础： 事件流、冒泡、捕获、事件对象、事件框架、选择框架。 框架封装中级： 运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。 框架封装高级和补充： JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。 第六阶段： 模块化组件开发 面向组件编程： 面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。 面向模块编程： AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。 第七阶段： 主流的流行框架 Web开发工作流： GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。 MVC/MVVM/MVW框架： Angular.js、Backbone.js、Knockout/Ember。 常用库： React.js、Vue.js、Zepto.js。 第八阶段： HTML5原生移动应用开发 Cordova： WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。 Ionic： Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。 ReactNative： ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。 HTML5： HTML5中国产业联盟、环境、HBuilder开发工具、MUI框架、H5开发和部署。 第九阶段： Node.js全栈开发： 快速入门： Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。 核心模块和对象： 全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。 Web开发基础： HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。 快速开发框架： Express简介MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。 希望对您有所帮助！~ ㈤ Web前端面试指导（五十）：CSS样式书写有哪些
一、CSS书写顺序
W3School使用的是小写标签，因为万维网联盟（W3C）在HTML4中推荐使用小写，而在未来(X)HTML版本中强制使用小写。
三、HTML属性
HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在HTML元素的开始标签中规定。
属性实例:
HTML链接由标签定义。链接的地址在href属性梁旁粗中指定：
Thisisa
link
注释：属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill"HelloWorld"Gates'。
HTML提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。
而新版本的(X)HTML要求使用小写属性。
一些常见HTML属性:
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性
值
描述
class
classname
规定元素的类名（classname）
id
id
规定元素的唯一id
style
style_definition
规定元素的行内样式（inline
style）
title
text
规定元素的额外信息（可在工具提示中显示）
四、HTML编辑器
使用Notepad或TextEdit来编写HTML
可以使用专业的HTML编辑器来编辑HTML：
AdobeDreamweaver
MicrosoftExpressionWeb
CoffeeCupHTMLEditor
五、HTML标题
标题（Heading）是通过-
等标签进行定义的。
Thisisaheading
定义最大的标题。
Thisisaheading
定义最小的标题。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
以上就是小编今天为大家分享的关于Web前端工程师要了解的html+css基础知识的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
CSS Lint是一个开源的校验CSS文件质量的工具，最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的，最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告，当选择器或属性书写不正确、漏掉了大括号、多写了分号等时，会提示解析错误，解析错误优先提示。
Css Stats是一款在线CSS代码分析工具，输入网站CSS网址即可进行CSS代码分析。Css Stats是前端网页设计师分析网站CSS代码的利器，可以统计CSS代码里的规则、字体大小、宽度高度、颜色数等等。
对于网页设计师而言分享网页CSS代码是必须要做的事情，统计网站设计里使用了多少种字体、多少种字体大小、多少种颜色、背景颜色有多少种，只有对CSS代码有一个详细的统计数字才能分析出来整个网站设计出来以后的效果。Css Stats还提供热门网站的CSS分析数据，例如谷歌、雅虎、Twitter、FaceBook、Tumblr等网站。
CSS Shrinks 能够非常明显的压缩你的CSS体积大小。很多Web程序员编写的CSS代码里有大量的冗余语法，空白空间等，这款工具能在不影响你的CSS的正确性的情况下，优化CSS的语法，去除无用的空格和空行，显着的压缩CSS的提交，大量的减少带宽的浪费。
ProCSSor 除了提供基本优化CSS代码功能，还提供了大量的自定义选项。比如，让你设定CSS规则，CSS属性，CSS语法的优化选项。它还提供了对新型CSS3属性、规则中各种浏览器里的不兼容替代方案。
Codrops CSS 参考内容丰富而全面，并且界面清爽直接，你可以使用这个工具掌握CSS里最重要而全面的知识。它的CSS知识库分成了数个类别，包括伪类，属性，函数，数据类型，概念，规则等。
“Can I Use”在这里你能找到所有web新特性在各个品牌浏览器以及各品牌浏览器不同版本的兼容性，当你知道你针对的用户都在使用什么浏览器时，这写table将对你建设网站有很大帮助。打开caniuse.com，该网站首页将所有HTML5、CSS3等web新特性罗列出来，如果你想查看某个特性在不同浏览器种的兼容情况，点击一下就可以。比如，看一下@font-face Web fonts在各个浏览器中的兼容性，点击CSS区域中的第一项，会看到一个表格，列出所有浏览器的版本，用不同颜色代表每个浏览器对@font face Web fonts的支持，被标识为红色的代表不支持，浅绿色代表部分支持。图中列出的浏览器还包括一些手机平板设备浏览器，例如Android系统浏览器。如此全面，设计网站时，可以根据网站针对的用户有选择的使用CSS和Javascript的高级特性，提高用户体验。
这个工具是用来检查你的CSS语法是否正确，是否符合W3C CSS标准。我们知道从最早的IE开始，各种浏览器都实现了一些自己的方言，这些方言中在各种浏览器里互不相通。但我们开发网页时，必须最大限度的考虑各种浏览器的兼容性，最好的方法是遵守W3C的CSS标准规范。W3C CSS Validation Service就是用来校验你的css中的问题，它会提醒你那些语法，哪些属性，那些规则是有问题的。
这是一款使用CSS Gradient和CSS Animation技术实现的动态背景生成工具。工具非常易用，轻松地点击几下鼠标，一个现代感十足的渐变动态背景代码就生成了。它可以让CSS渐变背景平滑地移动，我们可以设置移动的角度，移动的速度，渐变的角度。支持所有现代浏览器以及 ie 10+。非常适合做网页开屏背景。
1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；举个例子：
其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）当然该元素高度肆拦上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。
2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。
这一点，我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之_各种居中里面的第八点。3、边框宽度不允许使用百分比裂迅胡值这点就不解释了。4、width：100%当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的content，其等于父元素的content宽度。
将上面子元素的position改成了relative后，其宽度就变成了parent宽度。
5、line-height你知道line-height:150%和line-height:1.5的区别吗？知道了就可以跳过此处，不知道继续看下面：举个例子：
上面可以看到line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。6、ex和ch单位ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算；ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em；
ex和ch单位，类似于em和rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。ch单位通常被定义为数字0的宽度。你可以在EricMeyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。ex定义为当前字体的小写x字母的高度或者1/2的1em。很多时候，它是字体的中间标志。
x-height;theheightofthelowercasex这些单位有很多用途，大部分用于版式的微调。比方说，sup元素（上角文字标），可以通过position:relative;bottom:
1ex;实现。类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：Css代码
7、使用calc时运算符之间要有空格，否则可能无效。
以上就是小编今天为大家分享的关于Web前端工程师要掌握的CSS技巧的文章，希望本篇文章能对正在从事web前端相关工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
1.位置属性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”
3.简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
4.16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
5连字符CSS选择器命名规范
1）长名称或词组可以使用中横线来为选择器命名。
2）不建议使用“_”下划线来命名CSS选择器，为什么呢？
输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）
6.不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
三、CSS命名规范
常用的CSS命名规则
头：header
内容：content/Container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：right
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
ID的命名-页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
ID的命名-导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
ID的命名-功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：right
四、注释规范
/* Header */
内容区
/* End Header */
五、注意事项
1.一律小写;
2.尽量用英文;
3.尽量不缩写，除非一看就明白的单词。
六、CSS样式表文件命名
主要的 master.css
模块 mole.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css