Html 语法小结

最新推荐文章于 2024-09-10 14:15:01 发布

fortune+

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量83

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_74102727/article/details/130668619

版权

本文介绍了Html的基本概念，包括它作为超文本标记语言的性质和作用。文章详细总结了Html的常用标签，如标题、段落、换行、文本格式化、div和span、图像以及超链接标签的用法，为初学者提供了清晰的学习路径。

摘要由CSDN通过智能技术生成

Html 是前端学习的第一步，接下来做一些 Html 的语法小结

何为Html

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。在这里插入图片描述

HTML标签是由尖括号包围的关键词

<开始标签></结束标签> 大多数标签是双标签
极少数标签是单标签，如
标签关系可以分为两类：
- 包含关系
```
<head>
	<title></title>
</head>
```
- 并列关系
```
<head></head>
<body></body>
```
每个页面都会有一个基本的结构标签（也称为骨架标签）页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		22023.1.20
	</body>
</html>

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

HTML常用标签

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标签。即<h1> - <h6>
<h1>我是一级标签</h1>
h是单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点：加了标题的文字会加粗，字号也会依次变大。一个标题独占一行。

段落标签

在网页中要把文字有条理的显示出来，就需要将这些文字分段显示在HTML标签中。
标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
p是单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：文本在一个段落中，会根据浏览器窗口的大小自动换行。段落和段落之间保有空隙。

换行标签

在 HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />
br是单词break的缩写
<br /> 标签语义：强制换行
特点：单标签，开始新的一行，行与行之间没有大的垂直间距。

文本格式化标签

标签语义：突出重要性，以粗体，斜体或下划线等效果显示文字。

下表列出常用文本格式化标签。推荐使用语义更明确的写法。

div 和 span 标签

没有语义，它们就是一个盒子，用来装内容。
<div>这是头部</div> div是division的缩写，表示分割、分区。
<span>今日价格</span> span意味跨度、跨距。
特点：
- <div> 标签用来布局，一行只能放一个<div> ，可以理解为一个大盒子
- <span> 标签用来布局，一行可放多个<span> ，可以理解为小盒子。效果如下图
图像标签
- 图像标签用于定义HTML页面中的图像。
<img src=【可替换内容】> 中，img是image的缩写，src是标签的必备属性，它用于指定图像文件的路径和文件名。width和height只设定一个即可，另一个属性会随之等比例缩放。border添加的边框颜色可以在后续的CSS学习中进行更改。
<img src="图片路径" alt="备用文字" title="提示文字" width="500" border="15"/>
attention:
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即 key=“value”的格式，属性=“属性值”
<img src=【可替换内容】> 中，img是image的缩写，src是标签的必备属性，它用于指定图像文件的路径和文件名。width和height只设定一个即可，另一个属性会随之等比例缩放。border添加的边框颜色可以在后续的CSS学习中进行更改。
<img src="图片路径" alt="备用文字" title="提示文字" width="500" border="15"/>
attention:
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即 key=“value”的格式，属性=“属性值”
超链接标签
在HTML标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式
- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- a 是单词anchor 的缩写，意为：锚
- 两个属性的作用如下：
链接分类：
- 外部链接：以http:// 开头
- 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。（pink said:同一个目录文件夹内的网站直接相互链接，只需要敲网站的名字即可，不用敲http:// ）
- 空连接：当没有确定链接目标时：<a href=”#”>空链接</a>
- 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
  <a href="img.zip">下载文件</a> （网页与压缩包或文件在同一级目录文件夹下）
  如果要下载非压缩包或文件可以在href后面加个download=”文件名.扩展名”
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
  <a href="http://www.baidu.com"><img src="img.ipg"/></a>
  （示例：给图片添加超链接）
- 锚点链接：点击链接，可以快速定位到页面中的某个位置
  - 在链接文本的href属性中，设置属性值为#名字 的形式，如<a href="#two">跳转至第二集</a>
  - 找到目标位置标签，里面添加一个ID属性=刚才的名字
    如：<h3 id="two">第二集</h3>