HTML光速了解!!!

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!!!

发布了60 篇原创文章 · 获赞 39 · 访问量 3785

猜你喜欢

转载自blog.csdn.net/qq_42992704/article/details/103812361