【初识HTML】

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

初识HTML

在代码之前需要配置浏览器
首先新建一个Empty Project—>然后在其中添加HTML File文件---->打开文件，点击右上角的浏览器标识，在想用的浏览器path中填上浏览器.exe文件所在地址即可


<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!--注释的快捷键：ctrl+/-->

<!DOCTYPE html>
<html lang="en">
<!--代表网页的头部-->
<head>
    <!--meta：描述性标签，它用来描述我们网站的一些信息。一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keyword" content="java">
    <meta name="discription" content="learning java">
    <!-- title:网页标题   -->
    <title>My First HTML</title>
</head>

<!--body：代表网页主题-->
<body>
Hello World!
</body>
</html>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr/>

<!--段落标签-->
<p>如何让让你遇见我 在我最美丽的时刻</p>
<p>为这我已在佛前求了五百年 求佛让我们结一段尘缘</p>
<p>佛于是把我化成了一棵树 长在你必经的路旁</p>
<p>阳光下慎重的开满了花 朵朵都是我前世的期盼</p>
<hr/>

<!--换行标签-->
如何让让你遇见我 在我最美丽的时刻 <br/>
为这我已在佛前求了五百年 求佛让我们结一段尘缘<br/>
佛于是把我化成了一棵树 长在你必经的路旁<br/>
阳光下慎重的开满了花 朵朵都是我前世的期盼<br/>
<hr/>

<!--粗体、斜体设置-->
粗体：<strong>一颗开花的树</strong>
斜体：<em>一棵开花的树</em>
<hr/>

<!--特殊字符:输入&+字符+；可以进行查询输入-->
空格：空&nbsp;&nbsp;格 <br/>
&gt;  >
&lt;  <
&copy;kim

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址
    相对地址  ../  返回上一级目录 如下所示
    绝对地址   直接在文件夹里复制地址
alt： 图像加载错误时的文字描述
title: 鼠标悬停文字
-->
<img src="../resources/1.jpg" alt="云海" title="云海" width="400" height="480">

</body>
</html>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>

<!--id作为标记-->
<a id="top">top</a>

<!--文本超链接-->
<!--a 标签
href： 必填 表示要跳转到那个界面
target: 表示窗口打开地址
       _blank 新窗口打开
       _self  这个窗口打开
-->
<a href="https://www.baidu.com" target="_blank"></a>

<!--图像连接 点击图像进行跳转-->
<a href="https://www.baidu.com">
    <img src="../resources/1.jpg" alt="云海" title="云海" width="400" height="480">
</a>

<p>
    <a href="https://www.baidu.com">
        <img src="../resources/1.jpg" alt="云海" title="云海" width="400" height="480">
    </a>
</p>

<!--锚链接
1.需要一个标记
2.跳转到标记
-->
<a href="#top"></a>

<!--功能链接
邮箱连接
-->
<a href="mailto:1376740427@qq.com">联系我</a>

<!--在线聊天
QQ推广  在qq推广工具生成代码粘贴-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1376740427&site=qq&menu=yes">
    <img src="http://wpa.qq.com/pa?p=2:1376740427:51" alt="领取小说" title="领取小说"/>
</a>

</body>
</html>