HTML学习笔记——常用标签

Posted 2022-12-09 UDK_KL.

---

目录

• 标题标签
• 段落标签和换行标签
• 文本格式化标签
• 布局标签
• 图像标签
• 相对路径
• 绝对路径
• 超链接标签
• 注释标签
• 特殊符号标签
• 表格标签
• • 表格属性（后期用css代替）
  • 单元格合并
• 列表标签
• • 无序列表
  • 有序列表
  • 自定义列表

---

• 因为字符代码会被markdown格式识别故标签内有空格，实际使用不能有空格

标题标签

<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…开始

超链接标签

一、链接的语法格式

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

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

二、超链接的分类

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属性
   

注释标签

不会在网页中显示的内容

<!--注释内容-->

快捷键：ctrl + /或者command + /

特殊符号标签

因为字符代码会被markdown格式识别故&后有空格，实际使用不能有空格

特殊字符	描述	字符代码
	空格	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和	& amp;
¥	人民币	& yen;
®	注册商标	& reg;
©	版权	& copy;
°	摄氏度	& deg;
±	正负号	& plusmn;
×	乘号	& times;
÷	除号	& divide;
²	平方	& sup2;
³	立方	& sup3;

表格标签

基本语法

<table>
  <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr>
  <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr>
</table>

标签	作用
< table></ table>	定义表格
< tr>< /tr>	定义表格中的行
< tr></ tr>	定义表格中的单元格
< th></ th>	表头单元格标签，使其中的文字加粗居中显示
< thead></ thead>	表格结构标签之表头区域（使代码可读性提高）
< tbody></ body>	表格结构标签之表区域（使代码可读性提高）

表格属性（后期用css代替）

• 以下属性填写在< table>标签内

属性名	属性值	描述
align	left center right	表格中元素的对齐方式
border	1 或 “”	表格边框，默认""没有边框，1为有边框
cellpadding	像素值	单元格与内容之间的留白，默认1像素
cellspacing	像素值	单元格之间的留白，（表格边框厚度），默认2像素
width	像素值或百分比	规定表格宽度

单元格合并

以下属性需写在单元格标签内

属性名	作用
rowspan	跨行合并
clospan	跨列合并

列表标签

无序列表

语法：

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

• ul标签里只能包含li标签但是li标签里可放任意元素

有序列表

语法：

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>

• ol标签里只能包含li标签但是li标签里可放任意元素

自定义列表

语法：

<dl>
  <dt>定义项目名/字</dt>
  <dd>描述项目/名字</dd>
</dl>

• ul标签里只能包含dd和dt标签但是dd和dt标签里可放任意值

dt和dd标签没有数量限制可以一个dt对应多个dd