HTML学习笔记（代码+效果展示）

于 2025-03-21 01:05:10 发布
阅读量1.2k 收藏 23
点赞数 26
分类专栏： HTML+CSS——网页制作 文章标签： html 学习 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_88591507/article/details/146406060
版权

【1】段落标签<p></p>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>段落标签</title>
    
</head>
<body>
    <h2 align = "center">《破阵子.为陈同赋壮词以寄之》</h2>
	<p align = "center">宋代：辛弃疾</p>
	<p>醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声</p>
</body>
</html>

效果展示 

 【2】水平线标签<hr>

语法格式：<hr 属性 = “属性值”/> 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>水平线标签</title>
    
</head>
<body>
    <h2 align = "left">《莫生气》</h2>
	<hr color = "#00CC99" align = "left" size="5" width="600">
<!-- 四个常用属性-->
	<p>人生就像一场戏，因为有缘才相遇。相扶到老不容易，是否更该去珍惜。为了小事发脾气，回头想想又何必
	别人生气我不气，气出病来无人替。我若气死谁如意，况且伤神又费力。</p>
	<hr color="#00CC99"/>
</body>
</html>

效果展示 

 【3】换行标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>换行标签</title>
    
</head>
<body>
   <p>使用HTML5制作网页时通过换行标签<br />可以实现换行效果</p>
   <p>如果像在Word中一样
   按“Enter”键，就无法换行</p>
</body>
</html>

效果展示

【4】文本格式化标签

文本加粗： <b></b>和<strong></strong>
加下划线：<u></u>和<ins></ins>
斜体显示：<i></i>和<em></em>
加删除线：<s></s>和<del></del>
前面的为物理标签，后面的为逻辑标签，推荐使用逻辑标签

逻辑标签和物理标签的区别 ：物理标签与逻辑标签的区别-CSDN博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本格式化标签</title>
    
</head>
<body>
   <p>文本正常显示</p>
   <p><b>文本加粗显示</b></p>
   <p><strong>文本加粗显示，强调语义</strong></p>
   <p><u>文本添加下划线显示</u></p>
   <p><ins>文本添加下滑线显示，强调语义</ins></p>
   <p><i>文本斜体显示</i></p>
   <p><em>文本斜体显示，强调语义</em></p>
   <p><s>文本添加下划线显示</s></p>
   <p><del>文本添加下划线显示，强调语义</del></p>
   
</body>
</html>

效果展示 

【5】cite标签

 <cite></cite>标签是逻辑标签，其中的文本是对某个参考文献的引用，以斜体的样式显示在页面中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本格式化标签</title>
    
</head>
<body>
   
   <cite>人生就像一场戏，因为有缘才相遇。相扶到老不容易，是否更该去珍惜。为了小事发脾气，回头想想又何必
	<br />别人生气我不气，气出病来无人替。我若气死谁如意，况且伤神又费力。</cite>
</body>
</html>

效果展示 

【6】<time></time>标签

<time></time>标签是逻辑标签，用于标注时间（24小时制）或日期，被标记的日期不会在页面中呈现任何特殊效果，但能以机器可读的方式进行编码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本格式化标签</title>
    
</head>
<body>
   <p>我们早上<time>9:00</time>开始上班</p>
   <p>今年<time datetime="2022-10-01">十月一日</time>是祖国的母亲</p>
   <!--datetime 属性的值（其值必须为一个有效的时间或日期，否则不会被机器解读）由机器解读，不会显示在页面中-->
   <time datetime="2022-08-15" pubdate="pubdate">
	   本消息发布于2022年8月15日
   </time>
   <!--pubdate用于设置文档的发布日期或时间，取值为pubdate，可以省略-->
</body>
</html>

效果展示

【7】mark标签

<mark></mark>标签是逻辑标签，用于高亮显示文本，以引起阅读者的注意

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本格式化标签</title>
    
</head>
<body>
   <p>明月几时有？把酒问青天。不知天上宫阙，今昔是何年。我欲乘风归去，有空琼楼玉宇，<mark>高处不胜寒</mark>。</p>
   <p><mark>人有悲欢离合,月有阴晴圆缺</mark>，此时古难全。<mark>但愿人长久，千里共婵娟</mark>。</p>
</body>
</html>

效果展示

【8】<font></font>标签

<font></font>标签用于设置文字效果，例如字号、字体、文字颜色。常用属性为face(用于设置字体，如微软雅黑、黑体、宋体等),size(用于设置字号，1-7无需添加单位),color(用于设置颜色) 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本样式标签</title>
    
</head>
<body>
   <p>众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>
   <p><font size ="2" color = "blue">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</font></p>
   <p><font size ="5" color = "#f00">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</font></p>
   <p><font face = "宋体" size ="7" color = "#00f">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</font></p>
</body>
</html>

效果展示

【9】图像标签<img/> 

1、alt属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本样式标签</title>
    
</head>
<body>
   <img src="" alt="小红花" />
</body>
</html>

alt用于设置图像不能显示时的替代文本 

效果展示 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本样式标签</title>
    
</head>
<body>
   <img src="img/xh.jpg" alt="小红花" />
</body>
</html>

效果展示 

2、title属性

title用于设置鼠标悬停时显示的图像提示词，和alt类似

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本样式标签</title>
    
</head>
<body>
   <img src="img/xh.jpg" title="小红花"  />
</body>
</html>

3、width属性、height属性和border属性

width属性和height属性用于定义图像的宽度和高度，一只设置其中一个属性，另一个属性会依据已设置的属性而变化

border属性，为图像添加边框，默认情况下图像没有边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>文本样式标签</title>
    
</head>
<body>
   <img src="img/xh.jpg" alt="小红花"  border="2"/>
   <img src="img/xh.jpg" alt="小红花"  width="200"/>
   <img src="img/xh.jpg" alt="小红花"  width="200" height="100"/>
</body>
</html>

 效果展示

4、 vspace属性和hspace属性、align对齐属性

vspace属性和hspace属性分别用于调整图像的垂直边距和水平边距，align对齐属性实现图像与文字环绕的效果(默认情况下图像的底部与文本的第一行文字对齐)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>图像标签</title>
    
</head>
<body>
   <img src="img/xh.jpg" alt="小红花"  border="1" hspace="10" vspace="10" align="left"/>
   人生就像一场戏，因为有缘才相遇。相扶到老不容易，是否更该去珍惜。为了小事发脾气，回头想想又何必
   	别人生气我不气，气出病来无人替。我若气死谁如意，况且伤神又费力。
</body>
</html>

【10】列表标签

1、无序列表

无序列表的语法格式
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        ……
    </ul>


    <ul></ul>标签用于定义无序列表；<li></li>标签嵌套在<ul></ul>标签中，用于描述具体的列表，每个<ul></ul>标签至少包含一个<li></li>标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>无序列表</title>
</head>
<body>
  <ul>
	  <li>默认</li>
	  <li type="disc">实心圆</li>
	  <li type="circle">空心圆</li>
	  <li type="square">实心方块</li>
  </ul>
</body>
</html>

效果展示 

2、有序列表

有序列表的语法格式
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            ……
        </ol>

  <ol></ol>标签用于定义无序列表；<li></li>标签嵌套在<ol></ol>标签中，用于描述具体的列表，每个<ol></ol>标签至少包含一个<li></li>标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>无序列表</title>
</head>
<body>
  <ol>
	  <li>国家</li>
	  <li>民族</li>
	  <li>家庭</li>
	  <li>个人</li>
  </ol>
  <ol start="2" >
  	  <li>国家</li>
  	  <li>民族</li>
  	  <li>家庭</li>
  	  <li>个人</li>
    </ol>
	<ol start="2" reversed>
		  <li>国家</li>
		  <li value="9">民族</li>
		  <li>家庭</li>
		  <li>个人</li>
	</ol>
	<ol type="a">
		  <li>国家</li>
		  <li>民族</li>
		  <li>家庭</li>
		  <li>个人</li>
	</ol>
</body>
</html>

 效果展示

3、定义列表

</head>
<body>
  <dl>
	  <dt>水果</dt>        <!--定义名词-->
	  <dd>水果为人体提供水分、碳水化合物、维生素等。</dd>  <!--解释和描述名词-->
	  <dd>大部分水果中的脂肪含量较低，适合减重人群。</dd>
	  <dd>水果中还含有大量有益健康的活性物质。</dd>
  </dl>
</body>
</html>

效果展示

4、列表的嵌套
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>无序列表</title>
</head>
<body>
  <ul>
	  <li>咖啡
		  <ol>
			  <li>拿铁</li>     <!--有序列表的嵌套-->
			  <li>摩卡</li>
		  </ol>
	  </li>
	  <li>茶
		<ul>
			<li>碧螺春</li>     <!--无序列表的嵌套-->
			<li>龙井</li>
		</ul>
	  </li>
  </ul>
</body>
</html>

效果展示

 

前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 5002
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
HTML 字体设置代码
weixin_56140427的博客
11-19 6834
<!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>字体.
【尚硅谷HTML&CSS—李立超老师】2-103笔记（已完结）
DGT4720的博客
02-01 1557
HTML简介 纯文本：在纯文本编辑器中编写的内容都是纯文本，网页就是使用纯文本编写的。纯文本只能保存文本内容，其他的图片、音频和视频等格式化的内容不能设置。 head标签帮助浏览器解析网页。 注释 多人合作时，给别人的说明和自己的回忆（开发者源码可见，用户不能见，简单明了） title标签的内容会显示在浏览器标题栏，搜索引擎检索页面时首先检索title标签中的内容，会影响网页在搜索引擎的排名...
Web前端 学习笔记1（Html）
Mu_yongheng的博客
01-14 330
最近想要学习一下Web前端，就从b站上找了下相关课程，找到了 尚硅谷 里面 李立超 老师讲的课程，就跟着学习了一下，最近看了一些HTML和CSS的一些入门的知识，打算用博客的方式记录下来，一方面可以巩固学习的知识，另外还可以做个笔记，等后面用到的时候可以拿来复习复习！ 学习视频链接 接下来，就要开始我的学习之旅了！（请注意听讲，下面的知识非常重要【手动狗头】） 目录基础知识学习1、Html入门2、Html基本框架总结 基础知识学习 1、Html入门 当然，最重要的知识当然是从"Hello World"开始啦
web前端-HTML（2）
weixin_53616401的博客
05-14 930
在上面我们完成了页面的基本排版，但是我们会发现，我们设计出来的页面，都是铺满了整个的页面，但是我们去看原始的页面，我们会发现，他们的页面都是居中显示的，并没有铺满整个浏览器，这时候就需要我们对页面进行布局了。我们日常的上网过程中，基本上每天都会遇到，登录页面这些等，其实这些都是一个表单，我们填写完表单的数据之后，点击提交机会把我们输入的数据提交到服务端。页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。否则，无法提交该表单项。
四、html字体样式，外观属性
热门推荐
helloWorldAndYou的博客
09-06 2万+
字体样式 font-size:字号大小 ont-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少 单位 说明 相对长度单位 em 相对于当前对象内文本的字体尺寸 px 像素（推荐） 绝对长度单位 in 英寸 ...
HTML+CSS+JavaScript教程学习笔记.zip
11-11
HTML+CSS+JavaScript教程学习笔记.zip 是一个为前端开发初学者和希望提升技能的开发者准备的详尽学习资源。该资源包含从基础到高级的知识点笔记，以及实际项目代码示例，旨在帮助学习者逐步掌握Web前端开发的必备...
前端+hml+圣诞树网页代码+页面展示
12-14
本项目以"前端+hml+圣诞树网页代码+页面展示"为主题，旨在通过一个具体的实例来介绍如何使用HTML创建一个具有节日氛围的动态网页。 1. HTML基础结构： HTML文档通常以`<!DOCTYPE html>`开头，定义文档类型为HTML5...
HTML+CSS+JavaScript学习笔记.pdf
最新发布
03-09
CSS的学习笔记部分将涵盖基本的选择器用法、盒模型理论、布局方式，以及响应式设计的基本概念。选择器是CSS的核心，通过不同的选择器可以精确地选中页面中的元素，并对其应用样式。盒模型是页面布局的基础，它规定了...
基于Jupyter Notebook的互动媒体制作学习笔记与代码实践源码
10-05
它为学习者提供了一个集中的资源库，通过详细的代码实践和学习笔记，帮助学习者系统地掌握互动媒体制作的相关知识。项目中共包含了29个文件，这些文件不仅有包含互动内容的IPython笔记本，也有适用于展示和分享的...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 10 11 100 101 110 111 单位数字：2个（0-1） 扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格
文章购物车功能实现（HTML学习笔记）对应代码
02-06
在这个HTML学习笔记中，我们将讨论以下几个关键知识点： 1. **HTML结构**： 在创建购物车功能时，首先需要设计一个清晰的HTML结构。这通常包括商品列表、添加到购物车按钮、购物车概览和结账区域。HTML元素如`<ul>...
html显示文件代码提示,代码提示和代码完成
weixin_39915700的博客
06-09 1182
使用 Dreamweaver 的代码提示和代码完成功能，最大限度缩短编码时间。Dreamweaver 的智能代码完成或代码提示功能通过减少拼写和其他常见错误，使您可以快速插入和编辑代码。您也可以使用此功能查看：标签的可用属性，函数的可用参数，或对象的可用方法。受支持的语言和技术Dreamweaver 支持下列语言和技术的代码提示：阅读并了解面向各语言的代码提示和代码完成如何运行。启用代码提示要启用...
html字体及文本样式设置
m0_65214572的博客
07-21 8504
html字体及文本样式设置
HTML常用显示内容标签
赵广陆
04-18 5604
1 什么是 HTML？ 需求：（生活中遇到问题） 随着技术的发展，信息量的增大网页的数据信息没有办法完美的、漂亮的展现到用户的面前。 意义:(作用)： HTML是一种专门对网页信息进行规范化展示的语言。把网页的信息格式化展现的语言 HTML(Hyper Text Markup Language)：超文本标记语言超文本：文本信息 、图片、声音、视频、超链接等 标记：标签的...
HTML部分总结
xie__huang的博客
02-24 960
datetime-local ------ 日期+时间 <input type="datetime-local" name="" id="">autofocus ------ 默认光标的位置 <input type="text" name="" id=""autofocus>2.1 type的取值:text ------ 文本框 <input type="text" name="" id="">
使用HTML和CSS修改字体样式
2301_79326254的博客
09-23 898
通过HTML和CSS，您可以轻松地修改网页上的字体样式，包括字体类型、大小、颜色以及其他属性。CSS还提供了其他一些字体属性，例如字体样式（font-style）、字母间距（letter-spacing）和行高（line-height）等。希望这篇文章能对您有所帮助！在HTML中，您可以使用CSS的font-family属性来指定页面上的字体类型。您可以选择使用默认字体（如Arial、Helvetica等），也可以使用自定义字体。通过使用CSS的color属性，您可以更改字体的颜色。
bt php,bt.php · jiehu0992/家谱familytree - Gitee.com
weixin_42576804的博客
03-10 332
刘三才后裔刘氏家族族谱树* {margin: 0; padding: 0;}.tree{width:20000px; margin:40px auto 0 auto}.tree ul {padding-top: 20px; position: relative;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: al...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值