title: HTML学习笔记(2)——常用标签
author: SpringForest
date: 2021/05/20
updated: 2021/05/25
categories: HTML学习记录
- 因为字符代码会被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为在新窗口中打开 |
二、超链接的分类
-
外部链接
<a href="http://www..." target=" "> 文本/图片</a> -
内部链接
<a href="页面名称.html" target=" "> 文本/图片</a> -
空链接
<a href="#" target=" "> 文本/图片</a> -
下载链接
<a href="文件名" target=" "> 文本/图片</a> -
网页元素用作链接
<a href="文件名" target=" "> 元素</a> -
锚点链接
快速定位到页面的某个位置
<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