在线建站培训
您的位置: 魔客吧魔客学院网站建设教程查看内容

课时2-6:网站建设基础知识之HTML语言简介

讲师:moke | 课程:网站建设教程
  HTML语言是我们建站的基础,不管你是要搭建网站,做SEO,开发模板,开发系统都需要html知识作为基础。可能会有同学说周边有很多站长不懂html知识,一样可以自己搭建网站。甚至有些SEO从业者也不懂html知识,一样在做SEO。没错,如果你不懂html知识,你也能搭建一个网站,也能做简单的SEO。并且这样的站长还不少。不过,如果你想认真的运营一个网站,优化一个网站,那你必须懂得SEO。因为网站的一些修改,网站内部优化都需要懂html。否则,你永远只是入门,不会有提高。

  那么,说了那么多,到底什么是html语言呢?html语言翻译过来就是超文本标记语言。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。那么,在那里我们能看到html语言呢?任何一个网站,你通过鼠标右键“查看页面源代码”看到的那些代码就是html语言。如下图:
1.png


  我们看到的页面效果,其实就是由这些html语言组成的。当然除此之外还有css样式表来控制页面的样式,这个我们在下一节课程中会给大家讲到。在这里有同学可能会说,我通过鼠标右键就可以查看一个网站的“源代码”了,那么我是不是把这些源代码拷贝过去,就有了这个网站的程序了?这是新手的一个误解。网站的源代码一般为asp,php等语言,而我们在浏览器看到的网页只是这些语言生成的文件,真正的源代码我们是无法直接浏览到的,我们看到的页面都是经过服务器和浏览器“翻译”而来的html页面。我们看到的这些页面只是一个样式,相当于一件衣服。所以当有同学问我们从我们网站下载的html模板为什么没有后台时,我都回答请你先了解一下html语言。像我们魔客吧里提供的html模板,都只是一些页面的样式,没有功能,只是单纯的页面样式。你可以用这些html模板制作成织梦模板,或者直接开发一个系统都是可以的。相当于给你的爱车披了件漂亮的外衣,而它实际上并没有汽车的功能。

  超文本标记语言文件以.htm为扩展名或.html为扩展名,也就是我们说的静态文件。我们可以使用记事本来编辑它,一般我们使用的dreamweaver软件来进行编辑制作。它主要分为两部分,即头部内容<head></head>和主体内容<body></body>。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。下面我们就列举一下头部内容和主机内容中常用到的html语言标签。

头部内容<head></head>
标签
描述

<head>
定义了文档的信息
<title>
定义了文档的标题
<base>
定义了页面链接标签的默认链接地址
<link>
定义了一个文档和外部资源之间的关系
<meta>
定义了HTML文档中的元数据
<script>
定义了客户端的脚本文件
<style>
定义了HTML文档的样式文件

其中title,keywords,description这三个标签在SEO中经常提到
<title>这里显示网站的标题</title>
<meta name="keywords" content="这里显示页面的关键词" />
<meta name="description" content="这里显示页面的内容简介"/>

主体内容<body></body>
<a href="地址"></a> 创建超文本链接
<br/> 定义新行
<h1></h1> 最大的标题(一号标题,在SEO中会经常讲到)
<p></p> 创建一个段落
<ul></ul> 创建一个无序的列表,默认前面标有圆点,也可以自己设置为none或者其他形状,如空心圆、方块等。
<li> 放在每个列表项之前
<div></div> 层
<forum></forum>表单
<table></table>表格(以前主要的布局方式,现在用的比较少,都采用div+css进行页面布局)
...
当然,除了以上一些常见标签之外,还有很多标签,在这里我们就不一一介绍了。其它的标签,大家可以自己去了解一下。

   以上就是html语言的一些基础知识。当然这些只是一些最基础的知识,更多知识大家可观看《div+css视频教程》。最近HTML5语言比较火,像国外很多网站已经运用上了。不过,国内还是很少见的,大家使用在手机网站上,而且只是部分引用了html5语言。html5语言在标签上和html有所不同,html的布局主要运用div层来进行布局,而html5有<header><nav>等,语言更丰富,功能更强大。

HTML5语言
<header></header>  头部
<nav></nav>导航
<footer></footer>底部
...

   我们只是例举了一部分html5语言知识,当然html5语言相对于html语言不仅仅是标签上的不同,在功能方面更为强大。不过IE8浏览器并不支持html5语言。如果你使用html5语言编写的页面,在IE8浏览器上可能会出现错乱的问题。当然也可以通过一些js文件来实现兼容。

   好了,以上就是html语言的一些基础知识。大家下去后自己可以自己在学习研究一下。如果要想自己画图,切图制作一个网页,那么你必须熟悉html语言。如果你只是仿站,修改网站,做SEO,那么这些基础知识就已经足够你应付了。当然,技多不压身,我们还是建议大家多学习。
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载