HTML学习笔记（随缘更新ing）_html更新笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/lee_maple/article/details/123061604

本文介绍了HTML的基本概念，包括超文本标记语言的发展历程、主要优势以及W3C组织。详细讲解了HTML的基本结构，如头部和主体标签，以及常用的HTML标签，如标题、段落、图像和链接。此外，还探讨了块元素和行内元素的区别。通过实例展示了如何创建和使用这些元素，为初学者提供了全面的HTML入门指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识HTML

HTML

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

其中超文本包括但不限于文字，图片，音频，视频，动画

发展史

起源于1993-6，直到2013-5-6才有了HTML5，自此形成了HTML+CSS3的前端设计组合

优势

拥有多个世界知名厂商的支持，如微软，Google，苹果等

人们认为它是一个未来发展趋势

跨平台方便

w 3c

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

标准包括：

结构化标准语言（HTML,XML）

表现标准语言（CSS）

行为标准（DOM,ECMAScript）

网页基本标签

基本结构

<html>
<head>
    <title>网页名称</title>
</head>
<body>
    网页内容
</body>
</html>

主体部分为头部和主体，

其中像这样成对出现的标签分别称作开放标签和闭合标签*

而像这样的称为自闭合标签

网页基本信息

<!-- 此处为注释写法 -->
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<!-- html的总标签，任何内容都在总标签内输入 -->
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta标签为描述性标签，用来描述网站信息 -->
<!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="博客">
    <meta name="description" content="个人博客">
<!-- title标签代表网页标题 -->
    <title>Blog</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>

<!--段落标签-->
<p>都 是勇敢的</p>
<p>你额头的伤口 你的 不同 你犯的错</p>


<!--换行标签-->
都 是勇敢的<br/>
你额头的伤口 你的 不同 你犯的错<br/>


<!--水平线标签-->
<hr/>

<!--粗体，斜体-->
原始样式：I love You<br/>
粗体：<strong>I love You</strong><br/>
斜体：<em>I love You</em>
<br/>
<!--特殊符号-->
空格：空     格<br/>
转义空格：空&nbsp&nbsp&nbsp&nbsp&nbsp格

</body>
</html>

图像标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUd9Rmfb-1645494569584)(C:\Users\Maple\AppData\Roaming\Typora\typora-user-images\image-20220124142659703.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址
    绝对路径或相对路径
alt：图片名称
-->

<!--图像标签-->
<img src="../resources/1.png" alt="代码块" title="悬停文字">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a name="top">
    
<!-- a标签
href:必填。表示要跳转到哪个页面
target:表示窗口大楷位置
    _blank:在新的空白窗口打开
    _self:在本窗口跳转至目标网页
-->
<a href="Test.html">点击跳转到页面</a>
<a href="https://www.baidu.com">点击跳转到baidu</a>
    
<br>
    
<a href="Test.html">
    <img src="../resources/1.png" alt="头像" title="悬停文字">
</a>
    
    
<!--
锚链接
1.需要一个锚标记（上方已标注）
2.跳转位置为锚标记位置
-->
<a href="#top">回到锚标签位置</a>

    
    
<!--
功能性链接：
邮件链接
-->

<a href="mailto:邮箱地址">点击给该地址发邮件</a>
    

</body>
</html>