【前端学习笔记 HTML】HTML学习(基础标签)

已于 2022-11-05 16:52:46 修改
阅读量441 收藏
点赞数
文章标签： html 前端 学习
于 2022-11-05 16:09:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44243770/article/details/127625558
版权

学习的是黑马前端课程

目录

排版标签

标题标签

	<h1>1号标签</h1>
    <h2>2号标签</h2>
    <h3>3号标签</h3>
    <h4>4号标签</h4>
    <h5>5号标签</h5>
    <h6>6号标签</h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1号标签</h1>
    <h2>2号标签</h2>
    <h3>3号标签</h3>
    <h4>4号标签</h4>
    <h5>5号标签</h5>
    <h6>6号标签</h6>
</body>
</html>

在浏览器中查看结果如下
在这里插入图片描述

段落标签

<p> <\p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话</p>
    <p>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一</p>
</body>
</html>

浏览器查看如下
在这里插入图片描述

换行标签

<br> <!-- 强制换行 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话</p>
    <p>这里有一段话这里有一段话这里有一段话。<br>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一</p>
</body>
</html>

浏览器查看如下
在这里插入图片描述

水平线标签

<hr><!-- 分割不同主题内容的水平线 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>headline</h1>
    <hr>
    <p>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话</p>
    <p>这里有一段话这里有一段话这里有一段话。<br>这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一段话这里有一</p>
</body>
</html>

浏览器查看如下
在这里插入图片描述

文本格式化标签

文本格式化标签的介绍

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

浏览器查看如下

在这里插入图片描述

strong, ins, em,del的语义较b. u, i, s更为强烈。
也就是，如果这个内容你觉得重要，就放到前4个里面(strong等)。

媒体标签

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/cat.gif" alt="这里是一张猫图" title="可爱猫猫" height="500" width="800">
</body>
</html>
src属性

图片路径。
正常显示如下
在这里插入图片描述

alt属性

替换文本。
当前图片无法显示时会出现的文字
在这里插入图片描述

title属性

提示文本。
当鼠标悬停的时候会出现的文本。
在这里插入图片描述

height和width属性

图片的高度和宽度(数字表示)
在这里插入图片描述

路径
绝对路径

目录下的绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\15025\Desktop\前端\HTML\day01\images\cat.gif" alt="">
</body>
</html>
相对路径
图片与html文件处于同级或下级

从当前文件出发的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 图片与该HTML文件处于同级 -->
    <img src="./cat.gif" alt="">
    <img src="dog.gif" alt="">
    <!-- 图片位于该HTML文件下级 -->
    <img src="./images/cat.gif" alt="">
    <img src="images/dog.gif" alt="">
    <!-- 图片位于该HTML文件上级 -->
    <img src="../cat.gif" alt="">
</body>
</html>

音频标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="./images/music.mp3" controls autoplay loop></audio>
</body>
</html>

浏览器显示如下

在这里插入图片描述

视频标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 谷歌浏览器可以自动播放，但必须是静音播放，使用muted标签 -->
    <video src="./images/video.mp4" controls autoplay loop muted></video>
</body>
</html>

浏览器显示如下
在这里插入图片描述

链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://cn.bing.com/">跳转至必应</a>
    <br>
    <a href="./01-标题标签.html">跳转至01-标题标签</a>
    <br>
    <!-- 网站开发初期，不知道具体要跳转的地址时，用#即可，称为空链接 -->
    <a href="#">这是一个空链接</a>
    <br>
    <a href="https://cn.bing.com/" target="_blank">跳转至必应并且保留原网页</a>
</body>
</html>

浏览器显示如下
在这里插入图片描述

target属性

在这里插入图片描述

快捷键和VScode基本操作

Ctrl+d

选中要修改的某个字符，按下快捷键后会再选中之后相同的字符

图片不太清楚但是可以看到3个3都被选中了

自动换行

有些段落文字很长，全放在一行很不方便，在最上方点查看(view)，里面有自动换行选项(Word Wrap)，点击即可

World_2
关注
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2521
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
【web基础】html常用标签+作品展示
qq_48584557的博客
04-28 4254
小亭子正在努力的学习编程，接下来将开启javaEE的学习~~分享的文章都是学习的笔记和感悟，如有不妥之处希望大佬们批评指正~~说明：此部分是java web基础知识，学的不深，仅为了后期独立实现项目时能够自己写前端页面。目录前言标签也有层次关系HTML 常见标签注释标签标题标签段落标签换行标签格式化标签图片标签：img代码示例超链接标签 a表格标签合并单元格列表标签表单标签input 标签1.文本框2.密码框3.单选框4.复选框5.普通按钮6.提交按钮7.清空按钮8.选择文件lable标签。
前端基础学习笔记（HTML篇）
2301_76779875的博客
03-29 1169
前端HTML基础入门学习笔记
前端基础学习笔记
sober30的博客
07-27 4511
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
前端html学习笔记
a_big_panda的博客
01-12 1453
dl：表示自定义列表的整体，用于包裹dt/dd标签dt：表示自定义列表的主题dd：表示自定义列表的针对主题的每一项内容例如：dd前会默认显示缩进效果dl标签中只允许包含dt/dd标签dt/dd标签可以包含任意内容。
前端HTML5学习笔记（一）
m0_46317766的博客
08-22 1638
计算机计算机计算机-- 无序列表 默认disc小圆点，circle圆，square方块-->计算机计算机计算机列表头列表项列表项列表项
前端学习笔记（一）：HTML+CSS基础
憬淮的博客
11-16 2365
前端笔记01，web端html+css基础
前端学习笔记—HTML5
roydon
07-06 2096
HTML5
前端学习笔记（HTML篇）
m0_59388647的博客
04-09 7479
1 . 软件的分类2 . 客户端和服务器通常情况下，现在的软件一般由两个部分组成：（1）客户端：用户通过客户端来使用软件（2）服务器：服务器负责在远程处理业务逻辑3 . 服务器开发语言4 . 客户端的形式（1） 文字客户端古老的方式，通过命令行来使用软件（2）图形化界面windows、macOS、Androud、IOS中大部分使用（C/S架构）（3）通过访问网页来使用。
前端三剑客入门学习笔记之HTML
qq_62637200的博客
10-07 1230
前端三剑客即指HTML、CSS、JavaScript。它们之间搭配使用可以得到多种效果。HTML：决定网页结构和内容，相当于人的身体。CSS：决定网页呈现给用户的模样，相当于给人穿衣服、化妆。JS：实现业务逻辑和页面控制（决定功能），实现人机交互，相当于人的各种动作。
【前端学习笔记day09】2.5. html图像标签、绝对路径和相对路径
01-08
html图像标签、绝对路径和相对路径html图像标签、绝对路径和相对路径html图像标签绝对路径和相对路径 2.5. html图像标签、绝对路径和相对路径 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的...
超详细的web前端基础学习笔记
06-28
本学习笔记涵盖了 web 前端开发的基础知识，包括 HTML 的基本结构、文档类型声明、常见的文本和列表标签、分区标签以及图片标签的使用方法。对于初学者而言，这些内容是构建网页的基础，而掌握这些基础知识是进一步...
《Html》前端学习笔记
04-12
HTML，全称HyperText Markup Language，即超文本标记语言，是构建网页内容的基础。它是一种标记语言，通过一系列预定义的标签来描述网页的结构和内容。...不断学习和实践，才能成为一名熟练的前端开发者。
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
HTML单页面实现量子纠缠效果
weixin_52236586的博客
11-06 461
【代码】单页面量子纠缠效果。
初识HTML
chestnut_orenge的博客
11-05 1048
什么是HTML呢？HTML是超文本标记语言，HTML代码是由“标签”构成的超文本：文本、声音、图片、视频、表格、链接标记：由许许多多的标签组成HTML页面是运行到浏览器上面的。
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 902
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 720
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
W3C HTML 活动
最新发布
wjs2024的博客
11-08 397
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值