这是我参与「第四届青训营」笔记创作活动的第1天

超文本标记语言HTML

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。（百度百科）

标题标签

<h1>内容<h2> 一共六级（h1-h6），重要性依次递减。

段落标签

<p>内容<p> 顾名思义，该标签是将文本划分成段落。

文本格式化标签

<b>加粗标签<b>

<em>倾斜标签<em>（或<i><i>）

<del>删除标签<del>（或<s><s>）

<ins>下划线标签<ins>（或<u><u>）

<em>倾斜标签<em>（或<i><i>）

常用标签

<div>内容<div> 该标签单独占一行。

<span>内容<span> 一行可以放很多此标签。

<body>内容<body> 内容为主体。

<br/> 换行标签。

图像标签

<img src="" alt="" title="" height="" border="">

【需要注意】：

·src是img标签的必须属性，用于指定图像文件的路径和文件名；替换文本alt，图像显示不出来的时候用文字替换；width给图像设置宽度；height给图像设置高度；提示文本title，鼠标放到图像上时出现提示文字；border给图像设置边框。

· 目录文件夹：存放做页面素材（图像、HTML文件等）的文件夹；根目录：打开目录文件夹的第一层就是根目录；后期用打开目录文件夹的方式比较简单；同一级路径直接插入图片；下一级路径用“images（文件名）/img.jpg”插入图片；上一级路径用“..（表示退回上一级）/img.jpg”插入图片。

·绝对路径：“C:\Users\LEGION\Desktop...”或“https：//......”

超链接

<a href="" target="_self">内容</a>

<a href="" target="_blank">内容</a>

href（必须属性）用于指定链接目标的url地址，当为标签应用href属性时，它便具有了超链接的功能，target用于指定页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

<a href="image.jpg" target="_blank">图像</a> 内部链接：网站内部页面之间的相互链接。

<a href="#该内容">该内容</a> 锚点链接：快速定位到页面某位置。

<a href="#">内容</a> 空链接。

特殊字符

·空格：& nbsp

·小于：& lt

·大于：& gt

·&：& amp

·人民币：& yen

表格标签

（请根据代码自行理解以下内容）

【基础表格】：

QQ截图20220724115050.png

【合并单元格】：

<table border="1" cellspacing="0" cellpading="20" height="200" width="400">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
复制代码

QQ截图20220724115944.png

列表标签

【无序列表】：

 <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
 </ul>
复制代码

【有序列表】：

 <ol>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
 </ol>
复制代码

【自定义列表】：

<dl>
        <dt>自定义列表组</dt>
        <dd>自定义列表描述1</dd>
        <dd>自定义列表描述2</dd>
        <dd>自定义列表描述3</dd>
</dl>
复制代码

HTML标签速记 | 青训营笔记