在 DIV+CSS 布局时会遇到如何选择 html 标签布局的情况, 对于绝大多数前端来说非常简单, 但对于初学 CSS 的朋友们来说却是一个无形的问题. 下面本篇文章就来给大家介绍一下, 希望对大家有所帮助.
这里为大家简单介绍在 DIV+CSS 布局中如何选择 HTML 标签 :
1, 框架布局(使用 DIV 标签 )
在网页中框架布局一般使用 DIV 布局, 无论大小 DIV 盒子一般均使用 DIV 标签 (<div></div>) 布局.
2, 列表型布局(使用 ulli 标签)
遇到图片列表, 文章标题列表, 通常使用 ul li 列表标签进行布局. 当然使用这些标签时要进行设置需要 CSS 样式达到布局效果. 这样程序调用数据时候更容易做循环内容.
3, 标题型布局(使用 h1,h2,h3,h4 标签 )
遇到独立的栏目标题, 通常使用 h1,h2,h3,h4 标题标签, 这样布局内容具有层次感. 同时考虑 SEO 来说适当使用这些标题标签有利于优化排名.
4, 内容独立样式型(使用 span 标签 )
在一段文字中, 有几个文字需要单独设置一个颜色值, 这个时候可以对这几个文字加 span 标签, 对 span 标签单独设置 class 或直接 CSS 样式达到效果, 一般来说布局框架很少使用 span.
5, 功能型布局(img ,b ,strong ,u ,s 等标签)
遇到网页中引人图片使用 Img 标签; 遇到文字加粗可以使用 b 标签或 strong 标签, 遇到下划线可以使用 u 标签, 遇到文字贯穿线 (删除线) 使用 s 标签等, 有时不一定使用 CSS 来实现这些功能布局, 适当选用这些 HTML 标签从 SEO 方面更加好些.
6, 段落(p 标签 )
一般文章段落都是使用 p 标签, 即每段文字开始时候使用 & lt;p> 结束时使用 & lt;/p> , 这样文章段落分明.
7, 手动强行换行布局(br 标签 )
遇到文字需要换行的使用 br 标签即 "<br />", 值得注意 br 标签是单独的标签非盒子标签, 独立的一个标签, 什么地方需要换行就使用 br 标签.
8, 表格型(table 表格标签 )
在 HTML 布局中, 学习 DIV+CSS 并不意味着放弃 table 标签, 这个有时还是需要 table 标签的, 比如遇到表格型布局的, 还是需要 table tr td 标签布局, 这个时候使用表格布局优于 div 标签.
9, 表单布局(form ,input 等)
遇到表单布局, 比如注册, 登录, 填写数据提交地方等, 均是使用表单标签.
其它标签有待您发现与使用, 只有在实践才可以了解各标签的用法, 熟悉后自然会知道如何选择 HTML 标签布局网页.
来源: http://www.css88.com/qa/html5/11434.html