div+css视频教程之认识基本HTML语法

当前位置:

首页 > 网站开发 > css >

div+css视频教程之认识基本HTML语法

既然要成为CSS高手，HTML语法就不能不稍微了解一下，因为CSS样式是针对HTML的卷标作为定义的对象；且设定好的CSS样式也是得套用在HTML文件中，所以，想要真正搞懂CSS，以下这些HTML请确实掌握，这样成为CSS高手的路会平坦一些。
但是话说前头，本文主要是就HTML语法架构做『入门』的说明，如果是已经有一定制作网页程度或是只愿意在『所见即所得』网页编辑软件中制作网页的人，此篇不妨可以先略过，直接进入下一篇的CSS教学文章！
下图为一个纯粹使用HTML语法撰写的页面：

而下图则是此页面的原始码画面：

1.首先，我们来了解一下HTML语法的基本架构：
a.HTML的语法是由许多的『标签』所构成，每一个<>的括号框住的部分就是标签。
b.HTML的标签都是以英文组成，没有大小写的分别，也就是说<html>和<HTML>是一样的。
c.<>中的项目我们称为HTML的『元素』，例如<body>的body就是元素的一种。
d.许多的标签都是『成对』的，例如下图中的<head>和</head>，其中的<head>写在前面，我们称为『起始标签』，而写在后面的</head>则称为『结束标签』。

e.而写在起始卷标和结束卷标之间的文字就是该元素的『内容』，例如下图的红框处就是head元素的内容。

2.网页页面内容图解说明：

‧上图1为网页内文的大标题文字，套用了html语法中的<h1></h1>标签。

‧上图2为内文的段落文字，套用了<p></p>标签。

‧上图3表示在页面中插入了一张图片，套用了<img>标签。

‧上图4为在内文中插入一个3栏3列表格，使用的是<table></table>标签。

‧上图5表示在文字上加入了『超链接』，使用了<a></a>标签。

‧上图6表示网页的页面标题，使用了<title></title>标签。

3.接着我们便针对上述页面撰写时所使用到的HTML标签做分别的说明：
a.<html>和</html>：宣告HTML文件的开始与结束
这个标签目的在宣告HTML文件的开始与结束，也因为有这个标签的存在，我们所编辑的文件才会被视为网页文件，一般来说，<html>会出现在文件原始码的最前面；而</html>则出现在原始码的最后面，而此页面所有的语法则一定会放在此组标签之间。(如下图)

b.<head>与</head>：用来放置网页的文件头信息
所谓的文件头信息，就是用来放置一些不直接显示在页面内容中的设定，像是『页面标题』、『关键词』，还有就是当我们要宣告CSS样式的时候，也是将语法放在这组卷标当中。(下图红框处内容即为放在<head>和</head>之间的语法)

c.<title></title>：网页页面标题标签
此组标签的目的是用于定义网页页面的标题，写在两个卷标当中的文字就是标题文字，此文字会出现在浏览器的最上面标题烈的地方，而此标签必须写在<head>和</head>之间。(如下图)

结果显示如下图红框处就是标题：

d.<body></body>：文件内容
此标签是用来定义网页的所有内容，举凡所有眼睛看得到的部分(像是文字、图片、表格等等)的卷标语法，都会写在此标签当中。

到此，设计岚针对了HTML语法中最初浅，也最基本一定会出现在网页里面的标签做了一个介绍，有心提升CSS技术的人参考一下。当然，HTML的标签绝对不止于此，但是有了这样的基本概念，接下来设计岚说明CSS的相关概念时，应该是够用了，后续，我们将开始针对CSS的样式作一系列的说明，敬请期待！

栏目列表