HTML笔记（2）——Lincoer-CSDN博客

本文链接：https://blog.csdn.net/m0_71067366/article/details/131439371

该笔记基于bilibili黑马程序员pink老师前端入门教程p16——p39集

1.HTML常用标签

1.1文本格式化标签

标签语义：突出重要性，比普通文字更重要

1.2<div>和<span>标签

1）<div>标签用来布局，一行只能放一个，小盒子

2）<span>标签用来布局，一行可以放多个<span>,大盒子

1.3图像标签和路径

1.图像标签

<img src="img.jpg" alt="显示失败" title="此图片" height="500" border="15"/>

1）width和height对于一个图片，修改其一

2）属性间不分先后顺序，以空格分开

2.路径

1）目录文件夹：普通文件夹，存放了相关素材，html文件、图片；

3）在Vscode中打开目录文件夹——>新建文件

4）相对路径：

同一级路径：src的属性值为文件名；

下一级路径：src的属性值为同一级路径文件名/下一级路径文件名；

上一级路径：src的属性值为../文件名

5）绝对路径：在电脑中的地址（一般不用）只有在本电脑才有用；网址

1.4超链接标签

<a>标签用于定义超链接：作用是从一个页面链接道另一个页面。

1）链接的语法格式

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

_self 当前窗口打开页面 _blank 新窗口打开页面

2)链接分类

外部链接：跳转目标以 http:// 开头

内部链接：文件名，请参考上述相对路径相关知识

空链接：#

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

网页元素链接:图片、音频等都可以添加超链接

锚点链接：点击可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为 #名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=名字，如<h3 id="two">第二季介绍</h3>

2.HTML中的注释和特殊字符

2.1 注释

HTML中的注释以""结束，快捷键：ctrl+/

2.2特殊字符

3.表格标签

3.1表格的主要作用

表格主要用于显示、展示数据

3.2表格的基本语法

1)<table></table>是用于定义表格的标签

2)<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中

3)<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

4)字母td指表格数据（table data），即数据单元格的内容。

3.3表头单元格标签

1)一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

2)<th>标签表示HTML表格的表头部分

3.4表格属性

<table align="center" width="500" height="249" border="1" cellspacing="0">
    <tr>
        <th>ID</th>
        <th>number</th>
        <th>age</th>
    </tr>
    <tr>
        <td>xiao</td>
        <td>1</td>
        <td>18</td>
    </tr>
    <tr>
        <td>zheng</td>
        <td>2</td>
        <td>19</td>
    </tr>
    <tr>
        <td>loveabc</td>
        <td>3</td>
        <td>20</td>
    </tr>
</table>