HTML基础框架

最新推荐文章于 2024-06-06 23:10:38 发布

Sunny Plane

最新推荐文章于 2024-06-06 23:10:38 发布

阅读量3.1k

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/Black_Ball/article/details/119476852

版权

HTML显示文本

HTML的使用很简单，无需安装，只要用文本文档编辑器就可以编写。现在，我们来了解一下如何让HTML文件在网页中显示文本。很简单，只要使用h或h1~6标签就可以了。具体如下图所示：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <h>Hi</h>
    <h1>Hi</h1>
    <h2>Hi</h2>
    <h3>Hi</h3>
    <h4>Hi</h4>
    <h5>Hi</h5>
    <h6>Hi</h6>
</body>
</html>

在浏览器中，可以从小到大显示出七种大小的“Hi”。

HTML显示图片

你肯定着急了：网页难道只能傻乎乎地显示文字吗？能不能显示一些别的东西？别急，我们一起来看看，如何让网页显示图片。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <img src="my_image.png" />
</body>
</html>

此处我们用到了<img src="xxx">，这个标签的意思是加载图片。

HTML播放音乐

我们现在已经可以使用HTML做出一个顶不错的网页了。你可能会想：如果网页里还有声音就好了。这个时候我们就要用到<audio>标签了：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <audio controls="controls">
        <source src="my_audio.mp3">
    </audio>
</body>
</html>

蛮有趣的，不是吗？我们使用的是audio的手动播放属性，也可以使用自动播放属性，但需要使用Javascript，现在暂不展示。

HTML布局

网页编好了，可却乱糟糟，让人觉得不舒服？如果你有这样的烦恼，那就一起来学学CSS吧。

新建一个文本文档，输入以下代码，设置一个上下结构的布局：

<!DOCTYPE html>

<html lang="en">
<head>
	<style>
	    * {
	    	box-sizing: border-box; 
	    }
	
    	.top {
	        height: 500px; 
	        background-color: #ff0000; 
	    }

    	.bottom {
	        height: 500px; 
	        background-color: #0000ff; 
    	}
    </style>
</head>
<body>
	<div class = "top"></div>
	<div class = "bottom"></div>
</body>
</html>

找一找，哪儿是CSS代码呢？很简单，包在<style>标签里的就是CSS代码。你还可以把他们单独整出来，不过需要使用<link>标签，可以自己用百度搜。

我们也可以制作一个左右结构的布局：

<!DOCTYPE html>

<html lang="en">
<head>
	<style>
	    * {
	    	box-sizing: border-box; 
	    }

    	.left {
	        height: 1000px; 
    	    background-color: #ff0000; 
            width: 50%; 
            float: left; 
    	}

    	.right {
    	    height: 1000px; 
    	    background-color: #0000ff; 
            width: 50%; 
            float: right; 
    	}
    </style>
</head>
<body>
	<div class = "left"></div>
	<div class = "right"></div>
</body>
</html>

还可以制作一个稍复杂的布局：


<!DOCTYPE html>

<html lang="en">
<head>
	<style>
		* {
			box-sizing: border-box; 
		}

		.top {
			height: 500px;
			background-color: #ff0000;
			}

		.left {
			height: 500px; 
			background-color: #ffff00; 
			width: 50%; 
			float: left; 
		}

		.right {
			height: 500px; 
			background-color: #0000ff; 
			width: 50%; 
			float: right; 
		}
	</style>
</head>
<body>
	<div class = "top"></div>
	<div class = "left"></div>
	<div class = "right"></div>
</body>
</html>

好了，今天的课程就到这里，觉得有帮助的不要忘了点个赞哦~~~