HTML基础学习第一课

一、HTML语言的编辑和运行环境：

1、编辑器：window自带的笔记本或者可视化网页制作软件的代码收图中直接编写代码。建议使用notepad++

2、运行环境：只需在游览器的地址栏中输入文件地址即可

二、基本语法结构及文件结构：

HTML元素：

HTML元素以开始标签起始

HTML元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容大多数HTML元素可拥有属性

HTML基本结构：

<!DOCTYPE html>告诉游览器html版本

<html> HTML开始标记

<head>文件头开始标记

<title>.......................</title>网页的标题

</head>文件头结束标记

<body>文件主体开始标记

....

....具体内容

....

</body>文件主体结束

</html>HTML结束

理解以上内容之后开始练习1：

新建一个文本文件，重命名为实验.html（注意一定要将原后缀名TXT改为html）；

实现以下结果：

代码如下：

<html><head><title>欢迎来到我的个人网页</title></head><body>姓名：小莫学号：01</body>
</html>

书写的注意事项：

1、“<”和“>”是所有标记的开始和结束，元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

2、标签和标签之间也可以相互嵌套。

3、在源代码中不区分大小写。

4、回车键和空格键在源代码中不起作用。

5、源代码中以结束的代码为注释代码。

实例1：

代码如下：

<html><head><title>欢迎来到我的个人网页</title></head><body><h1>这是我的第一个网页</h1><p>姓名：小莫</p><p>学号：01</p></body>
</html>

<html>与</html> 之间文本描述网页

<title>与</title> 之间文本网页标题

<body>与</body> 之间文本是页面可见内容

<h1>与</h1> 之间的文本为标题

<p>与</p> 之间的文本被显示为段落

HTML 标题

HTML标题（Heading）是通过<h1>-<h6>等标签进行定义的。

练习2：实现以下内容

<html><head><title></title></head><body><h1>这是标题一<h1><h2>这是标题二<h2><h3>这是标题三<h3><h4>这是标题四<h4><h5>这是标题五<h5><h6>这是标题六<h6></body>
</html>

HTML段落

HTML段落是通过<p>标签进行定义的。

练习3：实现以下内容

代码如下

<html><head><title></title></head><body><h2>什么是HTML？</h2><p>HTML是用来描述网页的一种语言</p><p>HTML指的是超文本标记语言</p><p>不是一种编程语言，而是一种标记语言</p><p>标记语言是一套标记标签</p><p>HTML使用标记标签来描述网页</p></body></html>

HTML 链接

HTML链接是通过<a>标签进行定义的

实例：<a href="http://www.hnplc.com">海南政法</a>

注释：在href属性中指定链接的地址

练习4：实现以下内容

代码如下：

<html><head><title></title></head><body><h2>超链接练习</h2><p>下面是超链接</p><a href="https:baidu.com">百度</a></body></html>

HTML 图像

HTML图像是通过<img>标签进行定义的

实例：<img src="http://www.hnplc.com/upload/images/2015/6/816179996.jpg"/>

注释：src是<img>标签头属性

练习五：实现以下内容

代码如下：

<html><head><title></title></head><body><h2>图片练习</h2><p>下面是图片</p><img src="http://www.hnplc.com/upload/images/2015/6/816179996.jpg"/></body></html>

把这些知识总和起来进行最后的练习：实现以下内容

代码如下

<html><head><title></title></head><body><h2>海南政法学校信息</h2><img>图片<img src="http://www.hnplc.com/upload/images/2015/6/816179996.jpg"/><p>学校名称:海南政法</p><a href="http:www.hnplc.com">学校</a></body></html>