html基础知识

    技术2022-05-11  89

    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也是会有宽度的。 从这个图就可以看出这些table没有对齐,其他的就需要各位自己体会了。   (3)javascript 这个东西大家都比较熟悉,简单的大家都了解一些,就是说一下注意的地方。尽量不要去使用只有ie支持的函数,例如:document.all,可以使用document.getElementById,document.getElementsByName来替换。 请记住在页面不要使用重复id,如果同时设置了id与name的话请保持一致,避免ie的bug。 document.getElement sByTagName与document. getElement sByName得到的都是对象数组(即使数组中只有一个对象元素),而document.getElementById仅能得到最后一个对象(如果id相同的话)。  

    最新回复(0)