HTML---基础

news2024/12/23 16:48:35

文章目录

  • 目录

    文章目录

    前言

    一.HTML概述

    二.HTML相关概念

     HTML作用域

     HTML标签

    HTML转译字符 

    总结

前言

一.HTML概述

    HTML（超文本标记语言）是一种用于创建网络页面的标记语言。它以标记的形式编写，该标记描述了文档的结构和内容。HTML文件由一系列标记（或标签）组成，每个标记都包含一段文本。浏览器可以根据HTML文件中的标签来显示页面的内容和格式。HTML标记提供了一些基本的功能，如标题、段落、表格、链接等。它还可以与CSS和JavaScript等其他技术相结合，实现更丰富、交互性更强的网页设计。HTML是Web开发的基础，对于前端开发者来说，熟练掌握HTML至关重要。

二.HTML相关概念

 HTML作用域

  • 格式 ：
<html>      #html开放标签
标签作用域     #开放闭合标签之间为标签作用域
</html>     #html闭合标签
  •  标签作用域嵌套关系：
<html> 
    <head>                    #头部子标签开放标签
        <title>                 #头部标题开放标签 
            这是我的第一个html          
        </title>                #头部标题闭合标签
    </head>                   #头部子标签闭合标签                
    <body>
            现在是2023-12-10
    </body>
</html>
  • 模板 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		静夜思
		唐.李白
		窗前明月光，
		疑是地上霜。
		举头望明月，
		低头思故乡。
	</body>
</html>

 HTML标签

  •  body 主体标签
#body子标签中的1-6级标题标签
#body标签中的标题标签称为主体标题标签
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		<h1>静夜思</h1>
		唐.李白
		窗前明月光，
		疑是地上霜。
		举头望明月，
		低头思故乡。
	</body>
</html>
  •  一级标题演示：

 

  •  段落标签

HTML段落标签是用来定义和组织文本内容的元素。它们可以用来表示一个完整的段落，或者将文本分组为逻辑上的段落。

#段落标签
<p>...</p>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>唐.李白</p>
		窗前明月光，
		疑是地上霜。
		举头望明月，
		低头思故乡。
	</body>
</html>

 

  •  换行标签

 在HTML中，可以使用换行标签来创建换行效果

...<br/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>唐.李白</p>
		窗前明月光，<br/>
		疑是地上霜。<br/>
		举头望明月，<br/>
		低头思故乡。<br/>
	</body>
</html>

 

  • 水平线标签 
<hr>/
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>唐.李白</p>
		<hr/>
		窗前明月光，<br/>
		疑是地上霜。<br/>
		举头望明月，<br/>
		低头思故乡。<br/>
	</body>
</html>

  •  字体样式标签
#字体加粗标签
<strong>...</strong>
#字体斜体标签
<em>...</em>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>古诗阅读</title>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>唐.<strong>李白</strong></p>
		<hr/>
		窗前明月光，<br/>
		疑是地上霜。<br/>
		举头望明月，<br/>
		低头<em>思故乡<em/>。<br/>
	</body>
</html>

 

  •  HTML 图像标签

 HTML图像标签是用于在网页中显示图像的一种标签。

 

  • HTML链接标签 

 HTML中的链接标签用于创建超链接，使用户可以点击链接跳转到其他页面或位置。HTML中的链接标签由<a>元素定义。链接标签的基本语法如下：

HTML窗口打开方式
_blank在新窗口或新标签页中打开链接
_self在当前窗口中打开链接（默认方式）
_top在最顶层的窗口中打开链接。适用于在嵌套的窗口中使用。
_parent在父窗口中打开链接。适用于在嵌套的窗口中使用。
  •  应用场景一：进行页面访问
<!DOCTYPE html>
<!--语法：	<a herf="该位置设置访问地址" target=打开方式"">提示语或提示图</a>-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			<a href="https://i.csdn.net/#/user-center/profile?spm=1001.2101.3001.5111" target="_blank">点击可访问CSDN</a>
		</p>
	</body>
</html>

 

  • 应用场景二： 锚链接
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--步骤1：设置锚点标记 语法：<a name="此处自定义属性值"></a>-->
		<a name="txttop"></a>
		<h1>1</h1>
		<h2>2</h2>
		<h3>3</h3>
		<h4>4</h4>
		<h5>5</h5>
		<!--步骤2：跳转至标记位 语法：<a href="#锚点标记处定义的属性值">提示语或提示符</a>-->
		<a href="#texttop">点击回锚点标记处</a>
	</body>
</html>

标签分类： 

块状标签：

在页面中独立占据一行的标签，它们会以块的形式进行展示，独占一行的宽度。块状标签常用于创建页面的结构和布局，如段落、标题、列表等。常见的块状标签有：

  • <p>：用于创建段落。
  • <h1>-<h6>：用于创建标题，其中<h1>为最高级标题，<h6>为最低级标题。
  • <div>：用于创建一个块级容器，通常用于分组其他元素或者添加样式。

行内标签：

在页面中以行的形式进行展示的标签，它们不会独占一行，可以和其他行内元素或文本在同一行上显示。行内标签常用于包裹文本内容，或者用于创建一些小的元素或功能，如超链接、加粗、斜体等。常见的行内标签有：

  • <a>：用于创建超链接。
  • <strong>：用于加粗文本。
  • <em>：用于强调文本，通常以斜体样式显示。
  • <span>：用于给文本或其他元素添加样式或事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>我是P元素</p>
		<h1>我是H元素</h1>
		<h5>我是H5元素</h5>
		<a href="#">我是超链接元素</a>
		<strong>我是strong元素</strong>
	</body>
</html>

HTML转译字符 

 HTML转义符是一些特殊字符，用于在HTML文档中表示那些具有特殊含义的字符，而不是将它们解释为HTML代码。这些字符通常用于表示标记语言中的特殊字符，如小于号、大于号和引号等。当在HTML文档中直接使用这些字符时，会被解释为HTML标签或实体引用，从而导致错误的显示或解析。

#空格转译
&nbsp;窗前&nbsp;明月光，
#大于号转译
如果时间&gt;晚上6点，就坐车回家
#小于号转译
如果时间&it;早上7点，就走路去上学
#引号转译
HTML的属性值必须用成对的&quot;引起来
#版权号@转译
&copy;2023-2023 csdn

总结

<title>...</title>用于定义文档中的标题
<h1>~</h6>主体标签
<p>...</p>用于定义段落
<em>...</em>用于将文本改为斜体
<strong>...</strong>用于加粗文本

<hr/>

...

用于添加水平线
...<br/>用于换行
空格转译符&nbsp;
大于号转译符&gt;
引号转译符&quot;
版权号@转译&copy;

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

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

相关文章

黑苹果之网卡篇

黑苹果之网卡篇

今天主要来聊一下黑苹果如何选择网卡 黑苹果对硬件的要求比较局限&#xff0c;可以用的无线网卡也比较少&#xff0c;而且很多也已经涨价&#xff0c;这里就结合自己的使用经验&#xff0c;简单分享几款比较好用的黑苹果无线网卡方案。 一、BCM94360系列 如果想要稳定、省心&am…
阅读更多...
【K8S 系列】认识k8s、k8s架构

【K8S 系列】认识k8s、k8s架构

一、什么是k8s? Kubernetes 简称 k8s&#xff0c;是支持云原生部署的一个平台&#xff0c;k8s 本质上就是用来简化微服务的开发和部署的&#xff0c;用于自动化部署、扩展和管理容器化应用的开源容器编排技术。对于传统的docker其实也提供了容器编排的技术docker-compose&…
阅读更多...
gdb本地调试版本移植至ARM-Linux系统

gdb本地调试版本移植至ARM-Linux系统

移植ncurses库 本文使用的ncurses版本为ncurses-5.9.tar.gz 下载地址&#xff1a;https://ftp.gnu.org/gnu/ncurses/ncurses-5.9.tar.gz 1. 将ncurses压缩包拷贝至Linux主机或使用wget命令下载并解压 tar-zxvf ncurses-5.9.tar.gz 2. 解压后进入到ncurses-5.9目录…
阅读更多...
【人工智能Ⅰ】实验8：DBSCAN聚类实验

【人工智能Ⅰ】实验8：DBSCAN聚类实验

实验8 DBSCAN聚类实验 一、实验目的 学习DBSCAN算法基本原理&#xff0c;掌握算法针对不同形式数据如何进行模型输入&#xff0c;并结合可视化工具对最终聚类结果开展分析。 二、实验内容 1&#xff1a;使用DBSCAN算法对iris数据集进行聚类算法应用。 2&#xff1a;使用DBS…
阅读更多...
论文阅读——GroupViT

论文阅读——GroupViT

GroupViT: Semantic Segmentation Emerges from Text Supervision 一、思想 把Transformer层分为多个组阶段grouping stages&#xff0c;每个stage通过自注意力机制学习一组tokens&#xff0c;然后使用学习到的组tokens通过分组模块Grouping Block融合相似的图片tokens。通过这…
阅读更多...
CSPNet: A New Backbone that can Enhance Learning Capability of CNN（2019）

CSPNet: A New Backbone that can Enhance Learning Capability of CNN（2019）

文章目录 -Abstract1 Introduction2 Related workformer work 3 Method3.1 Cross Stage Partial Network3.2 Exact Fusion Model 4 Experiments5 Conclusion 原文链接 源代码 - 梯度信息重用&#xff08;有别于冗余的梯度信息&#xff09;可以减少计算量和内存占用提高效率&am…
阅读更多...
二、结合各种图形库实现各种demo（11-20）

二、结合各种图形库实现各种demo（11-20）

demo地址https://bidding-m.gitee.io/maptalks-test-next/#/ 11、isects 12、right click menu 13、infoWindow 14、image marker 15、multi image marker 16、vector-marker-fill 17、line-gradient-arrow 18、rotated-marker-with-line 19、smoothness-line 20、polygon 欢迎…
阅读更多...
“集爱三湘 传递温情”旺旺送温暖公益活动在开福东风路街道办举行

“集爱三湘 传递温情”旺旺送温暖公益活动在开福东风路街道办举行

&#xff08;通讯员&#xff1a;吴康&#xff09;用真情传递爱的力量&#xff0c;用行动践行善的约定。12月12日上午&#xff0c;湖南大旺食品有限公司长沙分公司联合湖南省朝阳公益基金会在开福区东风路街道办举行“集爱三湘 传递温情”旺旺送温暖活动&#xff0c;旨在扎实做好…
阅读更多...
链表基础知识（一、单链表）

链表基础知识（一、单链表）

一、链表表示和实现 顺序表的问题及思考 问题&#xff1a; 1. 中间/头部的插入删除&#xff0c;时间复杂度为O(N) 2. 增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不小的消耗。 3. 增容一般是呈2倍的增长&#xff0c;势必会有一定的空间浪费。例如当…
阅读更多...
Live800:客服5大场景高满意度话术有这些

Live800:客服5大场景高满意度话术有这些

客服作为企业与消费者之间的桥梁&#xff0c;其服务质量往往直接影响到消费者对企业的印象和忠诚度。因此&#xff0c;提高客服满意度一直是企业所关注的重要问题。那么&#xff0c;客服在哪些场景下能够让消费者感到满意呢&#xff1f;今天&#xff0c;我们就来探讨一下客服5大…
阅读更多...
MySQL笔记-第11章_数据处理之增删改

MySQL笔记-第11章_数据处理之增删改

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第11章_数据处理之增删改1. 插入数据1.1 实际问题1.2 方式1&#xff1a;VALUES的方式添加1.3 方式2&#xff1a;将查询结果插入到表中 2. 更…
阅读更多...
【Web】一张动图告诉你，输入网址之后，发生了什么事情？

【Web】一张动图告诉你，输入网址之后，发生了什么事情？

让我们一步一步地来看这个过程。 步骤1&#xff1a; 用户在浏览器中输入一个URL&#xff08;比如www.csdn.net&#xff09;&#xff0c;然后按下回车键。首先&#xff0c;我们需要将这个URL转换成一个IP地址。通常&#xff0c;这个映射关系会被存储在缓存中&#xff0c;因此浏…
阅读更多...
Linux基本操作指令

Linux基本操作指令

哈喽小伙伴们&#xff0c;从这篇文章开始&#xff0c;在学习数据结构的同时&#xff0c;我们开启一个新的篇章——Linux操作系统的学习&#xff0c;这将会是又一个新的开始&#xff0c;希望小伙伴们能够认真细心&#xff0c;不要掉队哦。 目录 一.什么是Linux 二.为什么要学习…
阅读更多...
BeautifulSoup学习

BeautifulSoup学习

前期准备&#xff1a; pip install bs4 pip install lxml bs解析器 从上面的表格可以看出&#xff0c;lxml解析器可以解析HTML和XML文档&#xff0c;并且速度快&#xff0c;容错能力强&#xff0c;所有推荐使用它。 节点选择器 获取名称 soup BeautifulSoup(<b class&…
阅读更多...
mysql：不要在索引列进行数学运算和函数运算

mysql：不要在索引列进行数学运算和函数运算

不要在索引列进行数学运算和函数运算。这是因为数学运算和函数运算会改变索引列的值&#xff0c;导致索引失效。 如果需要进行计算或函数处理&#xff0c;最好将数据取出并在应用程序中进行处理。 下面举个对照的例子&#xff1a; 1&#xff09;看语句explain select * from …
阅读更多...
Embedding压缩之基于二进制码的Hash Embedding

Embedding压缩之基于二进制码的Hash Embedding

推荐系统中&#xff0c;ID类特征的表示学习&#xff08;embedding learning&#xff09;是深度学习模型成功的关键&#xff0c;因为这些embedding参数占据模型的大部分体积。这些模型标准的做法是为每一个ID特征分配一个unique embedding vectors&#xff0c;但这也导致存储emb…
阅读更多...
Openlayers 加载 Geoserver 图层以及查询条件过滤

Openlayers 加载 Geoserver 图层以及查询条件过滤

Openlayers 加载 Geoserver 图层以及查询条件过滤 查询条件过滤核心代码完整代码&#xff1a;在线示例 Openlayers 加载 Geoserver 图层&#xff0c;在实际项目中常常会遇到&#xff0c;需要对图层进行过滤&#xff0c;这里介绍一下过滤方法。 其实就是利用 Geoserver 的 CQL_…
阅读更多...
2024SIA上海国际轴承工业展览会 ▎参行业盛会 展轴研风采

2024SIA上海国际轴承工业展览会 ▎参行业盛会 展轴研风采

2024SIA上海国际轴承工业展览会 内容&#xff1a;1、轴承制品展区&#xff1a;2、轴承设备展区&#xff1a;3、轴承零件展区&#xff1a; 国际轴承展丨轴承工业展丨轴承装备展丨上海轴承展丨上海轴承工业展丨上海轴承装备展 2024上海国际轴承工业展览会将会于2024年7月24-26日…
阅读更多...
C语言—每日选择题—Day46

C语言—每日选择题—Day46

第一题 1. 下列程序段的输出结果是&#xff08;&#xff09; #include <stdio.h> int main() {int x 1,a 0,b 0;switch(x) {case 0: b;case 1: a;case 2: a;b;}printf("a%d,b%d\n", a, b);return 0; } A&#xff1a;a2,b1 B&#xff1a;a1,b1 C&#xf…
阅读更多...
面试必备的Linux常用命令

面试必备的Linux常用命令

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 Linux常用命令 1、文件及内容2、网络3、进程服务4、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023