自学内容网 自学内容网
自学内容网 > 正文

html学习笔记（1）

🕗 发布于 2025-01-21 20:16 学习  笔记  

一、什么是HTML 

HTML是HyperText Markup Language的缩写，即超文本标记语言，是一种用于创建网页的标准标记语言。以下是关于HTML的详细介绍：

基本概念

  • 超文本：HTML中的“超文本”指的是网页中可以包含链接，这些链接能够将用户从一个页面导航到另一个页面，甚至可以链接到其他网站或资源。
  • 标记语言：HTML使用标记标签来描述网页的内容和结构。这些标签被尖括号包围，例如<html>、<head>、<body>等。标记标签告诉浏览器如何显示网页中的文本、图片、视频等内容。

历史发展

  • HTML最初由蒂姆·伯纳斯-李在1989年发明，目的是为了在互联网上共享和展示文档。
  • 自发明以来，HTML经历了多个版本的发展，包括HTML 1.0、HTML 2.0、HTML 3.2、HTML 4.01和HTML5等。每个新版本都引入了新的功能和改进，以适应不断发展的互联网需求。

主要功能

  • 定义网页结构：HTML通过各种标签和元素来定义网页的结构，如标题、段落、列表、表格等。
  • 插入多媒体内容：HTML支持在网页中插入图片、音频、视频等多媒体元素，使网页内容更加丰富。
  • 创建超链接：HTML可以创建超链接，使用户能够在不同的网页或资源之间进行导航。
  • 支持交互性：HTML与JavaScript等脚本语言结合，可以创建具有交互性的网页，如表单提交、菜单弹出等。

基本结构

  • 一个基本的HTML文档通常包含以下几个部分：
  • DOCTYPE声明：用于告诉浏览器使用的HTML版本。
  • html标签：HTML文档的根标签，包含整个网页的内容。
  • head标签：包含网页的元数据，如标题、样式表、脚本等。
  • body标签：包含网页的可见内容，如文本、图片、视频等。

应用领域

  • HTML是创建网页和Web应用程序的基础，广泛应用于互联网行业。
  • 它也是学习其他Web开发技术，如CSS和JavaScript的基础。

二、html固定的基本结构

html有固定的基本结构如下：

<html>
 <head>
 <title>HTML 快速入门</title>
 </head>
 <body>
 <h1>Hello HTML</h1>
 <img src="1.jpg"/>
 </body>
</html>
其中 <html> 是根标签， <head> 和 <body> 是子标签， <head> 中的字标签 <title> 是用来定义网页的标
题的，里面定义的内容会显示在浏览器网页的标题位置。
而 <body> 中编写的内容，就网页中显示的核心内容。
输入html:5点击enter自动生成html基本结构

结果如下：

HTML 中的标签特点：
HTML 标签不区分大小写
HTML 标签的属性值，采用单引号、双引号都可以
HTML 语法相对比较松散

三、标签

1.图片img

在HTML中，<img>是一个非常重要的标签。

1.1 基本定义

  • <img>是单标签（自闭合标签），用于在HTML页面中嵌入图像。它不需要像其他一些标签那样有对应的闭合标签（例如<p>标签有开始<p>和结束</p>标签，而<img>没有）。

1.2 常用属性

  1. src属性
    • 这是<img>标签最重要的属性。它指定了要显示图像的源文件路径。例如：<img src = "image.jpg">，这里的“image.jpg”是图像文件的名称，可以是相对路径（相对于HTML文件所在的文件夹），也可以是绝对路径（完整的网络地址或者文件系统中的绝对位置）。
  2. alt属性
    • 这个属性提供了图像的替代文本。当图像无法显示时（例如由于网络问题、图像文件丢失或者用户使用屏幕阅读器等辅助技术时），浏览器会显示alt属性中的文本。例如：<img src = "image.jpg" alt = "这是一张美丽的风景图">。
  3. width和height属性
    • 用于指定图像的宽度和高度。可以使用像素值来设置，例如：<img src = "image.jpg" width = "300" height = "200">。如果只设置其中一个属性，图像会按照原始的宽高比例进行缩放。但是现在通常推荐使用CSS来控制图像的大小，以实现更好的布局和响应式设计。

1.3 在HTML中的应用场景

  • 在构建网页内容时，<img>标签被广泛用于显示各种类型的图像，如产品图片、用户头像、宣传海报、网页背景图等。例如，在一个电子商务网站上，产品详情页面会使用<img>标签来展示产品的外观图片，以吸引用户购买。

2.标题h1~h6

2.1 h1标签

  • 重要性：h1标签定义的是最重要的标题，通常用于表示页面的主标题或文章的标题。
  • 使用限制：一个页面通常只使用一个h1标签，以确保页面的主题明确。
  • 搜索引擎优化：h1标签中的关键词对搜索引擎优化（SEO）非常重要，因为搜索引擎会给予h1标签中的内容较高的权重。

2.2 h2标签

  • 重要性：h2标签定义的是次重要的标题，通常用于表示段落的标题或副标题。
  • 使用限制：h2标签可以在一个页面中使用多次，但要注意合理使用，避免过度使用导致页面结构混乱。
  • 搜索引擎优化：h2标签中的关键词也对SEO有一定的影响，但权重低于h1标签。

2.3 h3标签

  • 重要性：h3标签定义的是更次一级的标题，通常用于表示段落中的小节标题。
  • 使用限制：h3标签可以在一个页面中使用多次，但要注意层次结构的清晰。
  • 搜索引擎优化：h3标签中的关键词对SEO的影响相对较小，但仍然有助于搜索引擎理解页面的内容结构。

2.4 h4标签

  • 重要性：h4标签定义的是更次一级的标题，通常用于表示段落中的更小的标题。
  • 使用限制：h4标签可以在一个页面中使用多次，但要注意层次结构的清晰。
  • 搜索引擎优化：h4标签中的关键词对SEO的影响相对较小。

2.5 h5标签

  • 重要性：h5标签定义的是更次一级的标题，通常用于表示段落中的更小的标题。
  • 使用限制：h5标签可以在一个页面中使用多次，但要注意层次结构的清晰。
  • 搜索引擎优化：h5标签中的关键词对SEO的影响相对较小。

3.水平线hr

4.视频

<video src="../MyRecord_20250119214840.mp4" controls="controls" width="60%"></video>

5.音频

<audio src="../MyRecord_20250119214840.mp3" controls="controls"></audio>

6.段落、

<p> </p>

<p>Microsoft KM-TEST Loopback Adapter&nbsp&nbsp
    功能特点：这是一个虚拟网络适配器，用‘’于‘’在Windows系统中模拟本地回环网络。它可以被用于网络分析、测试和开发等场景中，使得用户可以在本地计算机上模拟网络环境，进行各种网络应用的测试和调试。
    应用场景：适用于在Windows系统上进行网络应用的开发和测试，帮助开发人员在本地环境中模拟网络通信，进行功能测试和调试。
    </p>

7.链接

<a href="https://static-recommend-img.tiangong.cn/image/ppt-image/cover/1737123607763/cover_1880258806994616320.png?v=1737177167000&image_process=resize%2Cw_600%2Fformat%2Cwebp" target="_parent">点击链接</a>

重要属性

  • href：指定链接的目标地址，可以是绝对路径、相对路径、锚点、电子邮件地址、电话号码、JavaScript代码等。例如：
    • <a href="https://www.example.com">访问示例网站</a>
    • <a href="mailto:someone@example.com">发送电子邮件</a>
    • <a href="tel:+8613888888888">拨打手机</a>
    • <a href="javascript:alert('Hello World!');">执行JavaScript函数</a>
  • target：规定在何处打开被链接文档，常用值有：
    • _self：在当前窗口或标签页中打开链接（默认）。
    • _blank：在新窗口或新标签页中打开链接。
    • _parent：在父框架中打开链接。
    • _top：在整个窗口中打开链接，取消任何框架。
  • rel：定义当前文档与目标文档之间的关系，常用值有：
    • alternate：表示替代版本，如用于 RSS 订阅链接。
    • nofollow：告诉搜索引擎不要追踪此链接，常用于外部链接。
    • noopener：防止新的浏览上下文（页面）访问 window.opener 属性和 open 方法，提高安全性。
    • noreferrer：不发送 referer 头信息，即不告诉目标网站你从哪里来的。
  • download：提示浏览器下载链接目标而不是导航到该目标。如果指定了文件名，浏览器会提示下载并保存为指定文件名。例如：<a href="file.pdf" download="example.pdf">下载文件</a>

原文地址：https://blog.csdn.net/m0_74370400/article/details/145263174

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025