HTML基础知识【学习笔记】01

已于 2024-08-30 16:16:27 修改
阅读量268 收藏 1
点赞数 5
分类专栏： HTML 文章标签： 前端 学习
于 2023-11-04 23:54:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuiini/article/details/134223021
版权

一、HTML 定义

1、HTML 超文本标记语言 ——HyperText Markup Langugage

  • 超文本链接是什么？ 链接
  • 标记是什么？ 标记也叫标签，带尖括号的文本

2、标签语法

开头 需要加粗的文字 结尾
  • 标签成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /

示例：

<strong>文字内容</strong>

效果：
在这里插入图片描述

  • 拓展：

    • 双标签：成对出现的标签

    • 单标签：只有开始标签，没有结束标签

      示例：

      <br>：换行
      <hr>：水平线

      <strong>文字内容</strong>
<hr>

      效果：
      在这里插入图片描述

3、总结

  1. 保存 HTML 标签的文件扩展名是 .html
  2. HTML 标签名要放到 尖括号 <> 里面
  3. 结束标签比开始标签多 /
  4. 标签包裹的内容放在 开始标签和借宿标签之间 在这里插入图片描述

二、HTML 基本骨架

1、HTML 基本骨架是 网页模板

在这里插入图片描述

  • html：整个网页
  • head：网页头部，存放给浏览器看的代码，例如 CSS
  • body：网页主体，存放给用户看的代码，例如 图片、文字
  • title：网页标题

2、VS Code 快速生成骨架

在 HTML 文件（.html）中，！（英文） 配合 Enter / Tab 键

示例：

在这里插入图片描述
效果：
在这里插入图片描述

示例：

<!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>
    给用户看的内容
</body>
</html>

效果：
在这里插入图片描述

3、总结

  1. VS Code 通过 ！（英文）配合 Enter 或 Tab 快速生成骨架
    html ——> 整个网页
    head ——> 网页头部
    title ——> 网页标题
    body ——> 网页主体

三、标签的关系

1、作用

明确标签的书写位置；让代码更整齐

  • 父子关系（嵌套关系）
    在这里插入图片描述

  • 兄弟关系（并列关系）
    在这里插入图片描述

  • *代码格式

    • 父子关系：子集标签换行且缩进（Tab键）
    • 兄弟关系：兄弟关系换行要对齐

2、总结

  1. 标签之间有 2 种关系。分别是 父子关系（嵌套） 和 兄弟关系（并列）
  2. <html><body></body></html> 父子关系
    <head></head><body></body> 兄弟关系
  3. 开发中，不同关系的标签的对齐方式是：
    父子关系：子集标签换行且缩进
    兄弟关系：兄弟关系换行要对齐

四、注释

1、注释

<!--...-->注释标签用来在原文档中插入注释，注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是文字，能看见吗？变成了注释，浏览器不显示 -->
</body>
</html>

效果：
在这里插入图片描述

2、总结

  1. 在 VS Code 中，添加/删除注释的快捷键是 Ctrl + /
  2. 浏览器不显示注释的内容

五、标题标签

一般用在新闻标题、文章标题、王页区域名称、产品名称等等。

1、标签名

h1 ~ h6（双标签）

2、显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

效果：
在这里插入图片描述

3、经验分享

  • h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  • h2 ~ h6 没有使用次数的限制

4、总结

  1. 标题标签一共有6级别。标签名分别是 h1~h6
  2. 在浏览器中，各个标题标签的显示效果的特点有
    文字加粗
    字号逐渐减小
    独占一行
  3. h1标题标签有使用次数的限制

六、段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

1、标签名

p（双标签）

2、显示特点

  • 独占一行
  • 段落之间存在空隙

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>绿色，往往是草木的标配，可在一片不知名的树林中，蓝色的叶子配着同为蓝色的灌木丛，置身其中，尤如梦幻般的的仙境。穿过树林，只见一块空旷的土地上坐落着一所木屋。一塘清池，几莲浮叶，淡淡薄雾，组成“天融山，山融水，水雾交替”的山水画。</p>
    <p>绿色，往往是草木的标配，可在一片不知名的树林中，蓝色的叶子配着同为蓝色的灌木丛，置身其中，尤如梦幻般的的仙境。穿过树林，只见一块空旷的土地上坐落着一所木屋。一塘清池，几莲浮叶，淡淡薄雾，组成“天融山，山融水，水雾交替”的山水画。</p>
</body>
</html>

效果：
在这里插入图片描述

3、总结

  1. 段落标签是 p（双标签）
  2. 在浏览器中，段落标签的显示效果是
    独占一行
    段落之间有间隙

七、换行与水平线标签

1、换行与水平线标签

  • 换行：<br>（单标签）
    浏览器不识别代码中的 Enter 键换行

    示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    第一行内容
    第二行内容
</body>
</html>

    效果：
    在这里插入图片描述

  • 水平线：<br>（单标签）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    第一行内容
    <br>
    <br>
    第二行内容
    <hr>
</body>
</html>

效果：
在这里插入图片描述

2、总结

  1. 代码中敲 Enter 换行，在浏览器中没有换行的效果
  2. 强行换行的标签是 <br> 单标签
  3. 水平线标签是 <hr> 单标签

八、文本格式化标签

1、作用

为文本添加特殊格式，以突出重点。常见的文本格式：粗体、斜体、下划线、删除线等。

标签名效果
strong / b加粗
em / i倾斜
ins / u下划线
del / s删除线

strong、em、ins、del 标签自带强调含义（语义）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>em 倾斜</em>
    <i>i 倾斜</i>
    <ins>ins 下划线</ins>
    <u>u 下划线</u>
    <del>del 删除线</del>
    <s>s 删除线</s>
</body>
</html>

效果：
在这里插入图片描述

2、总结

  1. 两个文本格式化标签是 在一行显示
  2. strong 标签的作用是 加粗
    em 标签的作用是 倾斜

九、图像标签

1、基本使用

作用：在网页中插入图片。

<img src="图片的 URL">
src用于指定图像的位置和名称，是 <img> 的必须属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./白银圭.jpg">
</body>
</html>

效果：
不宜放出😁

总结

  1. 在网页中，嵌入图片的标签是 单标签
  2. 图像标签的必须属性是 src，用来指定图像的位置和名称

以 ./ 开头，VS Code 有提示功能

2、属性

<img src="图片的URL"

属性作用说明
alt替换文本图片无法显示的时候现实的文字
title提示文本鼠标悬停在图片上的时候显示的文字
width图像的宽度值为数字，没有单位
height图像的高度只为数字，没有单位

示例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 以前网速慢，可能导致图片加载不出来，不想影响网页内容的浏览，用alt替换 -->
    <img src="./雷姆12.jpg" alt="这是蕾姆">

    <img src="./白银圭.jpg" title="这是白银圭">

    <!-- 浏览器缩放图片，默认是等比例缩放 -->
    <img src="./雷姆1.jpg" width="100">

    <img src="./白银圭.jpg" height="600">
</body>
</html>

效果：
不宜放出😁

  • 属性名=“属性值”
  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

已更新kuiini的前端学习第二周

kuiini
关注
专栏目录
CGAL 基础知识（学习笔记）
dayuhaitang1的博客
12-30 3654
CGAL 基础知识（学习笔记）
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2220
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础知识学习笔记
qq_57736391的博客
03-13 1369
HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性。
【学习笔记】网络安全基础知识总结
HERODING23的博客
03-06 7594
网络安全基础知识总结前言一、网络安全概述1.1 引言1.2 密码学的发展1.3 密码学基础1.4 对称密码1.4.1 数据加密标准DES二、数论知识2.1 数论基础2.2 有限域2.2.1 群2.2.2 环2.2.3 域2.3 数论入门2.3.1 素数2.3.2 费马定理2.3.3 欧拉定理2.3.4 中国剩余定理三、网络安全进阶3.1 多重加密3.1.1 双重DES3.1.2 三重DES3.1.3 AES3.2 分组密码的工作模式3.2.1 电子密码本模式（ECB）3.2.2 密文分组链接模式（CBC）3
CMake学习笔记01--基础知识
zhouyuming_hbxt的博客
02-10 2506
CMake官网：http://www,cmake.org CMakeLists.txt PROJECT(HELLO) SET(SRC_LIST main.c) MESSAGE(STATUS "This is BINARY dir " ${HELLO_BINARY_DIR}) MESSAGE(STATUS "This is SOURCE dir "${HELLO_SOURCE_DIR}) AD...
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2847
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
移动通信基础知识学习笔记
weixin_30678821的博客
07-10 3510
1. 移动通信的基本特点 移动通信是无线的：通信的信道是空间中电磁波。 移动通信是移动的：用户位置是在变化的，因此要求动态寻址。 2. 模拟通信系统与数字通信系统 模拟通信系统：是指在信道上把模拟信号从信源传送到信宿的一种通信方式。 数字通信系统：数字通信是指在信道上把数字信号从信源传送到信宿的一种通信方式。 3. 移动通信中三大损耗 路径损耗：也称衰耗，指无线电磁波在传输过程中由于传输介质的因素...
HTML常用知识点总结笔记
果冻
07-01 7459
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
HTML基础知识学习
thinking_fioa的博客
01-04 1万+
HTML基础@author 鲁伟林 一直开发后端，现在开始全栈培养自己。 学习html的网址是：http://www.runoob.com/html/html-intro.html gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/html1 HTML简介1.1 最简单的基本结构1. &lt;ht...
JAVA基础学习大全（笔记）
热门推荐
Frank---7的博客
12-22 9万+
JAVASE和JAVAEE的区别 JDK的安装路径 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-perPRPgq-1608641067105)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201222001641906.png)] 卸载和安装JDK [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYnXvbAn-1608641067107)(C:\Users
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
extjs 学习笔记（一） 一些基础知识
10-29
以上知识点涵盖了ExtJS学习笔记中的核心内容，通过这些知识点的学习和实践，开发者能够入门并逐渐深入理解ExtJS框架，并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说，理解这些基础知识...
值得收藏的asp.net基础学习笔记
10-21
学习 ASP.NET 的基础知识，包括 HTTP 协议、服务器控件的使用、HTTP 处理程序的创建以及请求处理过程，对于初学者来说是非常重要的。这不仅有助于提高开发效率，也能更好地理解和解决实际项目中遇到的问题。
Web开发基础学习笔记整理（1）
01-08
Web开发是构建互联网应用程序的基础，涉及多种技术和...学习这些基础知识是成为一名Web开发者的第一步，随着技术的发展，还有诸如React、Vue.js、Angular等前端框架，以及Spring Boot、Django等后端框架等待你去探索。
01-javaweb基础之html基础学习笔记
05-03
html基础知识，比如常用的标签、表格标签、表单标签、freamset框架、ifream内置框架标签
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 320
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 738
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
Gradio 自定义组件
hawk2014bj的博客
09-19 346
Gradio 组件使用起来很方便，前端使用的是 Svelte，和 Vue 很像，入门的门槛也不高。同时，也可以引入其他三方类库，例如 tailwindcss 等等。
【Vue】- 路由及传参
不靠谱先森的博客
09-18 1265
什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件 的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。
Bootstrap3.3.5基础知识学习笔记：HTML/CSS/JS应用详解
"本篇学习笔记详细介绍了Bootstrap基础知识，Bootstrap是一个流行的前端框架，常用于...这篇Bootstrap基础知识学习笔记为开发者提供了快速入门和参考的指南，适合那些希望提升前端开发效率并打造响应式设计的人员。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值