HTML入门

最新推荐文章于 2021-11-14 22:47:08 发布

绿萝蔓蔓绕枝生

最新推荐文章于 2021-11-14 22:47:08 发布

阅读量314

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_42578036/article/details/109339862

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、HTML概述

1、定义

HTML 是一种超文本标记语言(不是编程语言)，一种描述网页的语言

2、网页基本格式

HTML 编写网页基本格式如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>我的第一个网页</title>
</head>
<body>
Hellow World!
</body>
</html>

<head></head>标签中放网页的基本信息，<body></body>标签中放网页的内容，即显示在网页中的内容

相对路径：从当前位置开始找文件
绝对路径：从根目录开始找文件

3、HTML规范

标签名、属性名小写
标签必须严格嵌套，且必须闭合，即使空元素标签也必须闭合
属性值必须用引号引起来

二、HTML基本标签

1、标题标签`<h1></h1>`

标题标签一个分为6级，标签内字体从1到6依次减小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

演示效果如下：

在这里插入图片描述

2、段落标签`<p></p>`

段落标签用于标明段落文字等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
窗前明月光，
疑是地上霜。
<p>举头望明月，</p>
<p>低头是故乡。</p>
</body>
</html>

演示效果如下：

在这里插入图片描述

3、换行标签`<br>`

用于问本换行，单标签，需要使用/结束标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行段落标签</title>
</head>
<body>
窗前明月光，<br>
疑是地上霜。
<p>举头望明月，</p>
<p>低头是故乡。</p>
</body>
</html>

演示效果如下：

在这里插入图片描述

4、水平线标签`<hr>`

在页面中划一条水平线

5、斜体标签`<em></em>`

使斜体标签中的内容倾斜

6、加粗标签`<strong></strong>`

使标签中的内容变粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行段落标签</title>
</head>
<body>
<strong>静夜思</strong><br>
<em>作者：李白</em>
<hr/>
窗前明月光，<br/>
疑是地上霜。
<p>举头望明月，</p>
<p>低头是故乡。</p>
</body>
</html>

演示效果如下：

在这里插入图片描述

7、注释标签``

注释标签用于注释HTML中的代码，不在网页中显示
语法如下：

<!-- 注释内容 -->

8、图片标签`<img src...>`

图片标签用于在网页中显示图片；
语法如下：

<img src="图片路径" alt="替换文本" width="x" height="y"/>

src：图片路径
alt：图片未成功加载显示的文本
width：图片宽度
height：图片高度

9、超链接标签`<a></a>`

超链接标签用于页面跳转
页面跳转又分为三种，分别是：网页间跳转、锚链接、功能性连接
（1）网页间跳转

target 取值有：_self---->自身窗口，_blank---->新建窗口

<a href="连接地址" target="目标窗口位置">文本或图像</a>

（2）锚链接

在网页中快速定位目标位置，即网页内跳转

<a href="#xxx">文本或图片</a>
<a name="xxx">目标文本或图片</a>

（3）功能性连接

触发功能的连接，例如发送邮件

<a href="mailto:xxx@qq.com">发邮件</a>

10、视频标签`<video></video>`

在网页中添加视频文件
视频元素(支持格式：Ogg、MPEG4、WebM)
语法如下：

<video src="视频路径" type="video/mp4" controls></video>

<video controls>
	<source src="视频路径" type="video/mp4"/>
	<source src="视频路径" type="video/webm"/>
	<source src="视频路径" type="video/ogg"/>
</video>

属性：

controls：视频播放按钮
autoplay：自动播放
width：宽度
height：高度

11、音频标签`<audio></audio>`

在网页中添加音频文件
音频元素(支持格式：ogg、map3、wav)
语法如下：

<audio src="音频路径" controls></audio>

<audio controls>
	<source src="视频路径" type="video/mp3"/>
	<source src="视频路径" type="video/wav"/>
	<source src="视频路径" type="video/ogg"/>
</audio>