HTML基础

努力变厉害的小超超

于 2024-09-18 21:54:34 发布

阅读量428

点赞数 15

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_63946637/article/details/142344642

版权

一、HTML介绍

1.HTML概述

HTML：Hyper Text Markup Language（超文本标记语言）

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2.HTML的发展史

1993.6
1995-11  HTML2.0
1996-1   HTML3.2
1997-12  HTML4.0
2000-1   XHTML1.0 (XML)
2001-5   XHTML1.1
2013-5   XHTML5

3.HTML5的优势

世界知名浏览器厂商对HTML5的支持非常好
跨平台

4.W3C标准

官网：

https://www.w3.org/
https://www.chinaw3c.org/

W3C：World Wide Web Consortium(万维网联盟)

W3C标准包括：

结构化标准语言（HTML、XHTML。也就是标记）
表现标准语言（CSS）
行为标准（DOM ECMAScript）

5.网页编辑工具

记事本
DreamWeaver
WebStorm
HBuider （uniapp）
VSCode(推荐)

二、VSCode的安装

官网（镜像）：https://vscode.github.net.cn

三、HTML基本结构

1.基本结构

<html>
    <head>
        <title>网页的标题</title>
    </head>   
    <body>
        网页的内容
    </body>
</html>

在这里插入图片描述

2.标签

2.1标题标签

<h1>
    
</h1>

在这里插入图片描述

特点：

1.数字越小，字号越大

2.所有文字都被加粗

3.h标签独占一整行

2.2.段落标签

<p>
    
</p>

在这里插入图片描述

特点：

1.段落之间的间距比较大

2.段落占据一整行才会换行

2.3换行标签(单标签)

<br/>

在这里插入图片描述

2.4水平线标签

<hr/>
就是一条线

2.5字体样式标签

在这里插入图片描述

加粗

斜体

推荐使用 和 

2.6注释和特殊符号

特殊符号	字符实体	示例
空格	` `	`空&bbsp；害了`
大于号>	`>`
小于号<	`<`
引号”	`"`	不是必须的
版本符号@	`©`

在这里插入图片描述

2.7图像标签

<!-- 语法 -->

<img src="图像的地址"  alt="图像的替代文字"  width="宽度" height="高度"  title="鼠标悬停提示文字" />


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <!-- 
        src:图像的地址，可以是相对路径(参照物是html页面本身)，也可以是绝对路径（在windows中，绝对路径就是带盘符的路径）
        alt：图片显示异常的时候的提示文字信息
        title:鼠标悬停在图片上的时候的提示文字信息
        width:宽，hegiht：高
        宽高很多时候我们不会去指定，不指定就会显示图片原始宽高，如果要设置宽高一般也只设置一个，因为设置一会会自动等比例缩放图片    
    -->
    <img src="images/mx.jpg" alt="您的网络有问题" title="这是梅西" width="150"  />
</body>
</html>

我们可以只写src属性

2.8链接标签

2.8.1超链接标签

<!-- 语法 -->
<a href="链接路径" target="目标窗口的位置，默认值_self,常见的还有_blank">超链接文本或图片</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <!-- 
    href:超链接地址
    target:打开的目标，如果省略不写默认值为"_self"
        "_blank":在一个新的空白页面中打开
    -->
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    <a href="http://www.baidu.com"><img src="images/baidulogo.png" width="30" height="30"/></a>
</body>
</html>

2.8.2锚链接标签

<!-- 
语法：
1.创建跳转标记
<a name="标记名">位置2</a>
2.创建链接
<a href="#标记名">位置1</a>
-->

同一页面内的锚链接跳转

<p>
   <a href="#two">第二章</a>    
</p>


<p>
   <a name="two">第二章</a>
</p>

不同页面锚链接跳转

页面一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14锚链接页面间跳转</title>
</head>
<body>
    <!-- 同一个文件夹中的页面之间的跳转 -->
    <a href="13.锚链接.html" target="_blank">页面间跳转</a>
    <p>
        <a href="13.锚链接.html#one">第一章</a>
    </p>
    <p>
        <a href="13.锚链接.html#two">第二 章</a>
    </p>
    <p>
        第三章
    </p>
</body>
</html>

页面二

 <p>
        <a name="one"></a>
</p>

2.8.3功能性链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15功能性链接</title>
</head>
<body>
    <a href="mailto:123456@qq.com">联系我们</a>
</body>
</html>