html教程

2015-02-21 16:32:36 -0500
Ehtml】
Ehtml是一款在安卓平台上运行的html编辑器让你随时随地,想写就写,不论是公交车,地铁 甚至在厕所都能写下并预览html还支持导入html文件,是小白写html的不二神器!!
【教程的基本目标】
快速让你明白HTML是什么,并对它有一些基本的了解。一旦入门后,你可以从网上找到更多更详细的资料来继续学习。(ps:这里的教程也会无限更新)

【编写时需要注意】
1 所有字符需要用英文,(引号内除外,但引号也要用英文)
2 用Ehtml所编写出来的文件全部在手机SD卡Ehtml文件夹内
3 请记住文件后缀名一定是 .html
4 遇到困难请联系我或QQ群里提问

【HTML是什么样的】
简单地来说,HTML的语法就是给文本 加上表明文本含义的 标签 (Tag),让用户 (人或程序)能对文本得到更好的理解。 下面是一个最简单的HTML文档:
<html>
<head>
<title>第一个Html文档</title>
</head>
<body> 欢迎访问<a href="http://yzxs.890m.com">禹州学生论坛</a>!
</body>
</html>

解释及说明: 所有的HTML文档都应该有一个 <html>标签,<html>标签可以包含两个部 分:<head>和<body>。
<head>标签用于包含整个文档的一般 信息,比如文档的标题(<title>标签用于包 含标题),对整个文档的描述,文档的关 键字等等。文档的具体内容就要放在 <body>标签里了。
<a>标签用于表示链接,在浏览器(如 IE,Firefox等)中查看HTML文档时,点击 <a>标签括起来的内容时,通常会跳转到另 一个页面。这个要跳转到的页面的地址由 <a>标签的href属性指定。上面的<a href="yzxs.890m.com">中,href属性 的值就是http://yzxs.890m.com


【HTML文档可以包含的内容】
通过不同的标签,HTML文档可以包含 不同的内容,比如文本,链接,图片,列 表,表格,表单,框架等。

文本 HTML对文本的支持是最丰富的,你可以设 置不同级别的标题,分段和换行,可以指 定文本的语义和外观,可以说明文本是引 用自其它的地方,等等等等。
链接 链接用来指出内容与另一个页面或当前页 面某个地方有关。
图片 图片用于使页面更加美观,或提供更多的 信息。
列表 列表用于说明一系列条目是彼此相关的。
表格 表格是按行与列将数据组织在一起的形 式。也有不少人使用表格进行页面布局。
表单 表单通常由文本输入框,按钮,多选框, 单选框,下拉列表等组成,使HTML页面更 有交互性。
框架 框架使页面里能包含其它的页面。


【HTML文档格式详细说明】
前面介绍了HTML文档的基本格式,下 面再做一个详细说明。
HTML文档可以用任何文本编辑器(比 如记事本,UltraEdit等)创建,编辑,因 为它的内容在本质也只是一些文本。
在HTML文本中,用尖括号括起来的部 分称为标签。如果想在正文里使用尖括号 (或者大与号小与号,总之是同一个东 西),必须使用 字符转义 ,也就是说转换 字符的原有意义。<应该使用 &lt; 代替,> 则使用 &gt; ,至于&符号本身,则应该使 用 &amp; 替代(不得不说的是有很多 HTML文档没有遵循这个规则,常用的浏览 器也都能够分析出&到底是一个转义的开始,还是一个符号,但是这样做是不推荐 的)。
标签本质上是对它所包含的内容的说 明,可能会有属性,来给出更多的信息。 比如<img>(图片)标签有src属性(用于 指明图片的地址),width和height属性 (用于说明图片的宽度和高度)。
HTML里 能使用哪些标签,这些标签分别可以拥有 哪些属性,这些都是有规定的,知道了这 里说的基本知识之后,学习HTML其实也就 是学习这些标签了。本文后面会对常用的 HTML标签做出简短的介绍。 标签通常有开始部分和结束部分(也 被称为开始标签和结束标签),它们一起 限定了这个标签所包含的内容。属性只能 在开始标签中指定,属性值可以用单引号 或双引号括起来。结束标签都以/加上标签 名来表示。有时候,有些标签并不包含其 它内容(只包括自己的属性,甚至连属性 都没有),这种情况下,可以写成类似这 样:
<img src="logo.gif" />。注意最后的一 个空格和一个反斜杠,它说明这个标签已 经结束,不需要单独的结束标签了。 某些标签包含的内容中还可以有新的 标签,新的标签名甚至可能还可以与包含 它的标签的名称相同(哪些标签可以包含 标签,可以包含哪些标签也是有规定 的)。
比如:

<div> <div>分类目录...</div> <div>当前分类内容列表...</div> </div>

在这种情况下,最后出现的标签应该 最先结束。 HTML文档里所有的空白符(空格, Tab,换行,回车)会被浏览器忽略,唯一 的例外是空格,对空格的处理方式是所有 连续的空格被当成一个空格,不管有一 个,还是两个,还是100个。之所以有这样 的规则是因为忽略空白符能让使用HTML的 作者以他觉得最方便的格式来排列内容, 比如可以在每个标签开始后增加缩进,标 签结束后减少缩进。由于英语文本中空格 用得很普遍(用于分隔单词),所以对空 格做了这样的特殊处理。如果要显示连续 的空格(比如为了缩进),应该 用 &nbsp; 来代表空格。

【文本标签介绍】

最常用的标签可能是<font>了,它用 于改变字体,字号,文字颜色。
例如:
<font size="6">6</font> <font size="4">4</font> <font color="red" size="5">红色的5</font> <font face="黑体">黑体的字</font>

加粗,下划线,斜体字也是常用的文 字效果,它们分别用<b>,<u>,<i>表示
例如:
<b>Bold</b> <i>italic</i> <u>underline</u>

还有一些标签,用来指出包含的文本 有特殊的意义,比如<abbr>(表示缩 写),<em>(表示强调),<strong>(表 示更强地强调),<cite>(表示引用), <address>(表示地址)等等。这些标签不 是为了定义显示效果而存在的,所以从浏 览器里看它们可能没有任何效果,也可能 不同的浏览器对这些标签的显示效果完全 不同。 一篇很长的文章,如果有合适的小标 题的话,就可以快速地对它的内容进行大 致的了解。在HTML里,用来表示标题的标 签有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, 它们分别表示一级标题,二级标题,三级 标题...
例如:
<h1>帅哒哒的安xiao逸</h1> <h2>谁是安xiao逸</h2> ... <h2>安xiao逸会干嘛</h2> ...

【图片标签的介绍】
<hr>标签用于在页面上添加横线。可 以通过指定width和color属性来控制横线的 长度和颜色。
例如:
<hr width="90%" color="red" />

<img>标签用于在页面上添加图片, src属性指定图片的地址,如果无法打开 src指定的图片,浏览器通常会在页面上需 要显示图片的地方显示alt属性定义的文本。
例如:
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />
【链接标签的介绍】
超级链接用<a>标签表示,href属性指 定了链接到的地址。<a>标签可以包含文 本,也可以包含图片。
例如:
<a href="http://yzxs.890m.com">禹州学生论坛</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>标签。

这个~没有例如,以后更新时会有的

【教程会持续更新的】
html要学的东西有很多 我只是把最初级的交给了大家,麻烦大家慢慢消化一下,至于建网站的教程,以后我会慢慢教给大家,请持续关注, 谢谢大家。
«Newer      Older»

----Comments(1)----
@lr | @ at 2015-02-21 20:47:
支持
Comment:
Name:

Back to home

Subscribe | Register | Login | N