重构不完全教程集之二_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

重构不完全教程集之二_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:49 AM

故不登高山，不知天之高也；不临深溪，不知地之厚也。--摘自《劝学》

::before & ::after

相当于多了两个空白标签，可以放置一些修饰的点缀或内容等

css3 生成内容
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

字体

字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等

字体渲染背后不得不说的故事
字体渲染
自定义字体 @font-face 详解
移动端字体
图标自定浅谈
google fonts
icomoon

图片

总得来说，图片的使用分为background和img，而从优化方向来说分为减少请求和减少大小。

图片优化原则：

能不使用就不使用（使用css3绘制简单的图形等）
矢量图与位图选择
挑选合适的图片格式（gif, png, jpg, webp等）及准备不同的规格大小（不同大小或retina屏）
合并（sprites）与压缩（有损压缩和无损压缩）

资源链接：

图片延迟加载的实现
CSS Gradients
css sprites
图片优化 - 谷歌图片优化手册
baseline vs progressive
图片原理与优化
WebP 探寻之路
Web性能优化：图片优化

svg

目前svg最大的用途在图标及动画，最大的优点在于矢量图，可以任意缩放不失真，而且大小还比较小。

svg 兼容性
Pocket guide to writing svg
MDN svg tutorial
理解SVG的viewport,viewBox,preserveAspectRatio
SVG Sprite技术介绍
SVG symbol a Good Choice for Icons
svg sprites 兼容js
svg line animation
超级强大的SVG SMIL animation动画详解
awesome svg

css3 动画

分transition动画和animation动画，前者为两帧动画（只能控制开始和结束），而后者可以对任意帧进行更多处理。

Intro to CSS 3D transforms
CSS3 Transitions 101
CSS3 Animations 101
CSS3: Animations vs. Transitions
css3 动画疑难杂症
High Performance Animations
css triggers

动画库

animate.css
effeckt
hover.css
animatable
css3 magic animation

响应式

响应式主要包括断点的设置，及各种断点情况下样式的改变

MDN CSS媒体查询
下手响应式及断点设置分析
响应式图片处理
Media Queries: Width vs. Device Width
media queries resource
案例参考

如果需要ie8-也支持相应式，得引入js库兼容，如 respond.js （不建议ie8去做响应式）

重排与重绘

网页性能管理详解
10 Ways to Minimize Reflows and Improve Performance

class命名

如何命名class
BEM
CCSS
ACSS
SMACSS
An Introduction To Object Oriented CSS (OOCSS)

注：该系列将会汇总在github上的重构优秀教程合集

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

See all articles