Web_前端_HTML入门学习的案例案例1

news2024/12/28 20:54:32

HTML入门学习的案例

来源:

HTML入门学习的案例_给学生讲html内容案例-CSDN博客

案例1：hello.html

<html>
	<body>
		<title>html技术</title>
	</body>

	<body>
		hello
	</body>
</html>

image-20241115102325544

（但是有乱码）

案例2：第一个html.html

<html>
	<head>
		<meta charset="utf-8">        <!--1.解决乱码问题-->
		<title>HTML技术</title>
	</head>
	<body>
		welcome to html！
	</body>
</html>

image-20241115102358220

案例3：标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>标签</title>
</head>
<body text="blue">              <!--1.文件设置蓝色-->
标签的组成
<br>
html从入门到精通
<hr>                            <!--2.水平线-->
<h1>标签的分类</h1>标签的分类       <!--3.题目标签-->
<hr>
<h2>标签的分类</h2>
<hr>
<h3>标签的分类</h3>
<hr>
<h4>标签的分类</h4>
<hr>
<h5>标签的分类</h5>
<hr>
<h6>标签的分类</h6>
<hr>
<span>哈哈</span>嘿嘿            <!--4.内联容器标签 -->   
</body>
</html>

image-20241115102913482

<span> 是 HTML 中的一个内联容器标签，用于对文档中的文本或其它内容进行分组。它本身没有特定的含义或样式，但常用于向文档中的某些部分添加样式（如颜色、字体等）或者附加事件处理器（如点击事件）。<span> 标签的主要用途包括：

  1. 样式化文本：通过结合 CSS，可以轻松地为 <span> 标签内的内容添加特定的样式。

    <p>这是一个普通的句子，<span style="color: blue;">而这一部分是蓝色的。</span></p>

  2. 增加交互性：可以为 <span> 标签添加 JavaScript 事件处理程序，使其具有交互

    <p>点击我：<span onclick="alert('你点击了我！')">点这里</span></p>

  3. 语义化标记：虽然 <span> 本身不携带语义信息，但在某些情况下，它可以用来标记文档中的特定部分，以便于屏幕阅读器等辅助技术更好地理解文档结构。

    <p>文章作者：<span class="author">张三</span></p>

案例4：注释.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注释</title>
</head>
<body>
	<!--这是一个二级标题-->                   <!--1.注释-->
	<h2>welcome to html!</h2>
</body>
</html>

image-20241115102749339

案例5：实体字符.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
图书：&lt;&lt;HTML从入门到精通&gt;&gt;           <!--1.<<>>字符-->
<hr>
北京&nbsp;&nbsp;上海&nbsp;&nbsp;广州            <!--2.空格-->
<hr>
在HTML用&amp;lt;表示<小于号                        
<hr>
"HTML语言"或&quot;HTML语言&quot;                <!--3.双引号-->               
<hr>
版权所有&copy;2000-2020 高教培训                  <!--4.复制实体字符-->
<hr>
&reg;注册符号                                   <!--5.注册符号-->
<hr>
&times;关闭按钮                                 <!--6.×-->                 
<hr>
</body>
</html>

< 和 > 是 HTML 实体，分别表示小于号 < 和大于号 >。

image-20241115103543316

案例6：常用标签br.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签br</title>
</head>
<body>
HTML从入门到精通
<br> <!--换行-->
欢迎学习HTML技术
<br>
</body>
</html>

image-20241115103631206

案例7：常用标签p.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签p</title>
</head>
<body>
<p>HTML称力超文本标记语言。是一种标识性的语言，它包括一系列标签通过这些标签可以将网路上的文档格式统一，使分散的Iternet资源连接为 一个逻餐整体用代文本是的分理成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<br>
<p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机它的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
</p>
</body>
</html>

image-20241115103749663

<p>与</p>闭合自带一个换行

案例8：常用标签h1、h2…h6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签h1-h6</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
<hr>
</body>
</html>

image-20241115104009818

案例9：常用标签pre.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用标签pre</title>
</head>
<body>
	<pre>
		&lt;&lt;HTML从入门到精通&gt;&gt;
		欢迎学习html技术
	</pre>
</body>
</html>
  • <pre> 标签用于定义预格式化的文本。在这个标签内的文本会保留原有的空格和换行符，浏览器会按照原文本的格式进行显示。这对于显示代码、诗歌或其他需要保留格式的文本非常有用。

image-20241115104141938

image-20241115104156926

案例10：常用标签div.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签div</title>
</head>
<body>
<div style="width:400px;height:100px;background:red">导航部分</div>
<div style="width:500px;height:100px;background:yellow">正文部分</div>
<div style="width:600px;height:100px;background:blue">版权部分</div>
</body>
</html>



<div> 标签是一个块级元素，用于对文档中的内容进行分组。它本身没有特定的样式，但可以通过 CSS 来设置样式。<div> 标签在布局和设计中非常常用，可以用来创建不同的区块，如导航栏、主要内容区、版权信息等

image-20241115105745940

案例11：常用标签span.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签span</title>
</head>
<body>
iphone XR 不要8888，也不要1888，只要<span style="font-size: 50px;color: red;">98元</span>
</body>
</html>
  • <span> 标签是一个内联元素，用于对文档中的文本或其它内容进行分组。它本身没有特定的样式，但可以通过 CSS 来设置样式。

image-20241115105901110

案例12：常用标签ol、li.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type="a" start="3">
    <li>吃鸡</li>
    <li>王者荣耀</li>
    <li>LOL</li>
    <li>WOL</li>
</ol>
</body>
</html>

  • <ol> 标签用于定义一个有序列表（ordered list），列表项会按照一定的顺序排列，默认是数字序号。

  • type="a" 属性指定了列表项的编号类型为小写字母（a, b, c, ...）。

  • start="3" 属性指定了列表的起始编号为 3。

  • <ol type="a" start="3">

    ：定义了一个有序列表，列表项的编号类型为小写字母，起始编号为 3。

    • <li>吃鸡</li>：列表项 1，编号为 c。
    • <li>王者荣耀</li>：列表项 2，编号为 d。
    • <li>LOL</li>：列表项 3，编号为 e。
    • <li>WOL</li>：列表项 4，编号为 f。

image-20241115110041511

案例13：常用标签ul、li.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>亲爱的同学们</h3>
	<ul type="circle">
		<li>弓金正</li>
		<li>张晋超</li>
		<li>张跃德</li>
		<li>123456</li>
	</ul>
	<hr>
</body>
</html>
  • <ul> 标签用于定义一个无序列表（unordered list），列表项通常用项目符号表示。
  • type="circle" 属性指定了列表项的项目符号类型为圆形（circle）。常见的项目符号类型还包括 disc（实心圆点，默认值）和 square（方形）。

image-20241115110255951

案例14：常用标签dl、dt、dd.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用标签dl、dt、dd</title>
</head>
<body>
	<h3>术语的解释</h3>
	<dl>
		<dt>LOL</dt>
		<dd>它是由腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd>
		<dd>他分为PC端和移动端</dd>
		<dt>HTML</dt>
		<dd>是一种制作网页的标签=记语言</dd>
		<dt>JAVA</dt>
		<dd>是一种跨平台的编程语言</dd>
	</dl>
</body>
</html>
<dl>
  • <dl> 标签用于定义一个描述列表（definition list）。描述列表通常用于定义术语及其解释。
  • 描述列表由 <dt>（定义术语）和 <dd>（定义描述）标签组成。
. <dt>
  • <dt> 标签用于定义术语（定义项）。每个术语可以有一个或多个对应的描述。
. <dd>
  • <dd> 标签用于定义术语的描述（定义描述）。每个 <dd> 标签对应一个 <dt> 标签，可以有多个 <dd> 标签对应同一个 <dt> 标签。
具体内容

  • <h3>术语的解释</h3>：定义了一个三级标题，显示“术语的解释”。

  • <dl>

    ：定义了一个描述列表。

    • <dt>LOL</dt>

      ：定义术语“LOL”。

      • <dd>它是由腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd>：定义“LOL”的第一个描述。
      • <dd>他分为PC端和移动端</dd>：定义“LOL”的第二个描述。
    • <dt>HTML</dt>

      ：定义术语“HTML”。

      • <dd>是一种制作网页的标签=记语言</dd>：定义“HTML”的描述。
    • <dt>JAVA</dt>

      ：定义术语“JAVA”。

      • <dd>是一种跨平台的编程语言</dd>：定义“JAVA”的描述

image-20241115110444760

案例15：常用标签hr.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用标签hr</title>
</head>
<body>
	<hr color="#FF7300" size="10px">
	<hr color="red">
	<hr color="blue" width="400">
	<hr color="#00FF00" width="50%">
	<div style="width:600px;height:300px;background:#FF7300">
	<hr color="red" width="50%" size="9px" align="right">
	</div>
</body>
</html>

  • 第一条 <hr> 标签：

    <hr color="#FF7300" size="10px">
    • color="#FF7300"：设置水平线的颜色为橙色。
    • size="10px"：设置水平线的高度为 10 像素。

  • 第二条 <hr> 标签：

    <hr color="red">
    • color="red"：设置水平线的颜色为红色。

  • 第三条 <hr> 标签：

    <hr color="blue" width="400">
    • color="blue"：设置水平线的颜色为蓝色。
    • width="400"：设置水平线的宽度为 400 像素。

  • 第四条 <hr> 标签：

    <hr color="#00FF00" width="50%">
    • color="#00FF00"：设置水平线的颜色为绿色。
    • width="50%"：设置水平线的宽度为父元素宽度的 50%。

  • 包含第五条 <hr> 标签的 <div>：

    <div style="width:600px;height:300px;background:#FF7300">
    <hr color="red" width="50%" size="9px" align="right">
</div>

    • <div> 标签定义了一个宽度为 600 像素、高度为 300 像素、背景色为橙色的块级元素。

    • <hr>

      标签：

      • color="red"：设置水平线的颜色为红色。
      • width="50%"：设置水平线的宽度为父元素宽度的 50%。
      • size="9px"：设置水平线的高度为 9 像素。
      • align="right"：设置水平线的对齐方式为右对齐。

image-20241115111742374

案例16：常用标签img.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="..\img\qq.jpg" alt="" title="图片加载失败。。。。">
	<hr>
	<div style="width: 800px;height: 800px;background:red">
		<img src="..\img\mac.jpg" alt="" width="50%">
		<div style="width: 500px;height:500px;background:#cccccc">
			<img src="..\img\mac.jpg" alt="" width="50%">
		</div>			
	</div>
	<img src="..\img\mac.jpg" alt="" width="50%" >
</body>
</html>
. <img>

  • <img> 标签用于在网页中插入图像。

  • src 属性指定了图像的路径。

  • alt 属性提供了图像的替代文本，当图像无法加载时显示。

  • title 属性提供了图像的额外信息，通常显示为工具提示。

  • width 属性指定了图像的宽度。

  • 外层

    标签：

    • style="width: 800px;height: 800px;background:red"：设置宽度为 800 像素，高度为 800 像素，背景色为红色。

  • 第一张图像：

    • src="..\img\mac.jpg"：指定图像的路径为 ..\img\mac.jpg。
    • alt=""：提供图像的替代文本为空。
    • width="50%"：设置图像的宽度为父元素宽度的 50%。

  • 内层

    标签：

    • style="width: 500px;height:500px;background:#cccccc"：设置宽度为 500 像素，高度为 500 像素，背景色为浅灰色。

  • 第二张图像：

    • src="..\img\mac.jpg"：指定图像的路径为 ..\img\mac.jpg。
    • alt=""：提供图像的替代文本为空。
    • width="50%"：设置图像的宽度为父元素宽度的 50%。

image-20241115112804037

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2241407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C#】C#编程入门指南：构建你的.NET开发基础

【C#】C#编程入门指南：构建你的.NET开发基础

文章目录 前言&#xff1a;1. C# 开发环境 VS的基本熟悉2. 解决方案与项目的关系3. 编辑、编译、链接、运行4. 托管代码和CLR4.1 CLR&#xff1a;4.2 C# 代码第编译过程&#xff08;两次编译的&#xff09; 5. 命名空间6. 类的组成与分析7. C# 的数据类型7.1 值类型7.2 引用类型…
阅读更多...
115页PDF | 埃森哲_XX集团信息化能力成熟度评估及能力提升方案（限免下载）

115页PDF | 埃森哲_XX集团信息化能力成熟度评估及能力提升方案（限免下载）

一、前言 这份报告是埃森哲_XX集团信息化能力成熟度评估及能力提升方案&#xff0c;报告首先分析了集团的战略规划&#xff0c;包括调整优化期、转型升级期和跨越发展期的目标&#xff0c;然后识别了集团面临的内部挑战和外部压力&#xff0c;如管控体系不完善、业务板块多样化…
阅读更多...
面试时问到软件开发原则，我emo了

面试时问到软件开发原则，我emo了

今天去一个小公司面试&#xff0c;面试官是公司的软件总监&#xff0c;眼镜老花到看笔记本电脑困难&#xff0c;用win7的IE打开leetcode网页半天打不开&#xff0c;公司的wifi连接不上&#xff0c;用自己手机热点&#xff0c;却在笔记本电脑上找不到。还是我用自己的手机做热点…
阅读更多...
Wi-Fi背后的工作原理与技术发展历程介绍【无线通信小百科】

Wi-Fi背后的工作原理与技术发展历程介绍【无线通信小百科】

1个视频说清楚WIFI&#xff1a;频段/历程/技术参数/常用模块 智能手机拥有率越来越高的今天&#xff0c;大家已经习惯了通过无线网络上网的方式。除了在外面需要用手机流量&#xff0c;我们通常在家里或者机场&#xff0c;商场都可以通过Wi-Fi连接上网。本期文章将为大家介绍Wi…
阅读更多...
【MySQL 保姆级教学】详细讲解视图--（15）

【MySQL 保姆级教学】详细讲解视图--（15）

视图 1. 为什么要有视图&#xff1f;2.视图的定义和特点3. 创建视图4. 视图的使用举例4.1 创建表并插入数据4.2 举例 5. 视图和基表之间有什么联系呢&#xff1f; 1. 为什么要有视图&#xff1f; 当我们频繁地使用用多表查询和复合查询出的结果时&#xff0c;就需要频繁的使用…
阅读更多...
Python中的HTTP协议

Python中的HTTP协议

文章目录 一. 网址URL二. HTTP协议1. HTTP协议的概念2. HTTP协议的作用3. HTTP请求报文与响应报文① HTTP请求报文Ⅰ. GET请求报文格式Ⅱ. GET请求报文分析Ⅲ. POST请求报文格式Ⅳ. POST请求报文分析Ⅴ. GET与POST请求报文总结 ② HTTP响应报文Ⅰ. HTTP响应报文格式Ⅱ. HTTP响应…
阅读更多...
108. UE5 GAS RPG 实现地图名称更新和加载关卡

108. UE5 GAS RPG 实现地图名称更新和加载关卡

在这一篇里&#xff0c;我们将实现对存档的删除功能&#xff0c;在删除时会有弹框确认。接着实现获取玩家的等级和地图名称和存档位置&#xff0c;我们可以通过存档进入游戏&#xff0c;玩家在游戏中可以在存档点存储存档。 实现删除存档 删除存档需要一个弹框确认&#xff0…
阅读更多...
DNS批量解析管理软件有什么用

DNS批量解析管理软件有什么用

在复杂的网络环境中&#xff0c;DNS批量解析管理软件犹如一把功能强大的钥匙&#xff0c;开启了高效网络管理的大门&#xff0c;为网络运营和维护带来了诸多便利。 1、对于网络服务提供商而言&#xff0c;DNS批量解析管理软件极大地提高了工作效率 传统的DNS解析管理方式在处…
阅读更多...
IoT [remote electricity meter]

IoT [remote electricity meter]

IoT [remote electricity meter] 物联网&#xff0c;远程抄表&#xff0c;电表数据&#xff0c;举个例子
阅读更多...
sql数据库-排序查询-DQL

sql数据库-排序查询-DQL

目录 语法 排序方式 举例 将表按年龄从小到大排序 将表按年龄从大到小排序 ​编辑 多重排序 将表按年龄升序&#xff0c;年龄相同按入职时间降序 语法 select * from 表名 order by 字段名1 排序方式1&#xff0c;字段2 排序方式2; 排序方式 升序&#xff1a;ASC&…
阅读更多...
在spring boot工程中使用Filter时，@WebFilter 注解不生效的问题分析和解决方案

在spring boot工程中使用Filter时，@WebFilter 注解不生效的问题分析和解决方案

1. 问题描述 首先编写一个Filter类并通过Component放入spring容器中&#xff0c;通过实现jakarta.servlet中提供的Filter接口完成过滤器的创建&#xff0c;代码如下。 import jakarta.servlet.*; import jakarta.servlet.annotation.WebFilter; import org.springframework.st…
阅读更多...
学习threejs，使用TWEEN插件实现动画

学习threejs，使用TWEEN插件实现动画

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.PLYLoader PLY模型加…
阅读更多...
TypeScript在现代前端开发中的应用

TypeScript在现代前端开发中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 TypeScript在现代前端开发中的应用 TypeScript在现代前端开发中的应用 TypeScript在现代前端开发中的应用 引言 TypeScript 概述…
阅读更多...
CTF-Crypto-简单加密

CTF-Crypto-简单加密

打开首页看题目 描述看起来是一段乱码&#xff0c;拉入随波逐流&#xff0c;未解决 e6Z9i~]8R~U~QHE{RnY{QXg~QnQ{^XVlRXlp^XI5Q6Q6SKY8jUAA 观察字符串&#xff0c;末尾是AA&#xff0c;其中可能含有base64加密 找寻Ascll码表&#xff0c;发现A的Ascll是65&#xff0c;的Ascl…
阅读更多...
MacOS下，如何在Safari浏览器中打开或关闭页面中的图片文字翻译功能

MacOS下，如何在Safari浏览器中打开或关闭页面中的图片文字翻译功能

MacOS下&#xff0c;如何在Safari浏览器中打开或关闭页面中的图片文字翻译功能 在Mac上的Safari浏览器中&#xff0c;可以通过实况文本功能来实现图片中的文本翻译。关闭步骤具体步骤如下&#xff1a; 在浏览器地址栏&#xff0c;鼠标右击翻译按钮&#xff0c;然后点击“首选…
阅读更多...
操作系统——虚拟存储器（含思维导图）

操作系统——虚拟存储器（含思维导图）

本教材为中国铁道出版社——操作系统&#xff08;第四版&#xff09;刘振鹏、张明、王煜著。本篇文章为第六章复习。 目录 思维导图&#xff1a; ​编辑一、虚拟存储器 1.理论基础 2.定义 二、分页虚拟存储管理 1.基本原理 2.缺页中断 3.页面置换 &#xff08;1&…
阅读更多...
基于8.0 Update 3b 的ESXi-Arm Fling

基于8.0 Update 3b 的ESXi-Arm Fling

很久没有更新过 ESXi-Arm 的版本了&#xff0c;博通旗下的 VMware 居然把它更新到了 8.0U3b。 下载地址&#xff1a;https://community.broadcom.com/flings 我准备使用离线更新&#xff0c;就没有下载 ISO&#xff0c;直接下载ESXi-Arm-Offline-Depot-2_00-dl.zip scp 上传…
阅读更多...
python解析网页上的json数据落地到EXCEL

python解析网页上的json数据落地到EXCEL

安装必要的库 import requests import pandas as pd import os import sys import io import urllib3 import json测试数据 网页上的数据结构如下 {"success": true,"code": "CIFM_0000","encode": null,"message": &quo…
阅读更多...
C#桌面应用制作计算器

C#桌面应用制作计算器

C#桌面应用制作简易计算器&#xff0c;可实现数字之间的加减乘除、AC按键清屏、Del按键清除末尾数字、/-按键取数字相反数、%按键使数字缩小100倍、按键显示运算结果等...... 页面实现效果 功能实现 布局 计算器主体使用Panel容器&#xff0c;然后将button控件排列放置Pane…
阅读更多...
谷歌推出设备内置人工智能，实时向手机用户发出诈骗电话警报

谷歌推出设备内置人工智能，实时向手机用户发出诈骗电话警报

Google 宣布推出适用于 Android 的新安全功能&#xff0c;可实时防御诈骗和有害应用。 这些功能由先进的设备内置 AI 提供支持&#xff0c;可在不损害隐私的情况下增强用户安全性。 这些新的安全功能首先在 Pixel 上推出&#xff0c;并将很快在更多 Android 设备上推出。 诈…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023