HTML 30分钟入门教程

时间：2021-05-28

运行下面的代码就可以了
HTML 30分钟入门教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; background-color:#eee} .name { font-weight:bold } dl {margin-left:20px} dt {font-weight:bold} .trans {color:red}

HTML 30分钟入门教程

作者：deerchao 来源:unibetter大学生社区 转载请注明来源

本文目标

30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。

什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比"文本"更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

HTML是什么样的

简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。

下面是一个最简单的HTML文档：

<html>   <head>     <title>第一个Html文档</title>   </head>   <body>     欢迎访问<a href="http:///forums/">Unibetter大学生论坛</a><a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

分段与换行

由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。

<p>这是第一段。</p><p>这是第二段。</p>

也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。

这是第一段。<br>这是第二段。<br />这是第三段。

有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：

<div>页头内容</div><div>主体内容</div><div>页脚内容</div>

表格

HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。

<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。

<table>  <tr>    <td>2000</td><td>悉尼</td>  </tr>  <tr>    <td>2004</td><td>雅典</td>  </tr>  <tr>    <td>2008</td><td>北京</td>  </tr></table>

<tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头，表正文，表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

<th>和<td>非常相似，也用在<tr>里边，不同的是<th>代表这个单元格是它所在的行或列的标题。

<table>  <thead>    <tr><th>时间</th><th>地点</th></tr>  </thead>  <tbody>    <tr><td>2000</td><td>悉尼</td></tr>    <tr><td>2004</td><td>雅典</td></tr>    <tr><td>2000</td><td>北京</td></tr>  </tbody></table>

列表

表格用于表示二维数据（行，列），一维数据则用列表表示。列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。

无序列表表示一系列类似的项目，它们之间没有先后顺序。

<ul>  <li>苹果</li>  <li>桔子</li>  <li>桃</li></ul>

有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。

<ol>  <li>打开冰箱门</li>  <li>把大象赶进去</li>  <li>关上冰箱门</li></ol>

框架

最后谈一下框架，曾经非常流行的技术，框架使一个窗口里能同时显示多个文档。主框架页里面没有<body>标签，取代它的是<frameset>。

<frameset>标签的属性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（宽度）。

<frameset>标签可以包含<frame>标签，每个<frame>标签代表一个文档（src属性指定文档的地址）。

如果觉得这样的页面还不够复杂的话，还可以在<frameset>标签里包含<frameset>标签。

<frameset rows="15%,*">     <frame src="top.html" name=title scrolling=no>     <frameset cols="20%,*">          <frame src="left.html" name=sidebar>          <frame src="right.html" name=recipes>     </frameset></frameset>

30分钟以后怎么办

这篇文章只是让从没有接触过HTML的人对HTML有个初步的印象，所以很多东西都没有谈到。本文并没有列出HTML中所有的标签，对于列出的标签也没有介绍它们的全部属性。另外，没有提到的东西里还包括我觉得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它们与HTML的关系。不过这些也不太可能在30分钟内学会，好在只要入了门，就能利用网上很多资源继续学习。当然，如果有一本纸质书，就更好了，这方面我推荐<<HTML与XHTML权威指南>>。下面是一些我觉得不错的网上资源：

  • HTML语言参考（英文）
  • HTML教程

一些我认为你可能已经知道的术语的参考

文本
文字
文档
文件，通常指内容是数据（而不是程序）的文件
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章