HTML标签分类_图像文件logo.gif和html文件位于同一文件夹,插入图像时,只需输入图像文件的名-CSDN博客

本文链接：https://blog.csdn.net/qq_44834628/article/details/102994466

标签的相互关系就分为两种：

1.嵌套关系

<html>
	<head>  
	    <title> </title>  
	</head>
</html>

2.并列关系

<head></head>
<body></body>

文档类型：

	  <!DOCTYPE html> 使用的是 html 5 的版本。html有很多版本，告诉用户	   
	    			  和浏览器我们使用的版本号。
	  lang="en" 		语言格式 zh 中文版  en  英文版  可以不写
	  charset="utf-8"	字符集

在这里插入图片描述

HTML常用标签:

标题标签 (熟记):

单词缩写：  head   头部. 标题     title  文档标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，
即 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

在这里插入图片描述

段落标签( 熟记)

在这里插入图片描述

水平线标签(认识)

在这里插入图片描述
换行标签(熟记)

在这里插入图片描述

div span标签(重点)
div span 是没有语义的是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

在这里插入图片描述
文本格式化标签(熟记)

图像标签img (重点)

<img src="图像URL" />

在这里插入图片描述

链接标签(重点)
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

在这里插入图片描述

锚点定位
添加 a标签标题赋值id 属性定位到id 属性值跳转到id处

base标签

特殊字符

注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

    <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + /

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径(重点、难点)
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=“logo.gif” /。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。

绝对路径：
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
在这里插入图片描述
列表标签
无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。
在这里插入图片描述

有序列表 ol （了解）
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

但是实际工作中，较少用 ol img src=“media/1.jpg” />
在这里插入图片描述

自定义列表（理解）
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

在这里插入图片描述