XHTML+CSS教程:灵活运用HTML标记

2016-02-20 00:08 6 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的XHTML+CSS教程:灵活运用HTML标记，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

div+css网页布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。

　　什么时候应该用DIV？

　　虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）div id="header"　　这里就是头部框架里要写的内容/div　　当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.

　　本人观察了下一个著名网站的首页代码,它的头部定义代码如下:   ul id="navbar"
   li id="articles"
   a href="/articles/" title="Articles"Articles/a/li
   li id="topics"
   a href="/topics/" title="Topics"Topics/a/li
   li id="about"
   a href="/about/" title="About"About/a/li
   li id="contact"
   a href="/contact/" title="Contact"Contact/a/li
   li id="contribute"
   a href="/contribute/" title="Contribute"Contribute/a/li
   li id="feed"
   a href="/feed/" title="Feed"Feed/a/li
   /ul
   h1 id="masthead"
   a href="/"
   img src="/pix/alaLogo.gif" alt="A LIST Apart: For People Who Make Websites" /
   /a
   /h1div id="ish"
a href="/issues/214" title="Issue 214"No. em214/em/a
/div

　　定义了最上面的导航(ul部分),左边的大Logo和那个圆圆的No.xxxx的标记.

　　他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么？因为他活用了HTML提供的标签,以及样式名称的定义

　　其它最常用的布局标签
h1
　　这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢？而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^

ul
　　这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)

b
　　这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择

h2
　　h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p

来源:http://www.tulaoshi.com/n/20160220/1631360.html

上一篇： Word2010中给符号设置自定义快捷键
下一篇： CSS 3给我们带来了什么惊喜？

看过《XHTML+CSS教程:灵活运用HTML标记》的人还看了以下文章更多>>

关于DIV+CSS和XHTML+CSS的理解

标签： Web开发

WEB标准是一系列标准的集合，并不是仅DIV+CSS布局就可以实现。以CSS网页布局只是标准的基础之一。DIV+CSS布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构，结合CSS最大程度使表现与内容相分离。一位网友对W3C标准、重构与CSS布局的理解：不知道从什么时候开始，在网络上到处可以看到div+...

IOS8灵活运用访问限制功能

标签： iphone iPhone 5s iPhone 6 iphone刷机

IOS8灵活运用访问限制功能在日常生活中，有时需要隐藏一些系统应tulaoshi用，例如相机、浏览器等。而iOS系统中自带一个永久的隐藏部分系统应用的功能，还可以随时修改。操作方法如下：第一步，打开设置应用，进入通用选项页面，点击进入访问限制设置。第二步，输入访问限制密码。第三步，进入访问限制页面...

灵活运用PowerPoint绘制比赛计时器

标签：电脑入门

最近学校要举办一次英语口语比赛，其中有一个环节是自由演讲，时间为30秒，由选手自己选定主题。领导决定由我来设计一个计时系统，要求能够实时显示选手剩余时间。我决定选用PowerPoint 2003，利用自定义动画中的出现方式，设置每一个对象的延时为1秒来实现，下面我详细介绍一下制作过程。输入标题打开PowerPoint 2003，选择空演示文稿，版...

灵活运用c语言实现高级功能

标签：编程语言网络编程

C语言以其简洁、灵活、表达能力强，产生的目标代码质量高，可移植性好而著称于世。巧妙、灵活地运用C可以进一步挖掘出其潜在的功能。 1、字符数组和字符指针指针和数组是C最具特色的一部分。数组是占用预分配的连续空间，C语言中对连续空间的访问可以有以下几种方法：加下标构成数组是最直接的；常量字符串也可...

div+css与xhtml+css是什么意思?

标签： Web开发

不知道从什么时候开始，在网络上到处可以看到div+css，到底什么是div+css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使用xhtml的标签吗？可为什么还是有这么多div+css呢？既然可以div+css，那为什么不可以叫span+css ul+css li+css等等呢？疑问，满脑子的疑问!为了这个疑问，我把自己脑子里的东西从最底层翻了一遍。...

查看更多精彩>>