HTML基础知识

标签: HTML  L

目录

关于HTML

1.什么是HTML

2.HTML编辑器

建一个新文件并保存

HTML基础

1.HTML标题

2.HTML段落

3.HTML链接

4.HTML图像

HTML网页查看

第一个前端界面


关于HTML

 

1.什么是HTML

HTML(HyperText Markup Language)指的是超文本标记语言,它不是一种编程语言,而是一种标记语言,用来标记标签描述网页。

超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素。超文本标记语言的结构包括Head部分,Body部分。其中,Head提供了关于网页的信息,Body提供了网页的具体内容。

 

2.HTML编辑器

可以用专业的HTML编辑器来编辑HTML,新手入门推荐Notepad++,Sublime Text,Brackets等,当然还有前端编辑神器Dreamweaver。此后的所有例子,内容讲解都基于Sublime Text3。

除了编辑器之外,你还需要一个浏览器,比如谷歌浏览器。

 


建一个新文件并保存

下载好Sublime Text3编辑器。

打开Sublime Text3编辑器,点击菜单栏"File",选择"New File"创建新文件,再次点击"File",选择"New File",选择保存路径,文件名后缀为.html。(敲黑板划重点)

创建好了文件并保存后,就可以愉快地写前端界面啦。

 


HTML基础

1.HTML标题

HTML的标题(Heading)是用<h1>--<h6>标签定义的,1-6依次字体变小。比如:<h1>第一个网页<h1>

<h1>第一个网页</h1>

HTML中标签成对出现,如此处的<h1></h1>。

2.HTML段落

HTML的段落用标签<p>定义。比如:<p>这是一个段落</p>。

<p>这是一个段落</p>

3.HTML链接

HTML的链接用标签<a>定义。比如:<a href="http://www.baidu.com">链接</a>。

<a href="http://www.baidu.com">链接</a>

href为属性,指定链接地址。

4.HTML图像

HTML图像用标签<img>定义。比如:<img scr="3.jpg" width="250" height="250" />。

<img scr="3.jpg" width="250" height="250" />

注意:此处图片名称与保存的图片名称一致;此处对图片的设置是属性所提供的。

 


HTML网页查看

有以下两种方法:

  1. 找到创建新文件时保存的.html文件,用浏览器打开。
  2. 在Sublime Text3环境下的空白处点击右键,选择"Open in Browser"。

第一个前端界面

介绍了上面四种最简单的标签,下面的例子将融合四种标签写一个简单的界面。

网页显示如下图所示(可实现背景图片变化):

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
     <mate charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
     	h1{
     		color: white;
     		font-size: 45px;
     		text-align: center;
     		margin: auto;
     		top: 0;
     		left: 0;
     		right: 0;
     		bottom: 0;
     	}
     	h2{
     		color: white;
     		font-size: 30px;
     		text-align: center;
     		margin: auto;
     		top: 0;
     		left: 0;
     		right: 0;
     		bottom: 0;
     	}
     	.div_1{
     		color:blue;
     		font-size: 22px;
     		text-align: center;
     		margin: auto;
     		top: 0;
     		left: 0;
     		right: 0;
     		bottom: 0;
     	}
     	.img_style{
     		height: 100px;
     		width: 100px;
     		border-radius: 50%; 
     		border: 1px dashed grey;
     		background-image: url("1.jpg");
     		text-align: center;
     		margin: auto;
     		top: 0;
     		left: 0;
     		right: 0;
     		bottom: 0;

     	}
        body{
        	background-image: url("2.jpg");
        	background-size: 100%;
        	animation-name: test1;
        	animation-duration: 20s;
        	animation-delay: 0s;
        	animation-iteration-count: infinite;
        	animation-play-state: running;
        }

        @keyframes test1{
        	0%{
        		background-image: url("timg.jpg");
                background-size: 100%;
        	}
        	50%{
        		background-image: url("timg1.jpg");
                background-size: 100%;
        	}
        	100%{
        		background-image: url("timg2.jpg");
                background-size: 100%;
        	}
        }
     </style>
</head>

<body>
     <h1>Star</h1>
     <br>
     <h2>Welcome</h2>
     <br>
     <div class="div_1">
     <a href="http://www.baidu.com">链接</a>
     </div>
     <br>
     <div class="img_style"src="2.jpg">
     </div>
     <form action="" method="">
     <div class="div_1">
     用户名:<br>
     <input type="text" name="uername" ><br>
     密码:<br>
     <input type="text" name="password"><br>
     <p><input type="button" name="submit" value="登陆"></p>
     </div>
     </form>
     <div class="div_1">
        <h4>区域一<span style="color: blue"></span></h4>
     </div>
     <div class="div_1">
     	<h4>区域二<span style="background-color: #FFFFFE"></span></h4>
     </div>
</body>
</html>

以上有些内容没有介绍,将在之后的内容进行补充~

原文链接:加载失败,请重新获取