HTML学习笔记——HTML常用标签

Posted 2021-05-24 UDK_KL.

---

title: html学习笔记(2)——HTML常用标签.md
author: UDK
date: 2021/05/20
updated: 2021/05/21
categories: HTML学习记录

---

标题标签

<h1>一级标题</h1>
<h2>二集标题</h2>
.
.
.
<h6>六级标题</h6>

段落标签和换行标签

• 段落标签

html并不会依据输入的文本格式进行分段，因此需要段落和换行标签

<p>段落标签</p>

• 段落标签

html文本默认根据浏览器窗口的大小自动换行，因此需要换行标签，换行标签后的文字会被强制换行

<br />

段与段之间的空隙要比换行标签造成的空隙大

文本格式化标签

作用	标签
加粗	< strong>< /strong>或< b>< /b>
倾斜	< em>< /em>或< i>< /i>
删除线	< del>< /del>或< s>< /s>
下划线	< ins>< /ins>或< u>< /u>

以上标签可以符合使用

<em><strong>加粗又倾斜</strong></em>

布局标签

<div></div>
<span></span>

图像标签

图像标签的属性：

属性	属性值	备注
src	图片路径	必须填写的属性
alt	文本	替换文本，当图片不能正常显示时显示该文字
title	文本	提示文本，当光标置于图像上时显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框的粗细

宽度和高度如果只修改其中一项，另一项会自动等比例缩放

语法：

<img src="图像URL" alt="替换文本"/>

搭建网站时注意汇总图片素材文件

相对路径

以引用文件为参考建立起的目录文件，即该素材或文件相对于HTML页面的位置

• 以图片为例

相对路径分类	符号	说明	例
同级路径		素材或文件位于该引用HTML文件的同一级	< img src=“123.png” />
下一级路径	/	素材或文件位于该引用HTML文件的同下一级	< img src=“images/123.png” />
上一级路径	…/	素材或文件位于该引用HTML文件的同上一级	< img src="…/images/123.png" />

绝对路径

指目录下的绝对位置，通常是从盘符或完整的网址https://www…开始

超链接标签

1. 链接的语法格式

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

   属性	作用
   herf	用于前往指定的url地址
   target	用于指定页面的打开方式__ self为当前页面打开，__blank为在新窗口中打开

2. 超链接的分类

   1. 外部链接

      <a href="http://www..." target=" "> 文本/图片</a>
      

   2. 内部链接

      <a href="页面名称.html" target=" "> 文本/图片</a>
      

   3. 空链接

      <a href="#" target=" "> 文本/图片</a>
      

   4. 下载链接

      <a href="文件名" target=" "> 文本/图片</a>
      

   5. 网页元素用作链接

      <a href="文件名" target=" "> 元素</a>
      

   6. 锚点链接

      快速定位到页面的某个位置

      <a href="#ID" target=" "> 元素</a>	//定位到ID标签处
      <h3 id=ID>内容<h3>									//添加ID属性