HTML基础-知识点总结1

已于 2025-07-21 19:20:20 修改
阅读量907 收藏 11
点赞数 27
CC 4.0 BY-SA版权
分类专栏： web前端 html 文章标签： html 前端 html5
于 2025-07-20 20:55:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2502_90411587/article/details/149486976

一、标签

1. 单标签

1.1 注释标签：运行之后并不会显示，是程序员方便阅读添加的标签。快捷键：Ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 注释标签 -->

</body>
</html>

1.2 换行标签：<br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <span>111</span>
    <br>
    <span>222</span>

</body>
</html>

1.3 水平线标签：<hr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <span>111</span>
    <hr>

</body>
</html>

2. 双标签

2.1 标题标签：h1到h6，共六级标题

<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

</body>
</html>

2.2 段落标签：<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>

</body>
</html>

2.3 文本标签：<font></font>（现在基本上不使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <font>文本标签</font>
    <font size="12px" color="skyblue">文本标签</font>

</body>
</html>

2.4 加粗标签：<b></b>、<strong></strong>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <b>加粗</b>
    <strong>加粗</strong>

</body>
</html>

2.5 文字倾斜标签：<i></i>、 <em></em>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <i>文字倾斜</i>
    <em>文字倾斜</em>

</body>
</html>

2.6 下划线标签：<u></u>、<ins></ins>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <u>下划线</u>
    <ins>下划线</ins>

</body>
</html>

2.7 删除标签：<s></s>、<del></del>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <s>删除</s>
    <del>删除</del>
    
</body>
</html>

3. 图片标签

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

各属性作用：

src 图片来源，填写地址，必填

alt 图片为显示是显示的文字

title 鼠标在图片上静止时显示的文字

width 图片的宽

height 图片的高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <img src="1.jpg" alt="" title="" width="" height="">
    
</body>
</html>

二、路径

        分为相对路径和绝对路径，相对路径使用的更多。绝对路径仅适合在单一设备上运行。

1. 相对路径

从文件自身出发开始寻找。

1.1在同一个文件夹中：./文件夹名称/图片名称

1.2在上一个文件夹中：../文件夹名称/图片名称

1.3在下一个文件夹中：文件夹名称/图片名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <img src="./images/1.jpg" alt="" title="" width="" height="">
    <img src="../Images/images/1.jpg" alt="" title="" width="" height="">
    <img src="images/1.jpg" alt="" title="" width="" height="">
    
</body>
</html>

2. 绝对路径

        固定的地址，存储地址一般都是网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <img src="D:\视频、图片\未知\头像.jpg" alt="" title="" width="" height="">
    
</body>
</html>

三、超链接

<a href="" title="" target=""></a>

单击链接会跳转到地址指向的内容，该内容可以是视频、图片、网页、网站等。如果该地址是一个链接需要加上http://

各属性作用：

href 指向跳转的内容，必填属性，如果填写#，代表空链接，点击后回到顶部，如果填写javascript:;表示死链接，点击后没有任何反应

title 鼠标放到链接上显示内文字

target="_blank" 新建一个网页打开链接

target="_self" 使用当前网页打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <a href="https://www.baidu.com/index.htm" title="百度" target="_blank">点击跳转百度</a>
    <a href="https://www.baidu.com/index.htm" title="百度" target="_self">点击跳转百度</a>
    
</body>
</html>

base标签，可以统一控制a标签的跳转方式（当前页面或者新开一个页面），写在head标签中，但是优先级没有a标签控制的target的高。使用需谨慎，会影响所有a标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="" target="_blank">
</head>
<body>
    
    <a href="https://www.baidu.com/index.htm" title="百度" target="_blank">点击跳转百度</a>
    <a href="https://www.baidu.com/index.htm" title="百度" target="_self">点击跳转百度</a>
    
</body>
</html>

锚点：通过设置链接路径地址，跳转到当前页面固定位置，需要使用到id属性。href和id需要确保大小写一致。id具有唯一性，只能使用一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="" target="_blank">
</head>
<body>
    <!-- 跳转起始位置 -->
    <a href="#book">点击跳转</a>
    <!-- 添加一个盒子模型用来隔开跳转起始位置和跳转末位置 -->
    <div style="height: 5000px;"></div>
    <!-- 将要跳转到的位置 -->
    <h1 id="book">跳转到这</h1>
    <!-- 添加一个盒子模型 -->
    <div style="height: 5000px;"></div>
</body>
</html>

四、部分快捷键

Ctrl+s:保存                        Ctrl+c:复制                          Ctrl+v:粘贴

Ctrl+f:查找                        Ctrl+z:返回上一步                Ctrl+y:返回下一步

五、部分特殊符号

注册商标 &reg;        空格 &nbsp;        人民币 &yen;        版权 &copy;        摄氏度 &deg;

正负号 &plusmn;     乘号 &times;        除号 $divide;        平方2 &sup2;      平方3 &sup2;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p>&reg;</p>
    <p>&nbsp;</p>
    <p>&yen;</p>
    <p>&copy;</p>
    <p>&deg;</p>
    <p>&plusmn;</p>
    <p>&times;</p>
    <p>&divide;</p>
    <p>&sup2;</p>
    <p>&sup3;</p>
    
</body>
</html>

六、列表

1. 无序列列表

ul中type类型有：

（1）circle：空心圆

（2）disc：实心圆（默认）

（3）square：小方块

（4）none：去掉li标签前面的点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul type="">
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>
    
</body>
</html>

2. 有序列列表

各属性作用：（如果没有定义，默认以数字1开始）

start 表示开始的数

type 表示序号的类型：1 / A / a / I(罗马数字大写) / i（罗马数字小写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ol type="" start="">
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ol>
    
</body>
</html>

3. 自定义列表

dl列表有语义化，dt表示标题，dd表示内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dd>内容</dd>
    </dl>
    
</body>
</html>

七、charset编码

UTF-8 通用字符集

ASCII 美国信息交换标准代码

Unicode 韩文/日文

gbk/gb2312 中文

big5 繁体

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值