html语法笔记 - 技术栈

1.基础语法

1.1 编码(head)

html 复制代码

<meta charset="UTF-8">

1.2 title(head)

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

标签页名:Title

1.3 标题(body)

html 复制代码

<h1>1级标题</h1>

html 复制代码

<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

1.4 div和span

html 复制代码

<div>内容</div>

<span>内容</span>

div,一人占一整行(块级标签)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>详细信息</h1>
    <div>abcdef</div>
    <div>abcdef</div>
</body>
</html>

span,有多大占多大(行内标签,内联标签)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>详细信息</h1>
    <span>abcdef</span>
    <span>abcdef</span>
</body>
</html>

1.5 超链接

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>详细信息</h1>
    <span>abcdef</span>
    <span>abcdef</span>
    <a href="https://www.chinaunicom.com.cn/?t=1767950756537">点击跳转</a>
</body>
</html>

点击href中包含的地址跳转到对应地址,此处跳转到联通

此时是将自己的标签页替换为联通

若跳转需新开标签页,在a标签中加上参数 target="_blank"

html 复制代码

    <a href="https://www.chinaunicom.com.cn/?t=1767950756537" target="_blank">点击跳转</a>

出现两个标签页

1.6 引入图片

html 复制代码

<img src="图片地址" />

有两种引用方式

1.引用别人图片地址 (src中填图片地址)

html 复制代码

<img src="https://www.news.cn/politics/leaders/20260105/2638db8316124ec6945c974c7de811c3/8ypYLevkF4TrnEtp.jpg">

2.本地创建目录static,引用本地图片(src中引用static目录)

html 复制代码

        <img src="/static/handsome.jpg">

设置图片的高度和宽度设置像素点或百分比

html 复制代码

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

根据宽度比例自动缩放

html 复制代码

<img style="width:5%" src="/static/handsome.jpg">

1.7 嵌套

块中包含图片和链接;让一个div中包含a标签和img标签

html 复制代码

<div>
    中国联合网络通信集团有限公司（简称"中国联通"）在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系，在2025年《财富》世界500强中位列第269位。作为支撑党政军系统、各行各业、广大人民群众的基础通信企业，中国联通在国民经济中具有基础性、支柱性、战略性、先导性的基本功能与地位作用，具有技术密集、全程全网、规模经济、服务经济社会与民生的特征与属性。
    <a href="https://www.chinaunicom.com.cn/?t=1767950756537">点击跳转</a>
    <img style="width: 5%" src="https://www.news.cn/politics/leaders/20260105/2638db8316124ec6945c974c7de811c3/8ypYLevkF4TrnEtp.jpg">
</div>

案例:商品列表

点击图片跳转链接(a标签嵌套img标签)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>商品列表</h1>

<a href="https://www.vmall.com/product/comdetail/index.html?prdId=10086518319242&sbomCode=2701010122601" target="_blank">
    <img src="/static/a1.png"   style="width: 150px">
</a>

<a href="https://www.vmall.com/product/comdetail/index.html?prdId=10086476013098&sbomCode=2601010586422" target="_blank">
    <img src="/static/a2.png"   style="width: 150px">
</a>

<a href="https://www.vmall.com/product/comdetail/index.html?prdId=10086838189168&sbomCode=2601010588032" target="_blank">
    <img src="/static/a3.png"   style="width: 150px">
</a>

</body>
</html>

1.8 列表

1.无序列表<ul> 列表项<li>

html 复制代码

    <h1>运营商列表</h1>
    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>

2.有序列表<ol> 列表项<li>

html 复制代码

    <h1>运营商列表</h1>
    <ol>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ol>

待续...