html教学1

浏览量963 点赞821 2020-06-07

此文章为小弟译自W3CSchool ,
转贴请 pm 告知小弟, 谢谢如有任何问题 也欢迎告知
什幺是HTML档案?HTML是超文字标记语言 的缩写HTML档案是由一些标记标籤所组成标记标籤是用来告诉浏览器要如何显示网页的一个HTML档案的副档名一定是 .htm 或是 .html用简单的文字编辑器就可以撰写HTML档案
试写一个HTML档吧!如果您是 Windows 系统: 请开启记事本或其它文字编辑器如果您是 MAC 系统: 请开启 SimpleText 或其它文字编辑器如果您是 OSX 系统请更改以下偏好设定: 在偏好设定视窗选择以 "Plaintext" 取代 "Rich text ", 并选择"Ignore rich text commands in HTML files"选项,以上的设定非常重要, 因为您如果不作这些设定, 您所编写的HTML档案可能无法正确执行输入以下程式码至您的文字编辑器里:


Title of page


This is my first homepage.This text is bold

编辑完成之后,请存档为 "mypage.htm".
开启您的浏览器, 选择功能表的"档案", 并选择开启, 之后会跳出一个对话方块, 选择浏览,将目录切换至您刚刚储存 "mypage.htm" 档案的目录,选择 "mypage.htm" 档案, 并选择开启.之后您应该会看到一个网址在您的对话方块里, 例如:"C:\MyDocuments\mypage.htm", 点选确定,之后浏览器就会显示这个网页了
mypage.htm 範例说明在您HTML程式码里的第一个标籤是,这里标籤是功能是在告诉你的浏览器:HTML档案是从这里开始的, 而在您HTML程式码里的最后一个标籤是,这里标籤是功能是在告诉你的浏览器:HTML档案在这里结束
在和标籤之间的内容是档头资讯, 而这些档头资讯将不会显示在浏览器里
标籤之间是你这份HTML档案的标题, 这个标题将会显示在浏览器的标题列
在和标籤之的内容将会显示在浏览器内
标籤之的内容将会在浏览器内以粗体字显示
副档名为 HTM 或是 HTML ?当你在储存一个HTML档案时, 你可以使用 .htm 或是 .html 为档案的副档名. 在我们的範例里将会以 .htm 为副档名, 这可能是一个坏习惯, 因为过去使用的软体只允许用三个字母来当副档名
但是一些新版的软体对于使用 .html 为副档名的档案是可以很顺利执行的
编辑时所使用的份HTML编辑器你可以使用一些所见即所得的编辑器, 像是 FrontPage, Claris Home Page 或者Adobe PageMill来编辑你的HTML档案, 而不是使用纯文字编辑器来编辑, 但是如果你想要成为一个编辑网页的高手, 我们强烈建议你在刚开始学习HTML时, 使用一个纯文字编辑器来编辑你的HTML档案
问答集Q: 在我编辑好我的HTML档案时, 为什幺无法在我的浏览器看到结果?
A: 请确定在存档时使用了正确的档名和副档名, 例如:"c:\mypage.htm", 并请确定在浏览器开启档案时使用了相同的档名
Q: 我试着去更改一个HTML档案, 但是我确无法在浏览器看到, 为什幺?
A: 因为浏览器储存了你的网页, 所以不会对同一个网页读取两次, 当你修改了网页时, 浏览器并不知道你对网页做了修改, 可以使用浏览器的"重新整理"去强迫浏览器再读取一次你修改过后的网页
Q: 我该使用什幺浏览器呢?
A: 你可以使用一般常见的浏览器, 像是 Internet Explorer, Mozilla, Netscape, 或者 Opera, 但是在一些进阶的HTML教学範例里,可能会要求你使用最新版的浏览器
Q: 我的电脑一定要是 Windows 系统吗? 如果是 MAC 的系统呢?
A: 你可以在非 Windows 系统下练习所有的範例, 但是在一些进阶的HTML教学範例里会要求使用较新版的 Windows, 像是 Windows 98 或是 Windows 2000
HTML文件是由HTML元素所组成的文字档案
HTML元素是由HTML标籤所组成的
HTML标籤HTML标籤是用来组成HTML元素在符号<和>之内的文字即为HTML标籤将HTML标籤包起来的<和>称为 angle bracketsHTML标籤通常是一对的, 像是在这对标籤里的第一个标籤称为起始标籤,例如, 第二个标籤称为结束标籤,例如在起始标籤和结束标籤之间的文字即为元素内容HTML的标籤并没有大小写的分别, 例如像是意思是一样的
HTML元素之前的HTML程式


Title of page


This is my first homepage.This text is bold

下面这段程式码便是HTML元素:
This text is bold
这个HTML元素是由标籤开始, 并且在结束, 而"This text is bold"就是HTML元素的内容了, 而标籤的目的就是要使浏览器将HTML元素显示成粗体字
下面这段程式也可称为是HTML元素:

This is my first homepage.This text is bold

这个HTML元素是由标籤开始, 并且在结束, 而标籤的目的就是要告诉浏览器这个HTML元素内容包函了HTML文件的主体
为什幺使用小写的标籤?我们刚刚才说HTML的标籤并没有大小写的分别, 例如像是意思是一样的, 但当你在浏览网路时, 你会看到许多的教学文件在他们的範例里都是使用大写的HTML标籤, 而在我们的教学文件里却都是使用小写的HTML标籤, 为什幺呢?
因为W3C建议在HTML4里使用小写标籤并且在XHTML也要求使用小写的标籤, 所以如果你要为下一代的HTML作準备的话, 那幺你就应该开始使用小写的HTML标籤
标籤属性标籤也可以拥有属性, 标籤的属性可以为你网页里的HTML元素提供一些额外的讯息给浏览器
标籤是定义HTML网页的主要内容, 当你在标籤里加入背景颜色的属性, 你就可以告诉浏览器你的网页背景颜色为红色, 例如:
这个标籤是用来定义网页里的表格, 当你要告诉浏览器你这个表格没有边界时, 你就可以在这个标籤里加入"边界"的属性, 例如:

属性的设定方式为:名称/值,例如:name="value", 而属性必需加在HTML元素的起始标籤里
引号的方式, "red"或是'red'?属性的值必需用引号把它包起来, 双引号是比较常见的方式, 但是也允许使用单引号, 在一些比较少见的情况, 例如属性的值也包函了引号的时候, 就有必要使用单引号了, 例如: name='John "ShotGun" Nelson'
在HTML里非常重要的标籤是那些定义标题, 段落和断行的标籤
而学习HTML最好的方法就是从许多範例里学习
简单的HTML範例编辑下例简单的HTML程式码, 并在浏览器里开启範例观看结果, 并试着了解HTML标籤的作用
简单的HTML文件


在元素里的内容将会显示在你的浏览器里.

简单的段落範例


这是一个段落


这是一个段落


这是一个段落


段落元素是由标籤 p 来定义



标题标题是由

标籤来定义的,

定义最大的题, 而

定义最小的标题, HTML会自动在标题的前后自动加入额外的空白行, 例如:


这是一个标题


这是一个标题


这是一个标题


这是一个标题


这是一个标题

这是一个标题


段落段落是由标籤

来定义的,HTML也会自动在段落的前后自动加入额外的空白行, 例如:


这是一个段落


这是另外一个段落



断行标籤
是用来强迫浏览器断行用的, 但是不像段落,HTML在段落会前后会加入额外的空白行, 但断行并不会, 而标籤
是一个空标籤, 它并没有所谓关闭标籤标籤
, 例如:



是一个有断
行的段落



HTML里的注解注解标籤是用来在你的HTML程式码里插入注解, 而浏览器会将注解忽略, 你可以使用注解来说明你的HTML程式码, 注解在你以后修改HTML程式码时会有很大的帮助, 例如:




小技巧在你撰写HTML程式码时, 你永远不能确定你的程式码在其它的浏览器是如何显示的, 有些人的显示器较, 而有些人的显示器则较小, 而当其它使用者改变他的视窗大小时, 你的HTML程式码将会被重新载入一次, 所以, 千万不要在你的HTML程式码里加入空白行或空白来排版你的HTML程式码
HTML会忽略你HTML程式码里的空白, 不论是多少个空白HTML都只会当成只有一个空白, 而在HTML程式码里新的一行也会被当成一个空白
使用空段落

去插入一个空白行是一个很不好的习惯, 正确的作法应该是使用
标籤来插入一个空白行, 但是不要利用
标籤来製作你的列表或清单
你可能察觉到段落标籤

不需要结束标籤

也可以, 如果可以, 不要这幺使用也不要太依靠它, 因为在下一版的HTML里将不会允许你忽略任何的结束标籤.
HTML会自动的在一些元素的前后加入空白行, 像是段落和标题
範例将以下範例输入到HTML程式码里, 并以浏览器开启, 试着了解每个标籤的作用及特性
段落:这个範例说明了在HTML里段落元素的预设行为



这个段落
在原始程式码里
包函了许多行,
但是浏览器
会忽略它.



这个段落
在原始程式码里
包函了许多空白,
但是浏览器
会忽略它.



一个段落的行数取决于浏览器视窗的大小, 如果你改变浏览器视窗的大小, 则段落的行数也会跟着改变.



断行:这个範例说明了如何在HTML程式码里使用断行


在一个
段落里
要断行,
使用的是br标籤



格式问题:这个範例说明了在HTML程式码格式上的问题



Baby won't you tell me why there is sadness in your eyes
I don't wanna say goodbye to you
Love is one big illusion I should try to forget
but there is something left in my head


浏览器会忽略你在HTML程式码里的格式



标题:这个範例说明了在HTML里显示标题的标籤


这是标题 1


这是标题 2


这是标题 3


这是标题 4


这是标题 5

这是标题 6

只有在标题时才使用标题标籤, 不要利用标题标籤来显示粗体字, 应该利用其它标籤来显示粗体字



置中:这个範例说明了在HTML程式码如何使用置中标题


这是标题 1


上面的标题将对齐中间



水平线:这个範例说明了如何在HTML里插入水平线


标籤hr定义水平线




这是一个段落




这是一个段落




这是一个段落



注解:这个範例说明了如何在HTML程式码里插入注解



这是一个段落



属性:这个範例说明了如何在HTML网页里加入背景颜色的属性


看, 背景颜色被改了