初识HTML5

最新推荐文章于 2021-11-02 21:40:14 发布

刘小航9527

最新推荐文章于 2021-11-02 21:40:14 发布

阅读量3.3k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/qq_40594554/article/details/84348387

版权

HTML5 专栏收录该内容

7 篇文章

订阅专栏

从今天开始了解HTML5，并且进入实战项目。

首先关于编译器和一些环境我在这里就不介绍了。

当我们打开编译器时（我这里选择的pycharm），选择网页时，会直接出现：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是标题</title>
</head>
<body>

</body>
</html>

网页分为头和身体，

<head>
    <meta charset="UTF-8">
    <title>这里是标题</title>
</head>

这里为头，我们在 <title>这里是标题</title>使用的<title>是我们网页的名字，运行如下：

在这里插入图片描述

如上，即可看成一个网页了，下面我们介绍相关标签：

我们需要在网页上呈现的内容需要在<body></body>里写：
下面我将一些常用的标签使用分享出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础</title>
    <style></style>
</head>
<body>
    写出我们的第一句话
    哈哈哈
    <h1 align="center" > <a href="http://www.jikexueyuan.com" target="_blank">标题</a></h1>
    <h2 class="h2">标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <p>湖北师范大学</p>
    <p>hello</p>
    哈哈哈<br/>
    hahahha<br/>
    <a href="http://www.baidu.com">百度</a>
    <img src="1.j">
</body>
</html>

上述代码运行如下
在这里插入图片描述

上述我们涉及到了:

<h1 align="center" > <a href="http://www.jikexueyuan.com" target="_blank">标题</a></h1>
    <h2 class="h2">标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <p>湖北师范大学</p>
    <p>hello</p>
    哈哈哈<br/>
    hahahha<br/>
    <a href="http://www.baidu.com">百度</a>
    <img src="1.j">
</body>

<h1></h1>   <h2></h2>   <h3></h3>    <h4></h4>   <br/>  <a></a>  <img src="  ">  <p>

上述标签，都是成双成对出现，会有一个来结尾，下面详细介绍相关标签的用法：

<br/>:换行

例如上述代码，我输入：写出我们的第一句话，然后换行写：哈哈哈，但是输出为：写出我们的第一句话哈哈哈，当我们添加如下代码时：

  哈哈哈<br/>
    hahahha<br/>

再次输出时：我们可以看出，输出结果换行输出了，可以自己尝试。

<h1></h1>

上述标签为：标题标签，h1 h2 …等等，可以有很多个标题，但是我们的标题大小会慢慢变小，从上述结果中可以看出。

<p></p>

p标签可以看作是网页内容相关的正文，我们可以写我们所需要放上去的信息

<a></a>

a标签为网页链接标签，常使用如下格式：<a href="http://www.baidu.com" target="_blank">百度</a>
点击内容即可跳转到百度。target="_blank"是指重新打开一个页面，target有三个用法，后面会一一了解

<img src="  ">

上述为导入图片，将自己的图片导入编译器，将图片名字写入即可显示，效果就不显示了，需要自行操作。

上面为HTML5的一些基本规则。