结构样式行为的分离
结构标准包括XML标准、XHTML标准、HTML标准；样式标准有CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
通常的项目会按照如上的方式进行分离，但自己曾今做过的一个项目整个网站架构是按照模块进行分离的：
需求：设计一个网站，该网站的用途是根据用户需求生成网站，
例如一个企业展示网站，需要主页A，主页A包括布局（例如头部容器，导航容器，焦点图容器，然后之后再一个三列的容器，然后再页尾容器）。
每个容器中的模块都是根据用户需求加载，该页面A主要加载的模块：页头图片，水品导航、焦点图、最新新闻、最新产品、联系方式、页尾版权声明。
每个模块都有样式（例如颜色，背景图片，边距）；每个模块都有配置信息（例如最新产品模块是否显示产品描述）。
如果按照结构样式行为分离的方式设计，那么我必须将如上的七个模块的样式配置都提取成CSS文件，还有每个模块的渲染JS提取成一个JavaScript文件，这么操作真能提高开发效率以及维护效率么？
目前的实现是：
1. 最终的页面只有一个JS文件，无CSS和额外的JS文件。
2. 页面由布局（排版）和模块（功能）两个部分组成。
3. 服务端根据用户请求的页面，从数据库中读取JSON格式的页面布局配置，用户生成最终页面的布局。
4. 服务端根据用户请求的页面，输出关联的每个模块的HTML以及该模块对应的JS渲染脚本（JS渲染脚本包含了JSON格式的样式信息和其他配置信息）。
5. 输出页面。
最终页面的源码输出看起来类似如下：
------------------------------------------------
通用JS封装
模块1HTML
模块2HTML
模块3HTML
模块1脚本
模块2脚本
模块3脚本
------------------------------------------------
对于服务端，实际上是实现了：插件（对应一个DLL）、插件模板（例如导航有水平导航，有垂直导航）、插件视图这样的架构（视图会从模板继承样式，例如一个水平导航可以有水平导航1，水平导航2）。
现在假设我的页面B也需要和页面A同样样式同样配置的导航，那么在服务端只需要：
1. 选择导航插件
2. 选择导航插件中的“水平导航”模板
3. 配置该模板的颜色、背景图片、动画效果等配置，标记为TPL1
4. 使用TPL1生成视图，标记为View1和View2
5. 在页面A的布局位置放入View1，在页面B的布局位置放入View2
6. 若今后需要同时修改A和B的背景图片，只需要修改TPL1的背景图片
7. 若今后需要只修改B的背景图片，只需要修改View2的背景图片
HTML标签的语义化
先确定HTML，确定语义的标签，再来选用合适的CSS。
使用Firefox的Web Developer插件来禁用CSS，看页面展现效果。
例如一个标题和内容的模块方案：
<标题>这里是标题内容<a href="#">更多</a></标题><段落>段落一的内容</段落><段落>段落二的内容</段落>
这里的“更多”事实上不应该属于标题标签中，调整后如下：
<div><标题>这里是标题内容</标题><a href="#">更多</a></div><段落>段落一的内容</段落><段落>段落二的内容</段落>
当页面内容标签无法满足设计需求时，才会适当添加DIV和SPAN等无语义的标签来辅助实现。
提高CSS质量
最常用的组织CSS的方式：base.css + common.css + page.css
基础类应该具备通用性和原子性，例如：
.f12{font-size:12px;}.zoom{zoom:1;} 用划线表示从属关系：例如".timeList-lastItem"从属于".timeList"样式。
用前缀表示开发人员：例如".xf-timeList-lastItem"、".jn-timeList-lastItme"。
多用组合，少用继承的原则：将类中不稳定的部分分离出来，单独设置成一个类，相对稳定的剩下的部分设置成另一个类，通过类的组合（多个class）实现最终样式。
CSS的权重计算：HTML标签的权重是1，class的权重是10，id的权重是100；例如"strong.demo"的权重是10+1=11；例如"#test.red"的权重是100+10=110。
CSS sprite：利用background-position来实现。
CSS Hack：
1. IE条件注释，也可以用于JS的Hack
<!--[if gt IE 6]><link type="text/css" href="test.css" rel="stylesheet" /><![endif]-->
2. 选择符前缀
"*html"星号前缀只对IE6生效；
"*+html"星号加前缀只对IE7生效；
在向后兼容方面存在一些风险，不能保证以后的IE版本都不识别*html和*+html。
3. 样式属性前缀
"_width:60px;"只在IE6下生效；
"*width:60px;"在IE6和IE7下生效。
4. 超链接hover的兼容：
顺序：:link :visited :hover :active (lv ha)
display:inline-block
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} ul{list-style: none;} li{display: inline-block;*display: inline;*zoom:1;} ul li {border:solid 1px #eee;padding: 2px 20px;} </style></head> <body> <div> <ul><li>标题1</li><li>标题2</li><li>标题3</li></ul> </div> </body></html> position:absolute和float会隐式地改变display类型，不论之前设置了什么类型，都会让元素以display:inline-block的方式显示，就算显示设置display:inline或者display:block也无效。
IE6下的float双边距BUG就可以通过设置display:inline来解决。
水平居中的问题
给父元素设置text-align:center可以实现文本、图片等行内元素的水品居中。
确定宽度的块级元素可以通过设置margin-left:auto和margin-right:auto来实现。
不确定宽度的块级元素实现水平居中：
1. 可以通过将需要水平居中的块级元素放入table标签实现（不设置table标签的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中），缺点是增加了无语义的标签。
2. 改变块级元素的display为inline类型，然后使用text-align:center实现居中，缺点是块级元素变成行内元素后，无法设置长宽值等。
3. 通过给父元素设置float并设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中，缺点是设置了position:relative，如下所示：
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} .ccenter{position: relative;float: left;left: 50%;} .ccenter-in{position: relative;left: -50%;} .show{border:solid 1px #eee;margin: 10px;padding:10px;} </style></head> <body> <div class="ccenter"> <div class="ccenter-in show">这里的内容想要水平居中显示</div> </div> </body></html>
垂直居中的问题
父元素高度确定的单行文本的垂直居中可以通过设置line-height来实现。
CSS中有一个vertical-align属性只有在父元素为td或者th的时候才生效，在现代浏览器下（IE8+）可以设置块级元素的display类型为table-cell来激活vertical-align属性，但IE67下并不支持；
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} .ccenter{height: 200px;display: table-cell;vertical-align: middle;*position: relative;} .fixie67vmiddle{*position: absolute;*top: 50%;} .fixie67vmiddle-in{*position: relative;*top:-50%;} .show{border:solid 1px #eee;margin: 10px;padding:10px;} </style></head> <body> <div class="ccenter hcenter"> <div class="fixie67vmiddle"> <div class="ccenter-in hcenter-c show">这里的内容想要垂直居中显示</div> </div> </div> </body></html> 另外想要实现块元素居中，还可以通过更简单的方式：
.vhcenter{ width: 400px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -210px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */} 使用子选择器应对复杂变化
.content-lr-7025 .main{float:left;width:70%;}.content-lr-7025 .sidebar{float:right;width:25%;}.content-rl-7025 .main{float:right;width:70%;}.content-rl-7025 .sidebar{float:left;width:25%;} z-index相关问题以及Flash和IE6下的select元素
z轴在设置position:relative或absolute后被激活，z-index值越大越靠上。
z-index设置为负数可能会遇到些麻烦，例如当位于body之下时，可能事件会被透明的body挡住。
负边距引起的相邻元素位置重叠，取决于HTML标签出现的先后顺序，后出现的标签浮于先出现的标签之上。
Flash嵌入网页时有个wmode属性，可以设置为opaque和transparent来防止Flash始终浮于最上方。
select表单元素在IE6下会浮于绝对定位的元素之上，可以使用一个和绝对定位元素同样大小的firame元素，通过z-index放置在绝对定位元素之下，select元素之上来定位。
PNG图片的IE6透明问题
参考P130页。
通过滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_file',sizingMethod='crop')实现。
提高 JavaScript质量
匿名函数控制作用域。
定义命名空间。
统一入口。
JavaScript分层。
封装浏览器差异。
弹性编程，可扩展：组件通过class来标识，并通过实现getElementsByClassName来获取一组功能相近的标签。
可复用：组件指定根节点，保持每个组件之间的独立性。
通过传参实现定制。
this的指向
<a href="#" onclick="alert(this.tagName)">test1</a><a href="#" onclick="javascript:alert(this.tagName)">test2</a>
如上的test1显示的是A，但test2显示的是undefined。
同样的setTimeout和setInterval也会改变this指向，传递的相当于函数指针，this就变成window作用域了：
var test="hello";var o={ test:'o', go:function(){ alert(this.test); }};o.go(); // osetTimeout(o.go,1000); // hellosetInterval(o.go,2000); // hello 可以通过匿名函数来调整this指向，另外还可以通过call和apply来调整this指向。
自定义标签属性
JavaScript和HTML标签之间存在映射关系，HTML标签在JavaScript中作为DOM节点对象存在。
对于常规属性，通过使用n.xxx的方式读取，对于自定义属性，统一使用n.getAttribute方法读取。
自定义属性可以通过info=eval("("+info+")");来反序列化。
协作
1. 公共组件一人维护，各个子频道专人负责；
2. 视觉设计师完成设计后，和交互设计师沟通，确定设计可行性；然后先将设计图给公共组件维护者，看是否需要提取公共组件，然后再提交给相应频道的前端工程师，如果有公共组件要提取，公共组件维护者需要对频道前端工程师说明。
3. 如果没有公共组件提取，交互设计师直接和各栏目前端工程师交流，对照视觉设计师的设计图进行需求说明，前端工程师完成需求。
4. 前端工程师在制作设计时，先去common文件中查询是否已经存在设计图中的组件，如果有，直接调用，如果没有，则在自己频道的文件中添加对应的代码。
5. 前端工程师在制作过程中，发现有高度重用的组件，却未加入到公共组件中，则向公共组件维护人说明，然后由公共组件维护人决定是否添加该组件。
6. 公共组件维护者的公共组件说明文档，需要提供配套的图片和说明文字，方便阅读。
Quelle est la différence entre une balise HTML et un attribut HTML?May 14, 2025 am 12:01 AMHtmltagsdefinethrestructureofawebpage, whileatributesaddfunctionality andddetails.1) Tagslike ,, andoutlinethecontent'splacement.2) attributiontuchassrc, classe, et étyleenhancetagspecifyingImageSources, style, et de plus, améliorant la fonctionnalité et apparition.
L'avenir de HTML: évolution et tendancesMay 13, 2025 am 12:01 AML'avenir de HTML se développera dans une direction plus sémantique, fonctionnelle et modulaire. 1) La sémanisation permettra à la balise de décrire le contenu plus clairement, en améliorant le référencement et l'accès sans barrière. 2) La fonctionnalisation introduira de nouveaux éléments et attributs pour répondre aux besoins des utilisateurs. 3) La modularité prendra en charge le développement des composants et améliorera la réutilisabilité du code.
Pourquoi les attributs HTML sont-ils importants pour le développement Web?May 12, 2025 am 12:01 AMHtmlattributesarecrucialinwebDevelopmentForControllingBehavior, apparence et fonctionnalité.
Quel est le but de l'attribut ALT? Pourquoi est-ce important?May 11, 2025 am 12:01 AML'attribut ALT est une partie importante de la balise en HTML et est utilisée pour fournir un texte alternatif pour les images. 1. Lorsque l'image ne peut pas être chargée, le texte de l'attribut ALT sera affiché pour améliorer l'expérience utilisateur. 2. Les lecteurs d'écran utilisent l'attribut ALT pour aider les utilisateurs malvoyants à comprendre le contenu de l'image. 3. Les moteurs de recherche indexent le texte dans l'attribut ALT pour améliorer le classement SEO des pages Web.
HTML, CSS et JavaScript: exemples et applications pratiquesMay 09, 2025 am 12:01 AMLes rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML est utilisé pour créer une structure de page Web; 2. CSS est utilisé pour embellir l'apparence des pages Web; 3. JavaScript est utilisé pour obtenir une interaction dynamique. Grâce à des balises, des styles et des scripts, ces trois créent ensemble les fonctions principales des pages Web modernes.
Comment définissez-vous l'attribut Lang sur la balise ? Pourquoi est-ce important?May 08, 2025 am 12:03 AMLa définition des attributs Lang d'une balise est une étape clé dans l'optimisation de l'accessibilité Web et du référencement. 1) Définissez l'attribut Lang dans la balise, comme. 2) Dans le contenu multilingue, définissez les attributs Lang pour différentes parties de langue, telles que. 3) Utilisez des codes linguistiques conformes aux normes ISO639-1, telles que "EN", "FR", "ZH", etc. La définition correcte de l'attribut Lang peut améliorer l'accessibilité des pages Web et des classements de moteur de recherche.
Quel est le but des attributs HTML?May 07, 2025 am 12:01 AMHtmlattributesAsAntinelEntialFormenhancingWelements's-ctionality et appareil.EyyAddInformationTodeFineBehavior, Apparence et Interaction, faisant des websites interactifs, réactifs, et visuellement.
Comment créez-vous une liste dans HTML?May 06, 2025 am 12:01 AMTOCRÉATEALISTINHTML, USEFORDORDEDRILST ANDFORODEREDLISTS: 1) ForunDorDedlists, webrotemsinandUseForEachItem, Renderingasabulletedlist.2) FororderDlists, useAndFornumberredlists, personnalisable withthepeTypeTrributeforDiferentNumberStyles.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
Dreamweaver Mac
Outils de développement Web visuel
