浅谈HTML的初步了解

时间:2022-11-02 12:35:52

         第一次涉及到网页相关制作相关内容的话,可能第一个接触到的都会是html,之所以如此,是因为所有网络编程说白了呈现在客户面前的就是网页,不论在过程中服务器如何如何编译处理,最终浏览器获得的无非就是一张静态页面。

         网页可以分为静态页面和动态页面,两者的区分可不是说静态页面上面全部都是不能动的东西。同样的,即使页面上有动画视频,也不能简单的归为动态。我个人的理解就是静态页面是指可以不通过服务器端编译,可以本地修改本地浏览器直接浏览效果的页面,可能会涉及到htmlcss和一些脚本语言例如JavaScript。动态页面与静态页面相比最大的改变在于能够与服务器进行数据的交互,用户通过填写一些表单,选择一些下拉框等方式提交数据从而获取到只与自己访问要求相符合的页面。举个比较简单的例子就是,网络上很多的登录,用户要想访问到自己的个性空间,就必须要提交一个账户和密码,通过服务器端与数据库的对比验证通过,才回返回一个访问私人页面的权限,这就是动态网页所作的事情。

         前面废话多了,下面还是回到html的主题上。HTML,全称是什么百度就知道,作为一种超文本标记语言,其实就是一堆已经定义了作用和使用方法的标签。只要按照特定的要求使用,就能完成一张静态网页的制作。

首先要了解到的是,html分为“对标签”和“单标签”。非常容易区分,对标签一定是”<xxx>   </xxx>”的形式,后标签与前标签内容一致只是多一个斜杠。单标签则是”<xxx />”的形式。有些朋友可能接触过一些标签所以会有疑问,他们见过的单标签为 “<xxx>”形式,没有出现斜杠,在规范中已经明确的要求,单标签需要使用标签名加上一个空格加上一个斜杠的规范写法。虽然现在对于不加斜杠的单标签仍然支持,但为了规范的推广还是以规范形式书写较好。

         网页最基础的框架:

<html>

  <head>

  <title></title>

</head>

  <body>

 

</body>

</html>

 

我们来一个个标签的对比认识。可以看见目前列出的全部为对标签(注意对标签需要严格检验嵌套关系,不然很可能出现错误)。<html></html>标记整个文档为html文档,包含整个网页所有内容,是最外面的一层衣服。<head></head>包含的<title></title>标签是页面名称,会显示在浏览器的标签上,<head></head>标签本身则是能包含一些页面所带的配置信息,例如页面用什么样的编码(常用GB2312UTF-8)、是否包含一些外联文件(如css样式表,js脚本代码页等)、和meta标签(很复杂很强大,有兴趣可以百度了解下)暂时不多接触。

接下来<body></body>则是整个页面的重头戏,所有的注入文本,图片,音频,视频,flash元素等都是通过相对应的标签应用于这块区域。

 

常用而且需要较好掌握的标签为<table></table>表格标签和<form></form>表单标签。

 

表格标签不单单用于简单点把一些特殊数据列在表格中,还会用于整个页面的布局排版。

简单形式:

 

 

<table>

<tr>

  <td></td><td></td>

</tr>

<tr>

  <td></td><td></td>

</tr>

</table>

 

新建一个txt文档,把这些复制进去,然后保存关闭,后缀改为html或者htm(无区别),就可以用浏览器看到效果了。在每一张表格(一对<table></table>就是一张完整表格),一对<tr></tr>表示一行,每对<td></td>表示一格。也就是说,真正填写表格内容的地方应该是每对<td></td>的中间。<td>标签有两个比较常用的属性,colspanrowspan<td colspan=”2”></td>表明这是一个跨两列的单元格,同样的rowspan的作用就是跨行。具体的作用大家可以在尝试和摸索中了解,这不是html 的教程所以也就不多说了。推荐大家的一个练习方式是,用表格制作一张课程表(里面包含了跨行跨列,是不错的排表练习)。

 

说完table,该说说form了,<form></form>表单标签,在静态页面中的作用可能还不是那么明显,在接触动态网页制作时,就绝对离不开了,表单中依靠<input>等强大的标签,可以轻易的呈现出一份供用户填写数据,或进行选择的表单,完成后通过表单自带的提交功能,就能将表单中填写的属于你的个人信息提交至服务器,从而实现交互中的重要一步。常见的表单例子就是网上的注册页面,里面的按钮,文本框,下拉框,单/多选框都是表单中的标签。

简单形式:

<form>

  <input type=”text”>

  <input type=”button”>

  <input type=”submit” value=”提交”>

  <input type=”reset” value=”重置”>

</form>

 

此外的一些小细节,由于我不知道如何组织语言,所以一股脑的全部写在这边吧。

1.       注释,既然是一门语言,肯定除了代码外还会有一些需要记录但是切不要求显示的内容,用<!- -  - ->把需要注释的内容放在当中,就不会被浏览器当html处理了;

2.       输入时需要注意使用英文输入,尤其是引号,括号之类的特殊字符,可能在中文输入状态下输入看不出什么,但在运行中会出错,检查起来也会很麻烦,所以尽量使用英文状态输入;

3.       Html是不区分大小写的,但脚本语言如JavaScript是区分的,所以要注意;

4.       常见的网页布局有tablediv+css两种,随着规范的完善和推广,div+css越来越受到关注,优越性也不断体现。相比较,table虽然在制作时可能比较简单有效,但对于网页的后期维护会造成很大的困扰(牵一发而动全身,表格一旦确定,要改变一格就会需要对几乎整个表格进行修改,尤其运用大量rowspancolspan的复杂表格,改动更是繁琐而且易错)。不过div+css也存在相对的局限性,主要表现在浏览器的支持上,由于css主张的是html完全的放弃对页面的修饰而只提供内容的定义,所以css提供了几乎所有需要的样式修饰,但正由于这点,不同浏览器之间对css的支持率出现了很大的偏差,因此,css虽然强大,却容易出现在一些浏览器中显示正常,另外一些却显示混乱的情况。所以tablediv+css的取舍还是要大家自己判断。