>
更新时间:2024-01-05 01:52:01 阅读量: 教育文库 文档下载
HTML 30分钟入门教程
作者:deerchao 转载请注明来源
本文目标
30分钟内让你明白HTML是什么,并对它有一些基本的了解。一旦入门后,你可以从网上找到更多更详细的资料来继续学习。
什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
HTML是什么样的
简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。
下面是一个最简单的HTML文档:
欢迎访问!
所有的HTML文档都应该有一个标签,标签可以包含两个部分:
标签用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击标签括起来的内容时,通常会跳转到另一个页面。这个要跳转到的页面的地址由标签的href属性指定。上面的
href=\中,href属性的值就是http://deerchao.net。
HTML文档可以包含的内容
通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。
文本
HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。 链接
链接用来指出内容与另一个页面或当前页面某个地方有关。 图片
图片用于使页面更加美观,或提供更多的信息。 列表
列表用于说明一系列条目是彼此相关的。 表格
表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 表单
表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。 框架
框架使页面里能包含其它的页面。
HTML文档格式详细说明
前面介绍了HTML文档的基本格式,下面再做一个详细说明。
HTML文档可以用任何文本编辑器(比如记事本,UltraEdit等)创建,编辑,因为它的内容在本质也只是一些文本。
在HTML文本中,用尖括号括起来的部分称为标签。如果想在正文里使用尖括号(或者大与号小与号,总之是同一个东西),必须使用字符转义,也就是说转换字符的原有意义。<应该使用<代替,>则使用>,至于&符号本身,则应该使用&替代(不得不说的是有很多HTML文档没有遵循这个规则,常用的浏览器也都能够分析出&到底是一个转义的开始,还是一个符号,但是这样做是不推荐的)。
标签本质上是对它所包含的内容的说明,可能会有属性,来给出更多的信息。比如(图片)标签有src属性(用于指明图片的地址),width和height属性(用于说明图片的宽度和高度)。HTML里能使用哪些标签,这些标签分别可以拥有哪些属性,这些都是有规定的,知道了这里说的基本知识之后,学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。
标签通常有开始部分和结束部分(也被称为开始标签和结束标签),它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定,属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候,有些标签并不包含其它内容(只包括自己的属性,甚至连属性都没有),这种情况下,可以写成类似这样:
某些标签包含的内容中还可以有新的标签,新的标签名甚至可能还可以与包含它的标签的名称相同(哪些标签可以包含标签,可以包含哪些标签也是有规定的)。比如:
分类目录...
当前分类内容列表...
在这种情况下,最后出现的标签应该最先结束。
HTML文档里所有的空白符(空格,Tab,换行,回车)会被浏览器忽略,唯一的例外是空格,对空格的处理方式是所有连续的空格被当成一个空格,不管有一个,还是两个,还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容,比如可以在每个标签开始后增加缩进,标签结束后减少缩进。由于英语文本中空格用得很普遍(用于分隔单词),所以对空格做了这样的特殊处理。如果要显示连续的空格(比如为了缩进),应该用 来代表空格。
常用标签介绍
最常用的标签可能是了,它用于改变字体,字号,文字颜色。 加粗,下划线,斜体字也是常用的文字效果,它们分别用,,表示: Bold italic underline 还有一些标签,用来指出包含的文本有特殊的意义,比如(表示缩写),(表示强调),(表示更强地强调),(表示引用),(表示地址)等等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们可能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。 一篇很长的文章,如果有合适的小标题的话,就可以快速地对它的内容进行大致的了解。在HTML里,用来表示标题的标签有:,,,,,,它们分别表示一级标题,二级标题,三级标题...
加粗,下划线,斜体字也是常用的文字效果,它们分别用,,表示:
Bold italic underline
还有一些标签,用来指出包含的文本有特殊的意义,比如(表示缩写),(表示强调),(表示更强地强调),(表示引用),(表示地址)等等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们可能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。
一篇很长的文章,如果有合适的小标题的话,就可以快速地对它的内容进行大致的了解。在HTML里,用来表示标题的标签有:
图片
标签用于在页面上添加图片,src属性指定图片的地址,如果无法打开src指定的图片,浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。
链接
超级链接用标签表示,href属性指定了链接到的地址。标签可以包含文本,也可以包含图片。
src=\验证HTML\
分段与换行
由于HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出哪些文字是属于同一段落的,这就用到了标签
。
这是第一段。
这是第二段。
也有人不用
,而用。只表示换行,不表示段落的开始或结束,所以通常没有结束标签。
这是第一段。 这是第二段。 这是第三段。
有时,要把文档看作不同的部分组合起来的,比如一个典型的页面可能包括三个部分:页头,主体,页脚。标签专门用于标明不同的部分: 页头内容 主体内容 页脚内容
表格
HTML文档在浏览器里通常是从左到右,从上到下地显示的,到了窗口右边就自动换行。为了实现分栏的效果,很多人使用表格()进行页面排版(虽然HTML里提供表格的本意不是为了排版)。
标签里通常会包含几个标签,代表表格里的一行。标签又会包含标签,每个代表一个单元格。
2000悉尼
2004雅典
2008北京
标签还可以被里的或
时间地点
2000悉尼 2004雅典 2000北京
列表
表格用于表示二维数据(行,列),一维数据则用列表表示。列表可以分为无序列表(),有序列表(
无序列表表示一系列类似的项目,它们之间没有先后顺序。
苹果 桔子 桃
有序列表中各个项目间的顺序是很重要的,浏览器通常会自动给它们产生编号。
打开冰箱门 把大象赶进去 关上冰箱门
框架
最后谈一下框架,曾经非常流行的技术,框架使一个窗口里能同时显示多个文档。主框架页里面没有
如果觉得这样的页面还不够复杂的话,还可以在
30分钟以后怎么办
这篇文章只是让从没有接触过HTML的人对HTML有个初步的印象,所以很多东西都没有谈到。本文并没有列出HTML中所有的标签,对于列出的标签也没有介绍它们的全部属性。另外,没有提到的东西里还包括我觉得非常重要的CSS, JavaScript, XHTML, XML, Web Standards,以及它们与HTML的关系。不过这些也不太可能在30分钟内学会,好在只要入了门,就能利用网上很多资源继续学习。当然,如果有一本纸质书,就更好了,这方面我推荐<>。下面是一些我觉得不错的网上资源: HTML语言参考(英文) ? HTML教程
?
一些我认为你可能已经知道的术语的参考
文字 文档
文件,通常指内容是数据(而不是程序)的文件
HTML介绍 ??????
????
??
HTML文件是什么?
? ? ? ? ?
HTML表示超文本标记语言(Hyper Text Markup Language)。 HTML文件是一个包含标记的文本文件。 这些标记保速浏览器怎样显示这个页面。 HTML文件必须有htm或者html扩展名。 HTML文件可以用一个简单的文本编辑器创建。
想不想尝试一下?
假如你运行的是windows系统,打开记事本,在其中输入以下文本:
This is my first homepage. This text is bold
将此文件保存为“mypage.htm”。
启动浏览器。在文件菜单中选择“打开”(或者“打开页面”),这时将出现一个对话框。选择“浏览”(或者“选择文件”),定位到你刚才创建的HTML文件——“mypage.htm”,选择它,单击“打开”。然后在对话框中,你将看到这个文件的地址,比如说:“C:\\MyDocuments\\mypage.htm”。单击“确定”,浏览器将显示此页面。
例子解释
HTML文档中,第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是,这个标签告诉浏览器这是HTML文档的终止。
在
在和标签之间的文本会以加粗字体显示。
关于HTML编辑器:
用一些所见即所得的编辑器,比如frontpage,dreamwaver,你可以很容易创建一个页面,而不需要在纯文本中编写代码。
但是假如你想成为一名熟练的网络开发者,我们强烈推荐你用纯文本编辑器编写代码,这有助于学习HTML基础。
常见问题
问:我编写完了HTML文件,但是不能在浏览器中看见结果,为什么?
答:请确认你保存了文件,并且使用了正确的文件名和扩展名,例如:“c:\\mypage.htm”,并且确认你用浏览器打开时使用同样的文件名。
问:我编辑了HTML文件,但是修改结果并没有在浏览器中显示,为什么?
答:浏览器缓存了你的页面,所以它不需要两次读取同样的页面。你修改了这个页面,浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。
HTML元素 ??????
HTML文档是由HTML元素组成的文本文件。 HTML元素是预定义的正在使用的HTML标签。
HTML标签
HTML标签用来组成HTML元素。
HTML标签两端有两个包括字符:“<”和“>”,这两个包括字符被称为角括号。
HTML标签通常成对出现,比如和。一对标签的前面一个是开始标签,第二个是结束标签,在开始和结束标签之间的文本是元素内容。
HTML标签是大小写无关的,跟表示的意思是一样的。
HTML元素
回忆一下上一页的HTML例子:
下面是一个HTML元素: This text is bold
此HTML元素以开始标签起始, 内容是:This text is bold,以结束标签中止。标签的目的是定义一个需要被显示成粗体的HTML元素。
下面也是一个HTML元素:
此HTML标签以开始标签
为什么使用小写标签?
我们刚说过,HTML标签是大小写无关的:跟含义相同。当你上网的时候,你会注意到多
数教程在示例中使用大写的HTML标签,我们总是使用小写标签。为什么?
假如你想投入到下一代HTML中,你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签,XHTML(下一代HTML)也需要小写标签。
启动浏览器。在文件菜单中选择“打开”(或者“打开页面”),这时将出现一个对话框。选择“浏览”(或者“选择文件”),定位到你刚才创建的HTML文件——“mypage.htm”,选择它,单击“打开”。然后在对
话框中,你将看到这个文件的地址,比如说:“C:\\MyDocuments\\mypage.htm”。单击“确定”,浏览器将显示此页面。
? ?
HTML表示超文本标记语言(Hyper Text Markup Language)。 HTML文件是一个包含标记的文本文件。
? ? ?
这些标记保速浏览器怎样显示这个页面。 HTML文件必须有htm或者html扩展名。 HTML文件可以用一个简单的文本编辑器创建。
我们刚说过,HTML标签是大小写无关的:跟含义相同。当你上网的时候,你会注意到多数教程在示例中使用大写的HTML标签,我们总是使用小写标签。为什么?
标签属性
标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。
标签
标签定义了一个HTML表格。使用一个附加的border属性,你可以告诉浏览器:这个表格是没有边框的,代码是:
属性通常由属性名和值成对出现,就像这样:name=\。属性通常是附加给HTML元素的开始标签的。
引号样式
属性值应该被包含在引号中。双引号是最常用的,但是单引号也可以使用。 在很少情况下,比如说属性值本身包含引号,使用单引号就很必要了。 比如:name='John \。
注意:中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
HTML基本标签 HTML中最重要的标签是定义标题元素,段落和换行的标签。 学习HTML的最好方法是编辑运行示例代码。我们为您创建了一个十分方便的HTML编辑器。在这个编辑器里,您可以编辑HTML源代码,按下“运行代码”按钮后,就可以看见结果。 请自己尝试一下这个例子 一个非常简单的HTML文档:
This is preformatted text.It preserves both spaces and line breaks.
The pre tag is good for displaying computer code:
这个例子说明了可以怎样用pre标签来控制换行和空格。 “计算机输出”标签: Computer codeKeyboard inputTeletype textSample text 这个例子说明了“计算机输出”标签在显示上的不同。 地址: Donald DuckBOX 555DisneylandUSA 这个例子说明了如何用HTML书写一个地址。 缩写和首字母缩略法: The title attribute is used to show the spelled-out version when holding the mThis only works for the acronym element in IE 5.This works for both the abbr and acronym element in Netscape 6.2. 这个例子说明了如何处理缩写和首字母缩略。 文字方向: If your browser supports bi-directional override (bdo), the next line will be wri 这个例子说明了如何改变文字方向。 块引用: Here comes a long quotation:This is a long quotation. This is a long quotation. This is a long quotation. ThiHere comes a short quotation:This is a short quotation 这个例子说明了如何处理大段引用和小块引用。 删除和插入文字: a dozen is twenty twelve piecesMost browsers will overstrike deleted text and underline inserted text. 这个例子说明了如何标记被删除或者插入的文本。 如何查看HTML源文件 你有没有看过一些网页,并且想知道它是如何做出来的呢? 在浏览器菜单中选择查看——源文件,将弹出一个窗口,这个页面的HTML代码就在其中。 HTML实体 有些字符,比如说“<”字符,在HTML中有特殊的含义,因此不能在文本中使用。 想要在HTML中显示一个小于号“<”,需要用到字符实体。 字符实体 在HTML中,有些字符拥有特殊含义,比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话,必须在HTML代码中插入字符实体。 一个字符实体拥有三个部分:一个and符号(&),一个实体名或者一个实体号,最后是一个分号(;) 想要在HTML文档中显示一个小于号,我们必须这样写:<或者< 使用名字相对于使用数字的优点是容易记忆,缺点是并非所有的浏览器都支持最新的实体名,但是几乎所有的浏览器都能很好地支持实体号。 注意:实体名是大小写敏感的。 下面这个例子能够让你针对HTML实体实践一下。 This is a character entity: { 不可拆分的空格 在HTML中,最常见的字符实体就是不可拆分空格。 通常,HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格,其中9个会被去掉。想要在HTML中插入空格,可以使用实体: 最常用的字符实体 显示结果 < > & 描述 不可拆分的空格 小于 大于 and符号 实体名 < > & 实体号 < > & \' 引号 单引号 " " ' 其他一些常用的字符实体 显示结果 ¢ £ ¥ § ? ? × ÷ 描述 分 英镑 人民币元 章节 版权 注册 乘号 除号 实体名 ¢ £ ¥ § © ® × ÷ 实体号 ¢ £ ¥ § © ® × ÷ HTML链接 HTML使用超级链接来连接到网络上的其他页面。 示例 创建链接: is a link to a page on this Web site. is a link to a page on the World Wide Web. 这个例子说明了在HTML文档中如何创建链接。 图片作为链接: You can also use an image as a link: 这个例子说明了在HTML文档中如何用图片作为链接。 锚标签和href属性 HTML使用锚标签()来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。 创建一个锚的语法: 被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签和结束标签中间的部分将被显示为超级链接。 这个锚定义了一个到W3Schools的链接: 下面这段代码打开一个新的浏览器窗口来打开链接: 锚标签和name属性 name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。 下面是命名锚的语法: 你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚: 你应该注意到了:命名锚的显示方式并没有什么与众不同的。 想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样: 一个链接到本页面中某章节的命名锚是这样写的: 基本注意点——有用的技巧 尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href=\,将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href=\。 命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。 如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。 更多示例: 在新浏览器窗口中打开链接: If you set the target attribute of a link to \the link will open in a new window. 这个例子说明了怎样用打开新窗口的方式来链接到其他页面,这样,访问者不用离开你的页面。 链接到本页面的某个位置: Chapter 1This chapter explains ba bla bla 这个例子说明了如何跳转到一个文档的某部分。 跳出框架: Locked in a frame? 这个例子说明了假如你的页面在框架中,如何跳出框架。 创建一个邮件链接: This is a mail link:Note: Spaces between words should be replaced by to ensure that 这个例子说明了如何链接到一个邮件信息(只有安装了邮件程序才有效)。 创建一个邮件链接2: This is another mailto link:Note: Spaces between words should be replaced by to ensure that 这个例子显示了一个完成度更高的邮件链接。 HTML框架 使用框架,可以在一个浏览器窗口中显示不止一个页面。 示例 垂直分栏: 这个例子说明了如何创建一个有三个页面的垂直分栏。 水平分栏: 这个例子说明了如何创建一个有三个页面的水平分栏。 如何使用标签: Your browser does not handle frames! 这个例子说明了如何使用标签。 在这个页面的底部,还有更多例子。 框架 使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面,它们是相互独立的。 使用框架的不利因素有: ? ? 网站开发者需要关心更多HTML文档的情况。 打印整个页面变得困难。 frameset标签 ? ? ? 标签定义了如何将窗口拆分成框架。 每个frameset标签定义了一组行和列。 行/列的值指明了每个行/列在屏幕上所占的大小。 frame标签 ? 标签定义了每个框架中放入什么文件。 下面这个例子中,有一个两列的分栏。第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。 基本注意点——有用的技巧 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。如果不想让用户改变大小,可以在标签中加入:noresize=\。 给不支持框架的浏览器写上标签。 更多示例: 混合框架: 这个例子说明了怎样把三个页面以行列混合的方式放在框架中。 使用了noresize=\的框架: 这个例子说明了noresize属性。这个框架是不可改变大小的,把鼠标移动到框架边界上,你会发现无法调整大小。 导航框架: 这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接,它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接,链接的代码如下: Some older browsers don't support iframes.If they don't, the iframe will not be visible. 这个例子说明了如何创建一个内联框架(包含在HTML页面里的框架)。 在框架内跳转到指定章节: 这个例子显示了两个框架页。其中一个的源是一个文件的指定章节,该章节在文件“frame_section.htm”中使用代码 这个例子显示了两个框架页。左边的导航框架包含了一系列以第二个框架为目标的链接(“frame_linksection.htm”),第二个框架显示链接文件(“frame_section.htm”)。导航框架中的一个链接指向目标文件中的指定章节。文件“frame_link”中的HTML代码是像这样的: HTML表格 使用HTML可以创建表格。 示例 表格: Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.One column: 这个例子说明了如何在HTML页面中创建表格。 表格边框: With a normal border:FirstRowSecond 这个例子显示了不同的表格边框。 在这个页面的底部,还有更多例子。 表格 表格是用标签定义的。表格被划分为行(使用标签),每行又被划分为数据单元格(使用标签)。td表示“表格数据”(Table Data),即数据单元格的内容。数据单元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器中显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和border属性 如果不指定border属性,表格将不显示边框。有时候这很有用,但是多数时候我们希望显示边框。 想要显示一个有边框的表格,需要使用border属性。 Row 1, cell 1 Row 1, cell 2 表格头 表格头使用标签指定。 Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器中显示如下: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格中的空单元格 在多数浏览器中,没有内容的单元格显示得不太好。 row 1, cell 1 row 1, cell 2 row 2, cell 1 在浏览器中显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 注意一下空单元格的边框没有显示出来。为了避免这个,可以在空单元格里加入不可分空格来占位,这样边框能正常显示。 row 1, cell 1 row 1, cell 2 row 2, cell 1 在浏览器中显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 基本注意点——有用的技巧 通常很少使用,,标签,因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。 更多示例: 没有边框的表格: This table has no borders:100200300 这个例子显示了一个没有边框的表格。 表格头: Table headers:NameTelephoneTelephone 这个例子说明了如何显示表格头。 空单元格: Some textSome textSome text 这个例子说明了如何使用“ ”来支撑没有内容的单元格。 有标题的表格: This table has a caption,and a thick border:My Caption100200 这个例子说明了如何创建一个有标题的表格。 单元格跨行(列)的表格: Cell that spans two columns:NameThis is a paragraphThis is another paragraphThis cell contains a table:Without cellpadding:FirstRowSecond 这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。 cellspacing属性: Without cellspacing:FirstRowSecond 这个例子说明了如何使用cellspacing属性来增加单元格间距。 给表格增加背景色或者背景图像: A background color:FirstRowSecond 这个例子说明了如何给表格增加背景。 给表格增加背景色或者背景图像: Cell backgrounds:RowIf you see no frames around the tables in these examples, your browser is too oldWith frame=\FirstRow 这个例子说明了如何使用“frame”属性来控制表格周围的边框。 HTML列表 HTML支持有序、无序和自定义列表。 示例 一个无序列表: An Unordered List:CoffeeTeaMilk 这个例子显示了一个无序列表。 有序列表: An Ordered List:CoffeeTeaMilk 这个例子显示了一个有序列表。 在这个页面的底部,还有更多例子。 无序列表 无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。 无序列表以标签开始。每个列表项目以开始。 Coffee Milk 在浏览器中显示如下: ? ? Coffee Milk 无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。 有序列表 有序列表也是一个项目的序列。各项目前加有数字作标记。 有序列表以标签开始。每个列表项目以开始。 Coffee Milk 在浏览器中显示如下: 1. Coffee 2. Milk 有序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。 自定义列表 自定义列表不是一个项目的序列,它是一系列条目和它们的解释。 有序列表以标签开始,自定义列表条目以开始,自定义列表的定义以开始。 Coffee Black hot drink Milk White cold drink 在浏览器中显示如下: Coffee Black hot drink Milk White cold drink 自定义列表的定义(标签)中可以加入段落、换行、图像,链接,其他的列表等等。 更多示例: 有序列表的不同类型: Numbered list:ApplesBananasLemonsOrangesLetters list: 这个例子显示了有序列表的不同类型。 无序列表的不同类型: Disc bullets list:Circle bullets list: 这个例子显示了无序列表的不同类型。 嵌套列表: A nested List:CoffeeTeaBlack teaGreen tea 这个例子说明了可以怎样嵌套列表。 嵌套列表2: A nested List:CoffeeTeaBlack teaGreen tea 这个例子说明了如何创建一个更复杂化的嵌套列表。 自定义列表: A Definition List:CoffeeBlack hot drinkMilkWhite cold drink 这个例子说明了如何创建一个自定义列表。 HTML表单 HTML表单用来选择不同种类的用户输入。 示例 文本框: 这个例子说明了在HTML页面中如何创建文本框。在文本框中,用户可以输入文本。 密码框: 这个例子说明了在HTML页面中如何创建密码框。 在这个页面的底部,还有更多例子。 表单 表单是一个能够包含表单元素的区域。 表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。 表单是用 Input 最常用的表单标签是标签。Input的类型用type属性指定。最常用的input类型解释如下: 文本框 在表单中,文本框用来让用户输入字母、数字等等。 在浏览器中显示如下: First name: Last name: 注意,表单本身并不可见。另外,在多数浏览器中,文本框的宽度默认是20个字符。 单选按钮 当需要用户从有限个选项中选择一个时,使用单选按钮。 在浏览器中显示如下: Male Female 注意,各选项中只能选取一个。 复选框 当需要用户从有限个选项中选择一个或多个时,使用复选框。 在浏览器中显示如下: I have a bike I have a car 表单的action属性和提交按钮 当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。 在浏览器中显示如下: Username: Submit 如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。 更多示例: 复选框: 这个例子说明了在HTML页面中如何创建复选框。用户可以选中,也可以取消选择复选框。 单选按钮: 这个例子说明了在HTML页面中如何创建单选按钮。 简单的下拉列表: 这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。 预选的下拉列表: 这个例子说明了如何创建一个含有预先选定元素的下拉列表。 文本域: This example demonstrates a text-area. 这个例子说明了如何创建文本域(多行文本),用户可以在其中输入文本。在文本域中,字符个数不受限制。 创建按钮: 这个例子说明了如何创建按钮。按钮上的文字可以自己定义。 数据周围的标题边框: Health information: 这个例子说明了如何在数据周围画带有标题的边框。 更多示例: 含有文本框和提交按钮的表单: 这个例子说明了在HTML页面中加入表单。这个表单包含了两个文本框和一个提交按钮。 含有复选框的表单: I have a car: 本文来源:https://www.bwwdw.com/article/n08x.html 相关文章: HTML 30分钟入门教程正则表达式30分钟入门教程时间html入门教程_含大量范例风水口诀,五分钟入门MATLAB入门教程JSP入门教程MATLAB入门教程AngularJS入门教程口琴入门教程30分钟搞定网络图1 正在阅读:HTML 30分钟入门教程01-05最新集团财务部工作报告03-08维修工技能培训08-08《八年级思品人生难免有挫折》说课稿04-12【祝老师的话2016】祝老师的话2016大全02-10陈涉世家 1 - 图文02-289大动物疫病疫苗防伪标签管理程序06-012018-2023年糖尿病专用食品现状研究及发展趋势预测报告(目录)04-10走进综合实践课程 关注学生核心素养 - 图文11-25中国区域地质-《大地构造学》09-01 上一篇:2019年中国工程胶粘剂行业深度调研与市场前景预测报告(定制版)目录 下一篇:深圳市贫困白内障患者复明项目指南 相关文章1MACD精华及30分钟均线 -2高三英语30分钟限时训练3Silverlight入门教程4stata入门教程5MCNP入门教程6Mathematica入门教程7stata入门教程8PS入门教程9Python入门教程10VB入门教程 最新文章exercise2铅锌矿详查地质设计 - 图文厨余垃圾、餐厨垃圾堆肥系统设计方案陈明珠开题报告化工原理精选例题政府形象宣传册营销案例小学一至三年级语文阅读专项练习题2014.民诉 期末考试 复习题巅峰智业 - 做好顶层设计对建设城市的重要意义(三起)冀教版三年级英语上册Unit4 Lesson24练习题及答案2017年实心轮胎现状及发展趋势分析(目录)基于GIS的农用地定级技术研究定稿2017-2022年中国医疗保健市场调查与市场前景预测报告(目录) - 图文作业OFDM技术仿真(MATLAB代码) - 图文Android工程师笔试题及答案生命密码联合密码空间地上权若干法律问题探究江苏学业水平测试《机械基础》模拟试题选课走班实施方案入门教程分钟HTML 推荐文章中国私募股权投资研究完整打印版PEP小学三年级英语全英文教案知识产权优势企业培育工作简阳市平息乡九年义务教育学校五年级半期考试拉斯维加斯旅游介绍 给你一个完美假期 - 图文在格桑花开的地方,我重拾梦想小学三年级上册英语试题三篇上册第四讲 长方形的面积题目建筑环境学先进保安发言稿高中满分作文10妙招K12学习九年级历史上册《西方文明之源》学案新人教版中学生作业规范要求2016年河南单招物理模拟试题:法拉第电磁感应定律河北省石家庄市复兴中学高中语文人教版选修《中国小说欣赏》:11-《呼兰河传》学案 Word版缺答案XX品牌通用耗材市场营销策划书2016年探险旅游行业现状及发展趋势分析广东省社会保险经办业务管理规程“十三五”重点项目-过氧化单硫酸钾盐项目可行性研究报告 - 图文爱国卫生活动方案 Top
Computer code
This only works for the acronym element in IE 5.
This works for both the abbr and acronym element in Netscape 6.2.
If your browser supports bi-directional override (bdo), the next line will be wri
This is a long quotation. This is a long quotation. This is a long quotation. Thi
This is a short quotation
a dozen is twenty twelve pieces
Most browsers will overstrike deleted text and underline inserted text. 这个例子说明了如何标记被删除或者插入的文本。 如何查看HTML源文件 你有没有看过一些网页,并且想知道它是如何做出来的呢? 在浏览器菜单中选择查看——源文件,将弹出一个窗口,这个页面的HTML代码就在其中。
HTML实体
有些字符,比如说“<”字符,在HTML中有特殊的含义,因此不能在文本中使用。
想要在HTML中显示一个小于号“<”,需要用到字符实体。
字符实体
在HTML中,有些字符拥有特殊含义,比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话,必须在HTML代码中插入字符实体。 一个字符实体拥有三个部分:一个and符号(&),一个实体名或者一个实体号,最后是一个分号(;) 想要在HTML文档中显示一个小于号,我们必须这样写:<或者< 使用名字相对于使用数字的优点是容易记忆,缺点是并非所有的浏览器都支持最新的实体名,但是几乎所有的浏览器都能很好地支持实体号。 注意:实体名是大小写敏感的。 下面这个例子能够让你针对HTML实体实践一下。
This is a character entity: {
不可拆分的空格 在HTML中,最常见的字符实体就是不可拆分空格。 通常,HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格,其中9个会被去掉。想要在HTML中插入空格,可以使用实体: 最常用的字符实体 显示结果 < > & 描述 不可拆分的空格 小于 大于 and符号 实体名 < > & 实体号 < > & \'
引号 单引号
"
" '
其他一些常用的字符实体
显示结果 ¢ £ ¥ § ? ? × ÷
描述 分 英镑 人民币元 章节 版权 注册 乘号 除号
实体名 ¢ £ ¥ § © ® × ÷
实体号 ¢ £ ¥ § © ® × ÷
HTML链接 HTML使用超级链接来连接到网络上的其他页面。 示例 创建链接:
is a link to a page on this Web site.
is a link to a page on the World Wide Web.
You can also use an image as a link:
下面这段代码打开一个新的浏览器窗口来打开链接:
锚标签和name属性
name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。
下面是命名锚的语法:
你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚:
你应该注意到了:命名锚的显示方式并没有什么与众不同的。
想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:
一个链接到本页面中某章节的命名锚是这样写的:
基本注意点——有用的技巧
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href=\,将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href=\。
命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。
如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。
更多示例: 在新浏览器窗口中打开链接:
This chapter explains ba bla bla
Locked in a frame?
This is a mail link:
Note: Spaces between words should be replaced by to ensure that
This is another mailto link:
HTML框架 使用框架,可以在一个浏览器窗口中显示不止一个页面。 示例 垂直分栏:
网站开发者需要关心更多HTML文档的情况。 打印整个页面变得困难。
frameset标签
行/列的值指明了每个行/列在屏幕上所占的大小。
frame标签
标签定义了每个框架中放入什么文件。
下面这个例子中,有一个两列的分栏。第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。如果不想让用户改变大小,可以在标签中加入:noresize=\。
给不支持框架的浏览器写上标签。
更多示例:
混合框架:
If they don't, the iframe will not be visible.
HTML表格 使用HTML可以创建表格。 示例 表格:
Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.
row 1, cell 1 row 1, cell 2 row 2, cell 1 注意一下空单元格的边框没有显示出来。为了避免这个,可以在空单元格里加入不可分空格来占位,这样边框能正常显示。 row 1, cell 1 row 1, cell 2 row 2, cell 1 在浏览器中显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 基本注意点——有用的技巧 通常很少使用,
This is a paragraph
This is another paragraph
If you see no frames around the tables in these examples, your browser is too old
HTML列表 HTML支持有序、无序和自定义列表。 示例 一个无序列表:
这个例子显示了一个无序列表。 有序列表:
有序列表也是一个项目的序列。各项目前加有数字作标记。
有序列表以
Coffee Milk
在浏览器中显示如下:
1. Coffee 2. Milk
有序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。
自定义列表
自定义列表不是一个项目的序列,它是一系列条目和它们的解释。
Coffee Black hot drink Milk
White cold drink
在浏览器中显示如下: Coffee
Black hot drink
Milk
自定义列表的定义(标签)中可以加入段落、换行、图像,链接,其他的列表等等。
有序列表的不同类型:
HTML表单 HTML表单用来选择不同种类的用户输入。 示例 文本框:
这个例子说明了在HTML页面中如何创建密码框。 在这个页面的底部,还有更多例子。 表单 表单是一个能够包含表单元素的区域。 表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。 表单是用 Input 最常用的表单标签是标签。Input的类型用type属性指定。最常用的input类型解释如下:
文本框
在表单中,文本框用来让用户输入字母、数字等等。
First name: Last name:
注意,表单本身并不可见。另外,在多数浏览器中,文本框的宽度默认是20个字符。
单选按钮
当需要用户从有限个选项中选择一个时,使用单选按钮。
Male Female
注意,各选项中只能选取一个。
复选框
当需要用户从有限个选项中选择一个或多个时,使用复选框。
I have a bike I have a car
表单的action属性和提交按钮
当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。
Username:
Submit
如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。
复选框:
这个例子说明了在HTML页面中如何创建单选按钮。 简单的下拉列表:
This example demonstrates a text-area.
本文来源:https://www.bwwdw.com/article/n08x.html
相关文章:
正在阅读:
HTML 30分钟入门教程01-05
最新集团财务部工作报告03-08
维修工技能培训08-08
《八年级思品人生难免有挫折》说课稿04-12
【祝老师的话2016】祝老师的话2016大全02-10
陈涉世家 1 - 图文02-28
9大动物疫病疫苗防伪标签管理程序06-01
2018-2023年糖尿病专用食品现状研究及发展趋势预测报告(目录)04-10
走进综合实践课程 关注学生核心素养 - 图文11-25
中国区域地质-《大地构造学》09-01