欢迎来到开源之家!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

开源之家

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文本中,用尖括号括起来的部分称为标签。假如想在正文里用尖括号(或者大与号小与号,总之是同一个东西),需要用字符转义,也就是说转换字符的原有意义。<应该用&lt;代替,>则用&gt;,至于&符号本身,则应该用&amp;替代(不能不说的是有不少HTML文档没遵循这个规则,常见的浏览器也都可以剖析出&到底是一个转义的开始,还是一个符号,但如此做是不推荐的)。

  标签本质上是对它所包括的内容的说明,或许会有属性,来给出更多的信息。譬如<img>(图片)标签有src属性(用于指明图片的地址),width和height属性(用于说明图片的宽度和高度)。HTML里能用什么标签,这类标签分别可以拥有什么属性,这类都是有规定的,了解了这里说的入门知识之后,学习HTML其实也就是学习这类标签了。本文后面会对常见的HTML标签做出简短的介绍。

  标签一般有开始部分和结束部分(也被叫做开始标签和结束标签),它们一块限定了这个标签所包括的内容。属性只能在开始标签中指定,属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时,有的标签并不包括其它内容(只包含我们的属性,甚至连属性都没),这样的情况下,可以写成类似如此:<imgsrc="logo.gif"/>。注意最后的一个空格和一个反斜杠,它说明这个标签已经结束,无需单独的结束标签了。

  某些标签包括的内容中还可以有新的标签,新的标签名甚至可能还可以与包括它的标签的名字相同(什么标签可以包括标签,可以包括什么标签也是有规定的)。譬如:

  <p>

  <p>分类目录…</p>

  <p>目前分类内容列表…</p>

  </p>

  在这样的情况下,最后出现的标签应该最早结束。

  HTML文档里所有些空白符(空格,Tab,换行,回车)会被浏览器忽视,唯一的例外是空格,对空格的处置方法是所有连续的空格被当成一个空格,不管有一个,还是两个,还是100个。之所以有如此的规则是由于忽视空白符能让用HTML的作者以他感觉最便捷的格式来排列内容,譬如可以在每一个标签开始后增加缩进,标签结束后降低缩进。因为英语文本中空格用得非常常见(用于分隔单词),所以对空格做了如此的特殊处置。假如要显示连续的空格(譬如为了缩进),应该用&nbsp;来代表空格。

  常用标签介绍

  文本

  最常见的标签可能是<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>标签。


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.dgznd.com.cn 关注: 时间:2022-05-22 14:00
版权声明:凡注明来源为http://www.109f.cn的均为本站原创,转载请注明来源。
本文网址:http://www.109f.cn/HTML/HTML5/20220522/14069.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧