HTML 学习经验

来源：互联网发布：ubuntu xrandr 编辑：程序博客网时间：2024/05/22 03:41

作为初学者博主也曾吃了一肚子灰，盲目网络找这软件，那软件。最后被各种软件秀了一脸，但是经过一番周折最终找到了最佳方法（本人认为的容易上手的）。

下面我分享下经验：

第一步：下载一个 EditPlus 这是一款强大软件很小很强大，支持C、C++、HTML等一堆玩应。感觉对于计算机开发人员应该人手一个类似软件。

分享个链接：http://pan.baidu.com/s/1hswkEDA 百度网盘大家自己下载吧，有支持HTML的阅读器的不用下载。

第二部：准备一份HTML代码参照目录我在百度找了一份

标签描述显示定义注释。--<!DOCTYPE>定义文档类型。--<a>定义锚。inline<abbr>定义缩写。inline<acronym>定义只取首字母的缩写。inline<address>定义文档作者或拥有者的联系信息。block<applet>不赞成使用。定义嵌入的 applet。inline<area>定义图像映射内部的区域。none<article>定义文章。block<aside>定义页面内容之外的内容。block<audio>定义声音内容。inline-block<b>定义粗体字。inline<base>定义页面中所有链接的默认地址或默认目标。inline<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。inline<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。inline<bdo>定义文字方向。inline<big>定义大号文本。inline<blockquote>定义长的引用。block<body>定义文档的主体。block<br>定义简单的折行。inline<button>定义按钮 (push button)。inline-block<canvas>定义图形。inline-block<caption>定义表格标题。table-caption<center>不赞成使用。定义居中文本。block<cite>定义引用(citation)。inline<code>定义计算机代码文本。inline<col>定义表格中一个或多个列的属性值。table-column<colgroup>定义表格中供格式化的列组。table-column-group<command>定义命令按钮。inline<datalist>定义下拉列表。none<dd>定义定义列表中项目的描述。block<del>定义被删除文本。inline<details>定义元素的细节。block<dir>不赞成使用。定义目录列表。block<div>定义文档中的节。block<dfn>定义定义项目。inline<dialog>定义对话框或窗口。none<dl>定义定义列表。block<dt>定义定义列表中的项目。block<em>定义强调文本。inline<embed>定义外部交互内容或插件。inline<fieldset>定义围绕表单中元素的边框。block<figcaption>定义 figure 元素的标题。block<figure>定义媒介内容的分组，以及它们的标题。block<font>不赞成使用。定义文字的字体、尺寸和颜色。inline<footer>定义 section 或 page 的页脚。block<form>定义供用户输入的 HTML 表单。block<frame>定义框架集的窗口或框架。block<frameset>定义框架集。block<h1> to <h6>定义 HTML 标题。--<head>定义关于文档的信息。none<header>定义 section 或 page 的页眉。block<hr>定义水平线。block<html>定义 HTML 文档。block<i>定义斜体字。inline<iframe>定义内联框架。block<img>定义图像。inline<input>定义输入控件。inline-block<ins>定义被插入文本。inline<isindex>不赞成使用。定义与文档相关的可搜索索引。inline<kbd>定义键盘文本。inline<keygen>定义生成密钥。inline-block<label>定义 input 元素的标注。inline<legend>定义 fieldset 元素的标题。block<li>定义列表的项目。list-item<link>定义文档与外部资源的关系。none<map>定义图像映射。inline<mark>定义有记号的文本。inline<menu>定义命令的列表或菜单。block<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。inline<meta>定义关于 HTML 文档的元信息。none<meter>定义预定义范围内的度量。inline-block<nav>定义导航链接。block<noframes>定义针对不支持框架的用户的替代内容。none<noscript>定义针对不支持客户端脚本的用户的替代内容。inline<object>定义内嵌对象。inline<ol>定义有序列表。block<optgroup>定义选择列表中相关选项的组合。block<option>定义选择列表中的选项。block<output>定义输出的一些类型。inline<p>定义段落。block<param>定义对象的参数。none<pre>定义预格式文本。block<progress>定义任何类型的任务的进度。inline-block<q>定义短的引用。inline<rp>定义若浏览器不支持 ruby 元素显示的内容。inline<rt>定义 ruby 注释的解释。inline<ruby>定义 ruby 注释。inline<s>不赞成使用。定义加删除线的文本。inline<samp>定义计算机代码样本。inline<script>定义客户端脚本。none<section>定义 section。block<select>定义选择列表（下拉列表）。inline-block<small>定义小号文本。inline<source>定义媒介源。inline<span>定义文档中的节。inline<strike>不赞成使用。定义加删除线文本。inline<strong>定义强调文本。inline<style>定义文档的样式信息。none<sub>定义下标文本。inline<summary>为 <details> 元素定义可见的标题。block<sup>定义上标文本。inline<table>定义表格。table<tbody>定义表格中的主体内容。table-row-group<td>定义表格中的单元。table-cell<textarea>定义多行的文本输入控件。inline-block<tfoot>定义表格中的表注内容（脚注）。table-footer-group<th>定义表格中的表头单元格。table-cell<thead>定义表格中的表头内容。table-header-group<time>定义日期/时间。inline<title>定义文档的标题。none<tr>定义表格中的行。table-row<track>定义用在媒体播放器中的文本轨道。inline<tt>定义打字机文本。inline<u>不赞成使用。定义下划线文本。inline<ul>定义无序列表。block<var>定义文本的变量部分。inline<video>定义视频。inline-block<wbr>定义视频。inline<xmp>不赞成使用。定义预格式文本。block

下载下来，不复制下来放到word里面，参照书写。

第三步：随便找一个网页例如：WWW.BAIDU.COM 右键->查看源代码，当你打开后是不是瞬间懵逼。我开始也是，别急看第四步。

第四部：用EditPlus 新建一个 HTML page 把刚才的源代码复制进去，这样你就拥有了一个别人写好的HTML了。

第五步：开始学习对照上面的HTML代码来一个个看百度搜索这个大页面是怎么实现的，记住一点看有颜色的颜色的，蓝色的有<>都是代码命令，

粉色的是属性主要学的是人家书写格式，不要被海量代码吓到，因为大多数是人家插入广告用的，如果自己设计其实很少。

给大家一个简单案例，这是我自己做得是为项目准备的：

<!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">

<title>大气检测系统 - 登陆</title>
<style type="text/css">

</style>
</head>
<body>
<table width="1919" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="1919" height="359" background="images/login/login_001.jpg"></td>
</tr>
<tr>
<td height="359" background="images/login/login_002.jpg"><table width="120%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="43%"></td>
<td width="57%"><table width="300" border="0" cellspacing="10" cellpadding="0">
<tbody><tr>
<td>  
<span style="font-size:20px;color:black;">请输入您的用户名及密码</td>
</tr>
<tr>
<td><form name="form1" method="post" action="cgi-bin/login.cgi">
<table width="100%" border="0" cellspacing="9" cellpadding="0">
<tbody><tr>
<td width="100"><span style="font-size:15px;color:black;">用户帐号：</td>
<td width="130"><label>
<input name="username" type="text" id="username" value="user"></label></td>
</tr>
<tr>
<td><span style="font-size:15px;color:black;">登录密码：</td>
<td><label>
<input name="password" type="password" id="password" value="123456"></label></td>
</tr>

<tr><td height="50"></td>
<td><input type="image" name="submit" style="width:97px;height:25px;" src="images/login/go.gif"></td>
</tr>
</tbody></table>
</form></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td height="359" align="center" background="images/login/login_003.jpg" class="txt">
<span style="font-size:20px;color:black;">大气检测系统B/S版 <a href="http://www.bjlingzhuo.com/index.html" target="_blank"><b>研究者：领卓教育嵌入式16071班第五组</b></a></td>
</tr>
</tbody></table>
</body></html>

源文件我放我的资源里（这是我项目半成品目前只做了两个界面）名字 HTML学习代码 http://download.csdn.net/detail/qq_26058749/9663628

其中类似 images/login/login_002.jpg 是本人图片目录你们可以自己定义 height 高度等等你会感觉一幕了然，毕竟英语水平都不低，好几级呢。

写完保存，用浏览器打开就ok

先说这麽多希望能带你们入门，如果有点不懂，可以留消息，我看到会回复你。

0 0