30分钟新手教程
HTML是英文HyperTextMark-upLanguage(超文本标记语言)的缩写,它规定了我们的语法规则,用来表示比“文本”更丰富的意义,譬如图片,表格,链接等。浏览器(IE,FireFox等)软件了解HTML语言的语法,可以用来查询HTML文档。现在网络上的绝大多数网页都是用HTML撰写的。
HTML是哪种
容易地来讲,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。
下面是一个最容易的HTML文档:
<html>
<head>
<title>第一个Html文档</title>
</head>
<body>
欢迎访问<ahref="http://deerchao.net">deerchao的个人网页</a>!
</body>
</html>
所有些HTML文档都要有一个<html>标签,<html>标签可以包括两个部分:<head>和<body>。
<head>标签用于包括整个文档的通常信息,譬如文档的标题(<title>标签用于包括标题),对整个文档的描述,文档的关键词等等。文档的具体内容就要放在<body>标签里了。
<a>标签用于表示链接,在浏览器(如IE,Firefox等)中查询HTML文档时,点击<a>标签括起来的内容时,一般会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<ahref="http://deerchao.net">中,href属性的值就是http://deerchao.net。
HTML文档可以包括的内容
通过不一样的标签,HTML文档可以包括不一样的内容,譬如文本,链接,图片,列表,表格,表单,框架等。
文本
HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。
链接
链接用来指出内容与另一个页面或目前页面某个地方有关。
图片
图片用于使页面愈加美观,或提供更多的信息。
列表
列表用于说明一系列条目是彼此有关的。
表格
表格是按行与列将数据组织在一块的形式。也有不少人用表格进行页面布局。
表单
表单一般由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。
框架
框架使页面里能包括其它的页面。
HTML文档格式详细说明
前面介绍了HTML文档的基本格式,下面再做一个详细说明。
HTML文档可以用任何文本编辑器(譬如记事本,UltraEdit等)创建,编辑,由于它的内容在本质也只不过一些文本。
在HTML文本中,用尖括号括起来的部分称为标签。假如想在正文里用尖括号(或者大与号小与号,总之是同一个东西),需要用字符转义,也就是说转换字符的原有意义。<应该用<代替,>则用>,至于&符号本身,则应该用&替代(不能不说的是有不少HTML文档没遵循这个规则,常见的浏览器也都可以剖析出&到底是一个转义的开始,还是一个符号,但如此做是不推荐的)。
标签本质上是对它所包括的内容的说明,或许会有属性,来给出更多的信息。譬如<img>(图片)标签有src属性(用于指明图片的地址),width和height属性(用于说明图片的宽度和高度)。HTML里能用什么标签,这类标签分别可以拥有什么属性,这类都是有规定的,了解了这里说的入门知识之后,学习HTML其实也就是学习这类标签了。本文后面会对常见的HTML标签做出简短的介绍。
标签一般有开始部分和结束部分(也被叫做开始标签和结束标签),它们一块限定了这个标签所包括的内容。属性只能在开始标签中指定,属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时,有的标签并不包括其它内容(只包含我们的属性,甚至连属性都没),这样的情况下,可以写成类似如此:<imgsrc="logo.gif"/>。注意最后的一个空格和一个反斜杠,它说明这个标签已经结束,无需单独的结束标签了。
某些标签包括的内容中还可以有新的标签,新的标签名甚至可能还可以与包括它的标签的名字相同(什么标签可以包括标签,可以包括什么标签也是有规定的)。譬如:
<p>
<p>分类目录…</p>
<p>目前分类内容列表…</p>
</p>
在这样的情况下,最后出现的标签应该最早结束。
HTML文档里所有些空白符(空格,Tab,换行,回车)会被浏览器忽视,唯一的例外是空格,对空格的处置方法是所有连续的空格被当成一个空格,不管有一个,还是两个,还是100个。之所以有如此的规则是由于忽视空白符能让用HTML的作者以他感觉最便捷的格式来排列内容,譬如可以在每一个标签开始后增加缩进,标签结束后降低缩进。因为英语文本中空格用得非常常见(用于分隔单词),所以对空格做了如此的特殊处置。假如要显示连续的空格(譬如为了缩进),应该用 来代表空格。
常用标签介绍
文本
最常见的标签可能是<font>了,它用于改变字体,字号,文字颜色。
<fontsize="6">6</font>
<fontsize="4">4</font>
<fontcolor="red"size="5">红色的5</font>
<fontface="黑体">黑体的字</font>
加粗,下划线,斜体字也是常见的文字成效,它们分别用<b>,<u>,<i>表示:
<b>Bold</b>
<i>italic</i>
<u>underline</u>
还有一些标签,用来指出包括的文本有特殊的意义,譬如<abbr>(表示缩写),<em>(表示强调),<h3>(表示更强地强调),<cite>(表示引用),<address>(表示地址)等等。这类标签不是为了概念显示成效而存在的,所以从浏览器里看它们可能没任何成效,也会不一样的浏览器对这类标签的显示成效完全不同。
一篇非常长的文章,假如有适合的小标题的话,就可以迅速地对它的内容进行大致的认知。在HTML里,用来表示标题的标签有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它们分别表示一级标题,二级标题,三级标题...
<h1>HTML30分钟课程</h1>
<h2>啥是HTML</h2>
...
<h2>HTML是哪种</h2>
...
图片
<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。
<hrwidth="90%"color="red"/>
<img>标签用于在页面上添加图片,src属性指定图片的地址,假如没办法打开src指定的图片,浏览器一般会在页面上需要显示图片的地方显示alt属性概念的文本。
<imgsrc="http://www.xx.com/Icons/valid-xhtml10"alt="图片简介"/>
链接
超级链接用<a>标签表示,href属性指定了链接到的地址。<a>标签可以包括文本,也可以包括图片。
<ahref="http://deerchao.net">deerchao的网站</a>
<ahref="http://validator.w3.org"><imgsrc="http://www.xx.com/Icons/valid-xhtml10"alt="验证HTML"/></a>
分段与换行
因为HTML文档会忽视空白符,所以要想保证正常的分段换行的话,需要指出什么文字是是同一段落的,这就用到了标签<p>。
<p>这是第一段。</p>
<p>这是第二段。</p>
也有人不需要<p>,而用<br>。<br>只表示换行,不表示段落的开始或结束,所以一般没结束标签。
这是第一段。<br>
这是第二段。<br/>
这是第三段。
有时,要把文档看作不一样的部分组合起来的,譬如一个典型的页面可能包含三个部分:页头,主体,页脚。<p>标签专门用于标明不一样的部分:
<p>页头内容</p>
<p>主体内容</p>
<p>页脚内容</p>
表格
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>标签。
希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
►本文网址:http://www.109f.cn/HTML/HTML5/20220522/14069.html
►凡本站提供教程均已验证教程的准确性。