JavaWeb学习——简单学习HTML5（一）

最新推荐文章于 2022-04-21 19:05:11 发布

穆学习

最新推荐文章于 2022-04-21 19:05:11 发布

阅读量426

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_43411550/article/details/92649292

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaWeb学习——简单学习HTML（一）

今天，我们来学习HTML中标签的简单使用。这里给大家推荐两个学习网站:
①w3school:http://www.w3school.com.cn/
②菜鸟教程：https://www.runoob.com/

HTML发布者：万维网联盟（World Wide Web Consortium）

HTML定义：超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。其中的超文本包括：图片、链接，甚至音乐、程序等非文字元素。

HTML语言的特点：
①简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
②平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
③通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML文件后缀名（我们在写好HTML代码后将其后缀名改为.html即可）：.html
在这里插入图片描述

1.HTML的基本结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

在HTML中是以各种各样的标签组成的，其中大多数标签都是成对出现的，但也是有单独的标签的。那么HTML的基本结构都有些什么，我们来看一下。

①DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于标签之前。

<!DOCTYPE html>

②< html > 与 < /html > 标签限定了文档的开始点和结束点

<html>	</html>

③< head > 标签用于定义文档的头部，它是所有头部元素的容器。< head > 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

<head>	</head>

④< meta > 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。< meta > 标签位于文档的头部，不包含任何内容。< meta > 标签的属性定义了与文档相关联的名称/值对。其中这里charset="UTF-8"是< meta >标签的属性，用于指定字符集

<meta charset="UTF-8">

⑤< title >用于定义网页的标题

<title>   这是一个标题  </title>

就和于百度主页的标题一样：
在这里插入图片描述
⑥body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

<body>	</body>

2.网页的基本标签

①标题标签

    <h1>这是一个一级标签</h1>
    <h2>这是一个二级标签</h2>
    <h3>这是一个三级标签</h3>
    <h4>这是一个四级标签</h4>
    <h5>这是一个五级标签</h5>
    <h6>这是一个六级标签</h6>

显示结果：
在这里插入图片描述
②段落标签

<p>红尘来呀来，去呀去</p>
<p>都是一场梦</p>

显示结果：
在这里插入图片描述
③换行标签

红尘来呀来，去呀去 </br>
都是一场梦

显示结果：
在这里插入图片描述
要注意的是换行只是普通的换行，但是段落段落标签是将文本分成几个段落，是不一样的，从文字间的间距也能看出来

④水平线标签

这是一条水平分割线
<hr>
这是水平分割线的下方

显示结果：
在这里插入图片描述
⑤注释
在HTML中注释如下：

<!--这是一个注释-->

注释虽然在页面中看不见，但是当在网页查看源代码时是可以看见注释的
显示结果：
在这里插入图片描述
⑥特殊符号

空格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束 <br>
大于号：&gt; <br>
小于号：&lt; <br>
引号：&quot; <br>
版权符号：&copy;

显示结果:
在这里插入图片描述
⑦加粗和斜体

<strong>这是一行加粗的文字</strong>
<em>这是一行斜体的文字</em>

在这里插入图片描述

3.图片标签

一般情况下，我们会在我们的web项目下创建一个resource目录用来存放资源，比如图片、视频、音频…
在这里插入图片描述

<!--
src:图片路径，这里采用的是相对路径，../代表上级目录
title：鼠标悬停在图片上是显示的信息
alt：当图片没有加载出来时显示的信息
width：宽 
height：高
-->

<img src="../resource/imgs/1.png" title="鼠标悬停显示" alt="html学习导图" width="300px" height="300px">

显示结果：
在这里插入图片描述

4.超链接标签

①普通链接

<!--
href：要跳转的页面
target="_blank" 打开新的页面跳转
target="_self" 在自身页面跳转
-->

<a target="_blank" href="https://www.baidu.com">点击跳转百度</a><br/>

结果显示：
在这里插入图片描述
点击后：

②图片链接
图片链接其实和普通链接道理一样，只是将< a >标签中的文字用图片替换

<a href="https://www.baidu.com"> <img src="../resource/imgs/1.png" width="50px" height="50px"> </a><br/>

在这里插入图片描述
点击图片也可以跳转

③锚链接
锚链接指的是跳转到相应位置，一般在页面内部创建一个标记，然后将链接地址指向该标记，点击就可以跳转到标记位置。一般我们浏览网页时，回到顶部，去底部等这些按钮链接就是锚链接。

<!--创建一个标记
name：给标记起名
-->
<a name="mark">锚链接标记</a><br/>

<!--跳转到标记-->
<a href="#mark">点击跳转到标记处</a>

5.列表标签

①无序列表

<ul>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ul>

显示结果：
在这里插入图片描述
②有序列表

<ol>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ol>

结果显示：
在这里插入图片描述
③自定义列表

<!--
dt表示列表头
dd表示每行列表元素
-->
<dl>
    <dt>Java基础</dt>
    <dd>面向对象</dd>
    <dd>集合</dd>
    <dd>反射</dd>

    <dt>Web基础</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>JS</dd>
</dl>

结果显示：
在这里插入图片描述

6.表格：

<!--
border：边框
tr：行
td：列
-->
<table border=1px>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>

    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

显示结果：
在这里插入图片描述

7.媒体元素

①音频

<!--
src ： 音频路径
controls ：给音频增加控制播放的按钮
autoplay ： 自动播放视频
-->

<audio src="../resource/audio/音频01.mp3" controls autoplay></audio>

结果显示：
在这里插入图片描述
②视频

<!--
src：视频路径
controls：给视频添加控制按钮
autoplay：自动播放
width：宽
height：高
-->

<video src="../resource/video/视频01.mp4" controls width="640px" height="370px" autoplay></video>

结果显示：
在这里插入图片描述

8.内联框架iframe

我们想要在一个网页中嵌套一个网页时，就可以使用内联框架iframe

<!--定义一个链接，目标设置为内联框架baidu，链接地址设置为https://www.baidu.com-->
<a href="https://www.baidu.com" target="baidu">点我打开百度页面</a>

<!--
name：内联框架的标记，名称
frameborder：边框
width：宽
height：高
-->
<iframe name="baidu" src="" frameborder="1px" width="640px" height="370px"></iframe>

结果显示：
在这里插入图片描述
点击后：