CSS3秘笈:第一章
1.<div>和<span>标签:
<div>和<span>标签:就像是一个空的容器,我们要往里面填充内容。一个div就是一个块,意味着它的前后都要空一行;而span则呈嵌套模式,成为一个段落的一部分。<div>标签标示任何不连续的内容块,像一个段落或者标题。<span>标签用于行内元素,出现在一个更大的段落或标题中的文字或者短语。布局如:
<div id=”footer”>
<p>Copyright 2006,<span class=”bizName”> CosmoFarmer.com</span></p>
<p>Call customer service at 555-555-5501 for more information</p>
</div>
2.常用于网页结构的标签:
·<section>标签中包含一组相关的内容,就像一本书中的章节一样。
·<aside>标签中包含与其周边的内容相关的内容,如杂志上的侧边栏一样。
·<footer>标签中包含通常放在页面底部的一些信息。如版权声明、法律信息、一些网站的导航链接等等。
·<nav>元素用来包含重要的导航链接。
·<figure>标签用于说明图。可以把<img>标签放在其中。H5还有一个新标签<figcaption>,它用来显示图片的说明文字。
3.如何让IE8及更早的版本支持HTML5的标签?
在</head>标签之前放置以下代码:
<!--[if lt IE 9]>
<script src=”//html5shiv.goolecode.com/svn/trunk/html5.js”></script>
<![endif]-->
这段代码使用了一条被称作“IE条件注释(IECC)”的东西,嵌入了一些只有IE9之前的版本可见的JavaScript代码,其他浏览器会自动忽略它。
4.注意事项:
(1)不要用<font>来控制文本的显示。
(2)不要用<b>和<i>来使文字变成粗体和斜体。如果需要强调某一个字或者短语可以使用<strong>标签将文本显示为粗体,对于次要的文字可以利用<em>标签进行强调(浏览器会将该标签内容显示为斜体)。
(3)不要用<table>标签进行网页布局。它仅仅用于显示表格式的信息,如电子数据表、进度表和图表等。
(4)不要使用仅能装饰内容外观的笨拙的<body>标签属性。
(5)不要滥用<br>标签。
5.如果还不能确定怎样用HTML来创建完善的网页, 那么可以参考以下小技巧:
(1)用标题表示文本的相对重要性。当两个标题对于网页的主题同样重要时,那就给这两个标题使用相同等级的标题;如果有一个标题不太重要,或者它是另一个标题的子标题就给它使用下一级的标题。一般来说,最好按顺序使用标题,尽量不跳号。
(2)对文本段落使用<p>标签。
(3)对于包含多个相关项目的列表,则使用无序列表(<ul>),比如导航链接、标题,或者诸如此类的一组提示语。
(4)使用有序列表(<ol>)来表示一个过程的步骤,或者定义一组项目的顺序。本书教程就是一个好范例,如“最受僧侣欢迎的十大网站”这类排名也是不错的例子。
(5)如果要创建一个术语表及其定义或描述,则要用<dl>(定义列表标签),并结合使用<dt>(定义术语)及<dd>(定义描述)标签。
(6)如果要包含一段引用语,就要尽量对长段落使用<blockquote>标签,对简短的引语则使用<q>标签。
(7)利用一些生僻的标签如<cite>来引用书的标题、新闻报道或网站。用<address>标签来标识和提供该网页作者的联系信息。
(8)绝对不要使用任何仅用于改变文本或图片展示的标签或属性,因为CSS完全可以轻松实现。
(9)如果没有适当的HTML标签,却又必须标识网页上的某一个元素或某一组元素,以获得与众不同的展现效果时,可以使用<div>和<span>标签。
(10)不要滥用<div>标签。对于导航栏可以使用HTML5的<nav>标签。
(11)要记得关闭标签。
(12)用W3C检验器来检测网页。
6.doctype(文档类型)的重要性。
HTML遵循一定的规则,这些规则都包含字一个文档类型定义文件中,也称作DTD。每一个HTML版本都有一个对应的DTD。文档类型声明告诉浏览器正在使用的HTML版本,让浏览器显示正确网页。
HTML5的文档类型很简单:
<!doctype html>
CSS3秘笈:第一章的更多相关文章
- CSS3秘笈复习:第一章&第二章&第三章
第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@i ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
- CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
- CSS3秘笈复习:第九章&第十章
第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...
- CSS3秘笈:第七章
第七章 margin.padding和border 1.盒模型:四个属性: (1)padding:内容与其边框线之间的空间. (2)border:盒子周围的直线 (3)background-colo ...
- CSS3秘笈:第六章
第六章 文本格式化 1.font-family 属性设置字体.除了指定想要的字体之外还要使用备用字体.例如: p{ font-family:Arial ,Helvetica ,sans-serif; ...
- CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
随机推荐
- UVALive 6910 Cutting Tree(并查集应用)
总体来说,这个题给的时间比较长,样例也是比较弱的,别的方法也能做出来. 我第一次使用的是不合并路径的并查集,几乎是一种暴力,花了600多MS,感觉还是不太好的,发现AC的人很多都在300MS之内的过得 ...
- apache增加php版本
把新的php版本解压到与旧的php版本相同目录 在新的php文件夹根目录复制一个 php.ini-development 重命名为 php.ini打开php.ini, 搜索 extension_dir ...
- POJ 2656 Unhappy Jinjin
#include <stdio.h> int main() { ) { int i, n; ; scanf("%d", &n); ) break; ; i &l ...
- $_SERVER 等超全局数组的用法 $_COOKIE $_GET $_SESSION
$_SERVER 服务器和执行环境信息 例如 $_SERVER['SERVER_NAME']; 当前运行脚本所在的服务器的主机名.如果脚本运行于虚拟主机中,该名称是由那个虚拟主机所设置的值决定.$_G ...
- CSS3的基础知识点
面临找工作之际,又将CSS3的基础知识撸了一把,做了相应的笔记,主要是方便自己查阅,参考的是W3C的知识. 1.CSS背景 (1).background-size 属性 background-s ...
- Struts对输入数据的校验
当我们在登录或者是注册时需要对用户输入的数据验证,以前都是浏览器传送数据到后台,后台对数据进行校验,如果有错误就带着错误信息转发带登录或者注册页面, struts可以简便的对输入数据进行校验 首先我们 ...
- HDU 3835 R(N)(枚举)
题目链接 Problem Description We know that some positive integer x can be expressed as x=A^2+B^2(A,B are ...
- MVC3+EF4.1学习系列(七)-----EF并发的处理
看这篇文章之前 推荐园子里的 这个文章已经有介绍了 而且写的很好~~ 可以先看下他的 再看我的 并发 1.悲观并发 简单的说 就是一个用户访问一条数据时 则把这个数据变为只读属性 把该数据变为独占 ...
- digitalocean优惠码30美元1G内存VPS免费使用两个月
著名的云主机服务商CloudWays送福利啦!CloudWays是一家云主机网站服务商,与Digitalocean和亚马逊AWS开展合作,新用户注册验证手机即可赠送价值30美元的免费VPS主机. 申请 ...
- linux服务器被攻击处理过程
开始排查 首先检查日志,以前做过安全运维,所以写过类似于检查命令和工具,开始一一排查. #查看是否为管理员增加或者修改 find / -type f -perm #显示文件中查看是否存在系统以外的文件 ...