通过题目，大家已经明确知道，从这一节开始介绍DHTML中的最基础的部分HTML，对于HTML等概念上一节已经做了概述，这一节不再赘余。在学习HTML之前，先告诉大家一个好消息，HTML不难，比C++、Java等语言的面向对象简单很多，并且你也不用安装庞大的Eclipse和Visual Studio，只要有浏览器就可以运行，哈哈哈，慢慢得意去吧，当然你也会慢慢发现的。

HTML是DHTML中最基础的部分，也是DHTML中最先出现的内容，因为只有有了HTML标签内容，DOM才会产生DOM树，因为现在没有学这些就不再提了，我们就从最简单的开始。

为了体验HTML的神奇，你可以打开一个记事本程序，然后在里面写如下代码：

<html>

<head>

</head>

<body>

Hello HTML!

</body>

</html>

写完代码保存，然后把文件的扩展名改为html，不知道什么是扩展名的可以绕过啊，最后用你的浏览器打开这个文件，奇迹便出现了，你制作滴属于你自己的第一个网页就出来了，当然只有一句Hello HTML，不要急，毕竟出来了，良好的开端便是成功的一半。

简单的说完了，下面就该介绍难一点的了，先不忙，工欲善其事必先利器，打开上一节给大家共享的HTML帮助文档。我给大家分享的是HTML5的帮助文档，HTML5是一个非常强大的标记性语言，在这里学习HTML用也可以。

打开目录会发现，全是标签，没错，全是标签，这未免也太简单了吧，没错就是这么简单，再牛逼的网站都是这些标签组成的，所以牛人和你用的是一套标签，只是牛人比你更有思想，那么怎么才能有牛人的思想呢？那就学习呗，学习完了再想，没学想也是白想。

我这里主要介绍常用的标签，不常用的标签大家自己看帮助文档自己体验吧，太简单了。

如上图，其实上图是一个简单的DOM树结构，深层次的就不提了，上面的标签黄色的就不介绍了，主要让读者自己探索，接下来我就开始介绍紫色的标签。

由上图我们就可以看出来，HTML代码分为两部分，一部分是HEAD（头），一部分是BODY（身体），各自有各自的子节点，HEAD的Style节点主要用于嵌入CSS样式的，这里先不介绍，以后介绍CSS时一起介绍，Script节点主要是嵌入Javascript脚本的，当然也可以嵌入其他脚本，但是这里只介绍Javascript脚本，因为Javascript越来越火了，因为它的存在后续又诞生了很多更好技术，像Jquery和Ajax等了，所以Script节点这里也不介绍饿了，等以后介绍Javascript时一起介绍。

那么介绍这些标签该从哪个开始介绍呢？从最底层的开始吧，因为没有最底层的东东，介绍Div比较抽象，由于篇幅问题，本节只介绍Table。

在学习之前先看一下Table标签的层次的结构，上图就有。Table标签是干什么用的呢？Table是用来定义表格。在标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。其实早期的网站，为了看起来非常直观工整，都是用Table标签做的。下面我们按着上图的层次结构把代码写下来：

<table>

<tbody>

<tr>

<th></th><th></th><th></th>

</tr>

</tbody>

<tbody>

<tr>

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

</tr>

</tbody>

</table>

从代码我们可以看出，tr代表一行，th和td代表的都是单元格，而非列，th和td到底有什么区别呢？试试就知道了，那么tbody是什么作用呢？tbody有一个非常贴心的作用就是，如果我们不加tbody，tbody会默认加到table标签内，那样的话，当我们打开一个表格的时候，只有当表格数据全部加载完成时才会显示给用户，如果我们把每行都加tbody标签，那么当每行数据加载完成时，加载完的数据就会显示到表格中，这样会使用户感觉更有亲和力。

下面给出一个简单的例子，供大家参考，关于表格的学习，不能只停留在下面的例子，还要根据帮助文档和常见网站的布局多练习多体验，这样才能做到熟能生巧，才会变成牛人。什么是牛人？牛人就是把别人不愿意做的事情做了很多遍，于是便成了牛人。

例子：

<table>

<tbody>

<tr>

<th>姓名</th><th>年龄</th><th>性别</th>

</tr>

</tbody>

<tbody>

<tr>

<td>张三</td><td>13</td><td>女</td>

</tr>

<tr>

<td>李四</td><td>14</td><td>男</td>

</tr>

<tr>

<td>王二</td><td>12</td><td>女</td>

</tr>

</tbody>

</table>

运行完后发现，没有边框呢？嘿嘿，这就得需要用到table的属性了，太简单了，不介绍了，自己看着帮助文档实现吧。再见。

DHTML【2】--HTML的更多相关文章

  1. DHTML【1】

       什么是DHTML呢?英文全称(Dynamic Hypertext Markup Language),即动态超文本标记语言,DHTML不是一个独立的新技术,而是多种技术的综合,它能使HTML变的更 ...

  2. DHTML【8】--CSS

    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性.上一节我们也说过,先不用管那个Style标 ...

  3. DHTML【9】--Javascript

    大家好,好长时间不见了,因为博主最近在驾校学习开车,所以耽误了DHTML的更新日程,对此实感愧疚. 好了,不再得瑟了,接下来该介绍DHTML中比较核心的一个东东—Javascript. 初看Javas ...

  4. DHTML【6】--CSS

    从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网.网易首页等网站都非常好看,那都是一些 ...

  5. DHTML【11】--DOM

    大家好,从今天开始,我们将进入DOM的学习. DOM?DOM是何东东呢?大家还记得我在前面提过的DOM树吗?就是我在前面讲HTML的时候画的那个图,那个其实就是一个简单的DOM树,浏览器在解析HTML ...

  6. DHTML【10】--Javascript

    大家好,这一节主要介绍Javascript的函数.函数是Javascript的核心中的核心,这么强调一点都不过分,相信没有人反对,如果有人反对,你以后可以不用函数,呵呵,说的有点绝了啊. 下面看一下J ...

  7. DHTML【3】--HTML

    从这一节开始我们就开始介绍HTML的标签了,首先我们来介绍Form标签. Form标签也称Form表单,From是与服务器交互最重要的标签,此标签必须做到随手就写,写完就正常运行的地步. 那么什么是F ...

  8. Python开发【前端】：DOM

    DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...

  9. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

随机推荐

  1. JAVA - 多线程的同步

    多线程的同步 1. 锁对象. 应用场景:当某个数据可能被其他线程修改时,给涉及到数据的方法上锁,保证同一时刻只有拥有这个锁的线程能访问该数据,其他要调用这个方法的线程被阻塞.注意:必须是不同线程访问同 ...

  2. 转：浅析基于微软SQL Server 2012 Parallel Data Warehouse的大数据解决方案

    综述 随着越来越多的组织的数据从GB.TB级迈向PB级,标志着整个社会的信息化水平正在迈入新的时代 – 大数据时代.对海量数据的处理.分析能力,日益成为组织在这个时代决胜未来的关键因素,而基于大数据的 ...

  3. android 写文件权限

    首先,在manifest.xml中添加user permission:<uses-permission android:name="android.permission.WRITE_E ...

  4. IC 小常识

    IC产品的命名规则: 大部分IC产品型号的开头字母,也就是通常所说的前缀都是为生产厂家的前两个或前三个字母,比如:MAXIM公司的以MAX为前缀,AD公司的以AD为前缀,ATMEL公司的以AT为前缀, ...

  5. std::vector的分片拷贝和插入

    一般我们在用Qt的QByteArrary或者List的时候,会有相应的append的方法,该函数,就是把数据加入末尾.但是std::vector就没有相应的方法.但是我们可以用insert方法来实现: ...

  6. Boost编程之获取可执行文件的当前路径

    #include <boost/filesystem/path.hpp> #include <boost/filesystem/operations.hpp> std::str ...

  7. Linux企业级项目实践之网络爬虫（29）——遵守robots.txt

    Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以 ...

  8. 深入理解linux网络技术内幕读书笔记(三)--用户空间与内核的接口

    Table of Contents 1 概论 1.1 procfs (/proc 文件系统) 1.1.1 编程接口 1.2 sysctl (/proc/sys目录) 1.2.1 编程接口 1.3 sy ...

  9. Tomcat类加载器

    1JVM类加载机制   JVM的ClassLoader通过Parent属性定义父子关系,可以形成树状结构.其中引导类.扩展类.系统类三个加载器是JVM内置的. 它们的作用分别是: 1)引导类加载器:使 ...

  10. zookeeper[5] zookeeper集群配置及伪集群配置

    参考:http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html 集群配置: 1.配置文件conf/zoo.cfg,除了单机模式的配置之外, ...