html基础知识
(1)标签介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>網頁介紹</title>
<style type="text/css">
body{text-align:center;}
.cls{font:SimSun;}
#table1 td{
font:"Times New Roman", Times, serif;
font-size:16px;
}
#table1 tr{background-color:#FFFFFF;}
h1{font-weight:lighter;
}
input{background:url(blog_i_060706_ws_001.gif);}
#maincontent{width:778px;}/*注釋*/
.main{
height:100%;
width:500px;
float:left;}
.wizard{
text-align:left;
height:100%;
width:278px;
float:right;}
</style>
</head>
<body>
<div>
<h1>test</h1>
</div>
<div id="maincontent">
<div class="main">
<table id="table1" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>dfgfdsg</td>
<td>dfss</td>
<td>fdsf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div class="wizard"><input type="button" style="width:70px;" size="20" value=" " /></div>
</div>
</body>
</html>
上面这段代码就是标准的网页构造。
注意:
建议大家不要用
font
标签,
w3c
已经不推荐使用了。
所有的标签以及属性建议大家都采用小写。
验证自己的网页中的CSS样式是否符合规范,大家可以去
http://jigsaw.w3.org/css-validator/验证。
这里注意的就是所有的标签都要闭合,例如:<span></span>,像有些标签之后一个的,例如br,那就写成这样,<br />,<input type=”text” />。
按钮推荐大家写成<button></button>。
下面是最简单的html的结构:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body>
</body>
</html>
如果包含有style样式,这些样式应该放在head之间,不要到处放置,给自己以后寻找造成麻烦。
script脚本一般也放在head之间,一般都是写成这样:
<head>
……
<style type=”text/css”>
</style>
<script type=”text/javascript”>
</script>
</head>
大家可以在这段代码的开头看到这么一句话“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”,下面就对这个doctype作一下介绍。
什么是
DOCTYPE
上面这些代码我们称做
DOCTYPE
声明。
DOCTYPE
是
document type(
文档类型
)
的简写,用来说明你用的
XHTML
或者
HTML
是什么版本。
其中的
DTD(
例如上例中的
xhtml1-transitional.dtd)
叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的
DTD
来解释你页面的标识,并展现出来。
要建立符合标准的网页,
DOCTYPE
声明是必不可少的关键组成部分;除非你的
XHTML
确定了一个正确的
DOCTYPE
,否则你的标识和
CSS
都不会生效。
XHTML 1.0
提供了三种
DTD
声明可供选择:
·
过渡的
(Transitional):
要求非常宽松的
DTD
,它允许你继续使用
HTML4.01
的标识
(
但是要符合
xhtml
的写法
)
。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
·
严格的
(Strict):
要求严格的
DTD
,你不能使用任何表现层的标识和属性,例如
<br>
。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
·
框架的
(Frameset):
专门针对框架页面设计使用的
DTD
,如果你的页面中包含有框架,需要采用这种
DTD
。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的
DOCTYPE
理想情况当然是严格的
DTD
,但对于我们大多数刚接触
web
标准的设计师来说,过渡的
DTD(XHTML 1.0 Transitional)
是目前理想选择
(
包括本站,使用的也是过渡型
DTD)
。因为这种
DTD
还允许我们使用表现层的标识、元素和属性,也比较容易通过
W3C
的代码校验。
注:上面说的
"
表现层的标识、属性
"
是指那些纯粹用来控制表现的
tag
,例如用于排版的表格、背景颜色标识等。在
XHTML
中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
DOCTYPE
声明好以后,接下来的代码是:
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们
HTML4.0
的代码只是
<html>
,这里的
"xmlns"
是什么呢?
这个
"xmlns"
是
XHTML namespace
的缩写,叫做
"
名字空间
"
声明。名字空间是什么作用呢?
标明在所处的这个页面内所用到的标记属于那个命名空间
.
在不同的命名空间可以有相同的标记表示不同的含义
.
所以有必要写明标记是属于那个命名空间的 .
所以有必要写明标记是属于那个命名空间的 .
(2)css介绍
css全称Cascading Style Sheet(层叠样式表),至于css的优点这里就不介绍,与我们现在写程序没有太大的关系,有兴趣可以搜索一下相关文章了解一下。
css样式可以有3种方式引用:
1、通过link标签引用
<link href="css.css" type="text/css" rel="stylesheet" />,link标签一般写在meta标签后面。
2、在head的style中定义,可以参考上面例子的代码。
3、在html标签中直接写style属性,例如:
<input type=”text” style=”width:100px;” />
优先级依次递增,也就是说如果我在css.css中也定义了input的width属性,但在页面最终起作用的是style=”width:100px;”。
css定义可以采用“属性—属性值”这种对应的方式进行设置,width:100px与width=100px,都是正确的。
第一种与第二种的写法都是一样的,如下:
body{text-align:center;}
.
cls{font:SimSun;}
#maincontent{width:778px;}/*注釋*/
#table1 td{
font:"Times New Roman", Times, serif;
font-size:16px;
}
|
这里列出了常见的4种方法来控制样式:
第一种body就是直接控制body标签下的所有元素的样式,在这里就是所有元素都居中。其下属的元素无需作任何设置即可发生作用;
第二种就是常见的class=”cls”,就不作说明;
第三种就是设置id为maincontent的元素的样式,不过大家请牢记,页面中的元素的id不要有重复;
第四种就是设置id为table1下的所有td的属性,这种方式与第一种类似,只是它仅仅控制部分元素的样式。比如:我可以把第一个table的文字设置成红色,第二个table的文字设置成蓝色,用第一种方式无法实现。
用的频率最高的就是后3种,不过我们目前用过的也就是第二种,其实其他2种也是很好用的。
用css控制的话,页面完全可以实现的很漂亮,大家可以看一下
http://blog.sohu.com/business这个网页,就是利用了众多的css样式来实现的。
也许大家现在的css掌握的不是很好,但大家尽量使用css来控制,不要一个页面打开就是一个table,然后在table中进行布局,这样有很大缺陷的,table即使border、cellspacing、cellpadding全部都设置为0,那这个table也是会有宽度的。
![](https://p-blog.csdn.net/images/p_blog_csdn_net/lddongyu/ece94b8f9f7b4c31a73b57d29520bd15.png)
从这个图就可以看出这些table没有对齐,其他的就需要各位自己体会了。
(3)javascript
这个东西大家都比较熟悉,简单的大家都了解一些,就是说一下注意的地方。尽量不要去使用只有ie支持的函数,例如:document.all,可以使用document.getElementById,document.getElementsByName来替换。
请记住在页面不要使用重复id,如果同时设置了id与name的话请保持一致,避免ie的bug。
document.getElement
sByTagName与document. getElement
sByName得到的都是对象数组(即使数组中只有一个对象元素),而document.getElementById仅能得到最后一个对象(如果id相同的话)。