First:
什么是HTML?
HTML(Hypertext Marked Language)称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
额,好像解释的还很复杂,我们看到网站上的网页就是由html和它的兄弟们(css,javascript)构建而成。当然你肯定又会问,为什么在浏览器上打开就可以显示这些内容呢?
因为这是因为它们遵守规则,DOCTYPE是用来声明文档类型和DTD规范的。 <!DOCTYPE html>
声明位于HTML文档中的第一行,不是一个HTML标签,处于 html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。这个便是我们要介绍html文件第一行,一定要书写这句话。
很突兀,可以把这个作为这个标记语言构造,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a>hello HTML</a>
</body>
</html>
标准的格式,有头,有身体,身体里就是要书写主要的内容了。
大脑里面的定义的相关东西是看不到的
<!DOCTYPE html>
<html>
<head>
<meta Charset="UTF-8"> <!-- 页面的编码 -->
<title>我就是网页的标题</title>
<style>
a{
color:red;
}
</style> <!-- 在这里面书写css代码,例子:a标签中的内容变成红色 -->
<link rel="stylesheet" href="外部的css文件路径"> <!-- 可以分开写html、css、js文件,这里是引入css文件 -->
<script src="引入js的路径,让网页动起来"></script>
</head>
<body>
<a>hello HTML</a>
</body>
</html>
基本上脑阔里常用的标签都在这里面了。
下面介绍身体里面的标签,这个就比较多了,先了解常用的。
标签主要分为块级标签(该标签占用那个位置的一整行)和行内标签(自己的长度是多少就占用多少长度)两种.
块级标签:<h1>有6级 标题的大小改变<h1> <div></div> (div+css) <form>创建HTML表单</form> <p>定义段落</p>
行内标签:<span></span> <label>标签为</label> <input>输入框 <img>向网页中嵌入一幅图像 <a>标签可定义锚
了解到这些基本的标签就可以写一个静态的登录界面了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label for="user">账号:</label>
<input id="user" type="text" >
<label for="pwd">密码:</label>
<input id="pwd" type="password" >
<a href="http://www.baidu.com"><input type="submit" value="提交"></a>
</body>
</html>
效果图
<input>标签中的type有text(文本类型)、password(密码类型)、submit(提交)等;
下面要介绍一下div标签,在设计的时候这个标签用的频率可算最多,用一些css先来体现它的设计范:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width:600px;
height:400px;
border:2px solid red;
}
.box .left-low-box{
float:left;
width: 300px;
height: 400px;
background:aquamarine;
}
.box .right-low-box{
width: 300px;
height: 400px;
float:right;
background:darkmagenta;
}
</style>
</head>
<body>
<div class="box">
<div class="left-low-box">我是左边的小箱子</div>
<div class="right-low-box">我是右边的小箱子</div>
</div>
</body>
</html>
效果如图:
我们应该合理运用,只有这样我们写出来的网页才会更加的干爽整洁。
下一个就是a标签,上面a标签和input的submit一起搭配,<a href=""></a> 输入你要跳转的网址,当点击提交按钮的时候便可以进行跳转。
了解这些也大致算是入了门,如果你想要做网页时还需要其他的标签可以w3cschool中的html,看看里面的元素即可!
see you!!!