1、DIV布局与标准化代码网聚社张慥什么是DIV？可定义文档中的分区（division）。它可以把文档分割为独立的、不同的部分。可以用 id 或 class 来标记它的身份（主要是用于样式表的分离和方便选择器的选取）div元素是一个块元素，如果不做特殊说明，它的默认宽度是就是其父元素的宽度（如：body的宽度为1000px，在body里面的div不设置参数的话，也默认为1000px）div设置了宽度后，即使比其父元素的宽度值小，也会占据一行。浏览器默认在DIV标签后会加上一个换行标签（如：演示）DIV与CLASS以及ID的搭配 正如每个人都有自己的身份，div标签也是可以通过class或id来拥有
2、自己的身份的。如：moonmoon 这两个div都有了一个身份或者说地址 div一般都有相应的class与id与之对应，表示这有什么样的功能或者是哪一部分，如top 这表示这是一个页面头部nav 这表示这是页面的导航，诸如此类 div加上class或者id有利于样式表的分离以及脚本选择器的应用，也使代码看起来更清楚，功能更明白CLASS与ID的区别与命名规则 class与id的区别在于1.id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。class不受约束2.基于上面一点id的唯一性，id往往用于强调该部分的重要性。3.在防止身份重用的情况下，class往往更受人喜欢
3、。class与id的命名都必须用英文，不要以下划线和数字开头。对于英文的命名必须以相应的单词（或其缩写）或组合词来表示身份，如导航用nav，内容用content，底部用footer等等。关于有语义标签的应用（标准化代码）作为一名合格的程序员，往往能编写出高质量且清晰的代码。那么什么样的代码才符合标准呢？我简单地归纳了几点：1.要有清晰的格式，讲究对称与缩进2.对于组成元素的命名要尽量准确，不能随便捏造3.尽量使用有语义标签，布局方面以div为主，数据化布局以table为主。4.团队合作时要尽可能多用注释来使人阅读容易5.网页的主要编写顺序一般是：框架（HTML）样式（CSS）脚本（JS）6.在
4、写代码之前先要分析页面的组成以及可重复调用块的个数，优化代码7.页面样式最好分离成单独的样式表，脚本最好分离成单独的脚本文件诸如此类等等。有语义标签的汇总标签名标签名英文英文中文中文divdivision分隔spanspan范围olordered list有序列表ulunordered list无序列表dldefinition list定义列表dtdefinition term定义术语dddefinition description定义描述deldeleted删除insinserted插入有语义标签的汇总标签名标签名英文英文中文中文h1h6header头部pparagraph段落hrhoriz
5、ontal rule水平尺aanchor锚abbrabbreviation缩写词acronymacronym取首字母的缩写词addressaddress地址varvariable变量prepreformatted预定义格式有语义标签的汇总标签名标签名英文英文中文中文blockquoteblock quotation区块引用strongstrong强调ememphasized加重bbold粗体iitalic斜体bigbig变大smallsmall变小supsuperscripted上标subsubscripted下标有语义标签的汇总centercenter居中brbreak换行换行fontfon
6、t文字uunderlined下划线sStrikethrough删除线fieldsetfieldset域集legendlegend图标captioncaption标题使用语义标签的好处 代码更清晰，团队合作起来更简单 具有极大地浏览器亲和性，兼容性好 运行效率高，代码不冗繁 在样式表被禁用的情况下仍能表现出极好的效果 有利于代码更好地结构化非语义化实例 HTMLhtml是一门很容易上手的基础性语言,相比较其他语言来说，html要容易得多,那么它有什么特点呢？HTML 指的是超文本标记语言(Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言(markup language)标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页 语义化实例 HTMLhtml是一门很容易上手的基础性语言,相比较其他语言来说，html要容易得多,那么它有什么特点呢？HTML 指的是超文本标记语言(Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言(markup language)标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页 谢谢观赏WPS OfficeMake Presentation much more funWPS官方微博kingsoftwps
