高中狗苦学HTML语言的基本语法

最新推荐文章于 2024-09-22 23:26:43 发布

vvccyyqq

最新推荐文章于 2024-09-22 23:26:43 发布

阅读量756

点赞数

分类专栏： html 文章标签： html http服务器浏览器 css 结构

html 专栏收录该内容

187 篇文章 2 订阅

订阅专栏

原文：高中狗苦学HTML语言的基本语法
NanShan 高中无聊的时候，一直想学编程，现在准备开始学，学了1个暑假的HTML，说实话一点都没学会，HTML语言的基本语法感觉比英文还难记啊。

HTML是Hypertext Markup Language的英文缩写，即超文本标记语言，是一种用来制作网页的标记语言。自1990年以来HTML就一直被用作互联网的信息表示语言，用于描述网页的格式设计和它与互联网上其它网页的连结信息。它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。1 HTML语言的基本语法
HTML语言编写的文件也可以说是一个文本文件，能独立于各种操作系统平台运行。，它包含了一些HTML元素、标签等。HTML文件必须使用html或htm作为文件名后缀。 HTML对大小写是不敏感的，HTML与html是一样的。生成一个HTML文档主要有以下三种途径：
1、手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2、通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3、由Web服务器（或称HTTP服务器）一方实时动态地生成。
HTML文件可以分成两个部分：文件的内容部分和文件的标记部分。
一般来说，标记使用下面的格式：
<标记名>文件内容（受标记名影响的文本）</标记名>
例如：粗题字的标记是<B>，那么短语 Hello world 用粗体字来表示就是：
<B> Hello world </B>
<B>表示开始显示粗体，</B>表示粗体显示结束。
2 页面2.1 HTML 文件结构
所有的HTML语言均包含在<html>...</html>中，在<html>...</html>中嵌入<head>...</head>作为HTML的头，主体部分放在<body>...</body>中。如下例：
<HTML>
<HEAD>
<title>, <base>, <link>, <meta>
</HEAD>
<BODY>
HTML 文件的正文写在这里... ...
</BODY>
</HTML>
2.2背景色彩和文字色彩
背景色彩和文字色彩的设置使用以下格式标记：
<body bgcolor=# text=# link=# alink=# vlink=#>，其中：
bgcolor —— 背景色彩
text —— 非可链接文字的色彩
link —— 可链接文字的色彩
alink —— 正被点击的可链接文字的色彩
vlink —— 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。也可以用单独的英文字母表示如：red，green，blue等。
2.3 背景图象
背景的图像的标记使用<body background="image-url">，为网页加入背景图像时，只需将上述标记中的image-url替换成背景图像的url地址即可。
2.4页面空白(Margin)
页面空白标记Margin是网页排版的重要工具，页面的空白分为上、左、下、右四个部分，分别表示如下：
页面上边的空白 <body topmargin=#>
页面左边的空白 <body leftmargin=#>
页面下边的空白 <body bottommargin=#>
页面右边的空白 <body rightmargin=#>
其中“#”填入具体的空白大小，可用像素表示，如：12px。
2.5链接(Link)
链接是网页制作中最重要也是最基本的部分，链接的基本语法 <a href="url"> ... </a>，链接可以分为3种类型：相对链接、绝对链接和页内链接。
1、相对链接：url中的地址使用相对于本页所在位置的链接，这种链接是网站制作中经常使用的一种形式，由于是相对位置，所以不受网站文件具体位置的影响，便于移植。
下面是一个相对链接的例子：
<a href="samp/link.html">链接的例子</a>
2、绝对链接：是指url中的地址是完整的url地址，一般用于对网站外部文件或网页的链接，在url中输入想要链接的完整地址，此方法灵活性较差，一旦链接文件的地址发生变化，则该链接失效。
下面是一个绝对链接的例子：
<a href="http://wwv.sohu.com">链接到搜狐网站</a>
3、页内链接：即锚链接。基本语法格式如下：
<a href="#name"> ... </a>
<a name="name"> ... </a>
下面是一个页内链接的例子：
<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a>
跳转到下一个"链接点"
4、跳转到另一个页面的某个地方。基本语法格式如下：
<a href="url#name"> ... </a>
<a name="name"> ... </a>
下面是一个跳转到另一个页面的某个地方的例子：
跳转到另一个页面的<a href="http://wwv.nanshan.biz/">即时通讯</a>。
跳转到另一个页面的即时通讯。
2.6链接的打开方式
链接的打开方式共有4种形式，其标记为target具体用法如下：
_blank 将链接的文档载入一个新的、未命名的浏览器窗口。
_parent 将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
_self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。
_top 将链接的文档载入整个浏览器窗口，从而删除所有框架。
3 字体3.1标题字体(Header)标题字体包含在<h#> ... </h#> 中，其中#=1, 2, 3, 4, 5, 6分别表示表示的大小，从1-6依次减小。【例2-5】<h1>今天天气真好！</h1> 今天天气真好！<h2>今天天气真好！</h2> 今天天气真好！<h3>今天天气真好！</h3> 今天天气真好！<h4>今天天气真好！</h4> 今天天气真好！<h5>今天天气真好！</h5> 今天天气真好！<h6>今天天气真好！</h6> 今天天气真好！3.2字体大小网页中所使用文字的大小一般用<font size=#> ... </font>定义，其中 #=1, 2, 3, 4, 5, 6, 7 or +#, -#【例2-6】
<font size=7>今天天气真好！</font> 今天天气真好！
<font size=6>今天天气真好！</font> 今天天气真好！
<font size=5>今天天气真好！</font> 今天天气真好！
<font size=4>今天天气真好！</font> 今天天气真好！
<font size=3>今天天气真好！</font> 今天天气真好！
<font size=2>今天天气真好！</font> 今天天气真好！
<font size=1>今天天气真好！</font> 今天天气真好！
3.3字体颜色网页中使用带有颜色的文字，可以使网页变得更加丰富多彩，同时可以起到强调重点内容，增强页面美观效果的作用，文字颜色用 <font color=#> ... </font>定义，其中#=rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, Green, Purple, Silver, Yellow, Aqua 4文字布局4.1行的控制1、段(Paragraph) (可以看作是空行) <p><p>是HTML语言中表示段落(Paragraph)的标记，<p>可以看作是一个空行，如下例所示：
你好吗？<p>很好。
你好吗？
很好。
在HTML中，一个段落包含在<p>和</p>之间。其效果类似于Word中的“回车”产生的一个段落。
2、换行 <br>在HTML中，分段和换行是不同的概念，这一点和Word中是一样的，HTML中换行用<br>作为标记。
你好吗？<br>很好。
你好吗？
很好。
这里请大家仔细比较<p>和<br>的区别，在上文中我们提到<p>的作用类似于Word中的回车，而<br>的作用相当于Word中的“Shift+Enter”。
3、不换行<nobr>
如果不换行可使用<nobr>标记，可产生如下效果：
<nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
注意：<nobr>这个标签和浏览器的宽度有关系，请读者调整浏览器的宽度看一下相应的效果。
4.2文字的对齐(Alignment)
在HTML中，文字的对齐对网页的排版是十分重要的一项功能，对齐用align这个标签，align可以嵌入到<h>、<p>、<div>或<table>中，控制其中文字的对齐方式。Align中包括left（左对齐）、center（居中对齐）、right（右对齐）三种常用属性。例如：
<h3 align=center>Hello</h3>
<h3 align=right>Hello</h3>
HelloHello4.3文字的分区(Division)显示可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果有一个带有附加到文档的定位样式的现有 CSS 样式表，使用该标签将非常有用。基本语法格式为<div align=#> ... </div>，#=left，center，right例：
<div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>
Can you feel happiness without unpleasant?
Please show me your smile. 4.4列表
在HTML中，可以用现有文本或新文本创建编号（排序）列表、项目符号（不排序）列表和定义列表。
定义列表不使用项目符号点或数字这样的前导字符，通常用在词汇表或说明中。列表还可以嵌套。嵌套列表是包含其他列表的列表。例如，您可能希望编号或项目列表嵌套在其他编号列表中。
（1）无序列表， <ul><li>...</ul>（2）有序列表，<ol><li>...</ol>（3）定义列表(Definition lists)， <dl><dt>...<dd>...</dl>（4）定制列表元素， <li type=#> ，#=disc, circle, square（5）定制有序列表表中的序号， <li type=#>， #=A, a, I, i, 1（6）定制有序列表表中的序号的起始值， <ol start=#> #=number5图像5.1链入图象的基本语法
图像是网页中除文本外另一个重要的元素，在文档中适当的使用图像，不仅可以使文本清晰易读，而且使文档更有吸引力。
基本语法格式：
<img src=#> #=图象的 url
<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字。
例如，<img src="f.gif" alt="MY FACE :-)">
5.2 图象和文字的对齐
基本语法格式：<img align=#> #=top, middle, bottom
5.3图象在页面中的对齐/布局(Floating Image)
基本语法格式：
<img align=#>，#=left，right
<br clear=all>
<img vspace=# hspace=#> #=value
5.4边框
基本语法格式：
<img border=#> #=value
6表格定义
表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。在Dreamweaver中对表格的操作很多，HTML同样可以完成在Dreamweaver中能够实现的所有功能，熟练的对表格进行合并、拆分对应用表格起到十分重要的作用。
基本语法：<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
下面我们将通过一些具体的小例子来形象地说明表格的使用方法。
1、带边框的表格：
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food

Drink

Sweet

A

B

C

2、不带边框的表格：
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food

Drink

Sweet

A

B

C

3、跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Morning Menu

Food

Drink

Sweet

A

B

C

4、跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>

Morning Menu

Food

A

Drink

B

Sweet

C