HTML基础学习第一课

最新推荐文章于 2024-03-28 19:26:29 发布

XM..

最新推荐文章于 2024-03-28 19:26:29 发布

阅读量962

点赞数 3

分类专栏： HTML 文章标签： php

本文链接：https://blog.csdn.net/xiaomoge__/article/details/126750860

版权

HTML 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一、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>