HTML前端从零开始

Fᴏʀ ʏ꯭ᴏ꯭ᴜ꯭.2025-01-10 10:47

第一天

HTML部分

什么是HTML

HTML（Hypertext Markup Language）超文本标记语言。HTML是万维网的基石。

超：

  1. 超字第一层意义是指最重要的标签，超链接标签

  2. 超越文本的意思

HTML的发展历程

HTML1990年出现，web之父Tim Berners-Lee发布了《HTML标签》 的论文，借用SGML的标记语法。

主要的目标是解决互联网的数据传输问题。

环境搭建

  • 开发环境：只要能编写代码的工具、vscode、webstorm、hbuilder等等

  • 运行环境：谷歌浏览器（chrome）Google Chrome 网络浏览器

第一个页面

页面的"hello world"

  1. 创建页面的时候，后缀名必须是.html

  2. 文件名称建议是英文名称

  3. 创建文件的方式非常多，可以手动创建

编写HTML页面的一些细节问题

  1. 所有的标签都是成对出现（由开始和结束标签组成）

  2. DOCTYPE 文档声明，作用就是告诉浏览器需要以哪个标准来渲染这个页面

    复制代码 
    <!DOCTYPE html>

  3. html不区分大小写

  4. html标签是html页面的跟标签，head和body标签

  5. head部分不可见，但是定义页面的各种属性，body部分就是课件区域

    完整的网页结构

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <title>这个是我的一个页面</title>
        <meta charset="utf-8" >
    </head>
    <body>
        这个是一段问题
        <p>这个是一段问题</p>
    </body>
</html>

嘱咐一句：一定要保存再运行！！！！

vs code静态WEB服务器插件安装

查找到之后，点击安装即可【install】。之后重启，右键，点击对应的功能即可。

使用静态WEB服务器，以文件夹的形式弄，不要打开一个独立页面，不然会报错：

使用工具快速生成页面模板：

新建的.html文件中，输入!或者html:5

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    
</body>
</html>

常见的网页标签

网页标签100多个，但是不用慌，常用的也就是20来个，名称也都比较简单，学习起来非常方便。

  • p 段落标签，一段是一个内容，段落之间存在间隙

  • hn（1~6）标题标签

  • br 换行标签

  • 文本修饰标签（加粗、加斜、加下划线、中划线等等效果）

  • 加粗 strong/b

  • 加斜 em/i

  • 下划线 u

  • 中划线 del

  • sub、sup

  • 标准块标签 div

  • 标准行内标签 span

标签的分类

标签的表现形式，可以将标签分为两大类：

  • 行内标签（inline）

    行内标签没有宽高，没有大小，行内标签不会自己占据一行，包裹的内容多大，它就多大。

  • 块标签（block）

    块标签存在宽高，意味着存在大小，块标签默占据一行。即便是调整了它的宽，也不会允许其他标签占据

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的页面标签</title>
    <style>
        div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h2>标题标签</h2>
    <p>段落标签</p>
    <p>
        <strong style="border: 1px solid red;width: 500px;">中国疾控中心</strong>监测结果显示，<b>全国流感病毒</b>阳性率快速上升，当前流感病毒
         <i>99%</i>以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、 <em>全身肌肉酸痛</em>、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
    </p>
    <p>
       <u> 发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛</u>、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
        发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
        染甲流后什么情况要就医？更多↓↓转需！
    </p>
    <p>
        <del>发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛</del>  、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
        <h1 style="border: 1px solid red;width: 500px;">发热、寒战、咳嗽、咽痛、头痛</h1>
        、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
        发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……
        <span style="color: red;">感染了甲流</span>
        会有什么症状？甲流和普通感冒有什么区别？感
    </p>
    <p>
        a^2 = 9 <br>
        a <sup>2</sup> = 9 <br>
        a<sub>2</sub> = 100
    </p>
​
    <div>
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
    </div>
    <div>
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
    </div>
    <div>
        中国疾控中心监测结果显示，全国流感病毒阳性率快速上升，当前流感病毒99%以上为甲型H1N1流感亚型。
发热、寒战、咳嗽、咽痛、头痛、全身肌肉酸痛、乏力……感染了甲流会有什么症状？甲流和普通感冒有什么区别？感染甲流后什么情况要就医？更多↓↓转需！
    </div>
    
</body>
</html>

媒体标签

媒体标签，就是多媒体标签，存在如下三种：

  • 图片标签

  • 视频标签

  • 音频标签

图片标签

图片标签，就是用来展示图片的标签，<img>标签就是图片标签。

必须存在某张图片，才能够展示图片。

属性：属性就是标签的属性，一般以键值对形式在标签的开始部分存在

复制代码 
<div id="box" name=”ljh“ title="呵呵呵">
</div>
id,name,title都是div标签的属性

img的属性：

  • src

  • alt

  • title

复制代码 
<h2>图片标签</h2>
<!-- 
    图片的地址：
        网络地址：推荐使用
        本地地址：
            相对路径：推荐使用
            绝对路径：不推荐
 -->
 <!-- 网络路径 -->
<img style="width: 400px;" src="https://picx.zhimg.com/v2-a096c2cd85dfcecba81581f6bfad8411_r.jpg?source=2c26e567" alt="">
​
<!-- 本地的绝对路径 -->
<img style="height: 200px;" src="D:\picture\dog.jpg" alt="">
​
<!-- 本地的绝对路径 -->
<img style="height: 200px;" src="./img/dog.jpg" alt="">
<img style="height: 200px;" src="img/dog.jpg" alt="这个是个可爱的小狗狗" title="这个是小狗狗的图片">
视频音频标签

视频和音频标签，早期存在很多兼容性问题，H5标准规定了视频和音频标签：

  • video

  • audio

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>图片标签</h2>
    <!-- 
        图片的地址：
            网络地址：推荐使用
            本地地址：
                相对路径：推荐使用
                绝对路径：不推荐
     -->
     <!-- 网络路径 -->
    <img style="width: 400px;" src="https://picx.zhimg.com/v2-a096c2cd85dfcecba81581f6bfad8411_r.jpg?source=2c26e567" alt="">
​
    <!-- 本地的绝对路径 -->
    <img style="height: 200px;" src="D:\picture\dog.jpg" alt="">
​
    <!-- 本地的绝对路径 -->
    <img style="height: 200px;" src="./img/dog.jpg" alt="">
    <img style="height: 200px;" src="img/dog.jpg" alt="这个是个可爱的小狗狗" title="这个是小狗狗的图片">
​
    <!-- 分割线标签 -->
    <hr>
​
    <h2>视频标签</h2>
    <video style="width: 700px;" controls autoplay muted
     src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></video>
​
     <hr>
     <audio controls src="E:\videos\python\9.11西工商\48_第八章_IO流入门和字符输入流.mp4"></audio>
​
​
</body>
</html>

超链接标签

超链接标签非常重要，主要是用来实现页面跳转。

a标签。

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <p>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.taobao.com" target="_self">淘宝</a>
        <a href="http://www.jd.com" target="_blank">京东</a>
​
        <hr>
​
        <a href="./常见的页面标签.html">本地的一个页面</a>
​
        <hr>
        <!-- 
            href不写不行
            href为空，则默认是当前路径（url）
        -->
        <a href="#">本地的一个页面</a>
    </p>
</body>
</html>

锚点功能：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id="top">
        <a href="#footer">到尾部</a>
        <a href="#content">到中间</a>
​
    </div>
    <div id="content">中间</div>
    <div id="footer">尾部</div>
</body>
</html>

表格标签

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>用户信息</h1>

​

<table border="1" cellpadding="0" cellspacing="0">

<tr>

<td>用户姓名</td>

<td>用户性别</td>

<td>用户年龄</td>

<td>用户电话</td>

<td>操作</td>

</tr>

​

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

</table>

​

<h1>单元格合并</h1>

<table border="1" cellpadding="0" cellspacing="0" width="800">

<tr>

<td>用户姓名</td>

<td>用户性别</td>

<td>用户年龄</td>

<td>用户电话</td>

<td>操作</td>

</tr>

​

<tr>

<td>zhangsan</td>

<td>男</td>

<td rowspan="3">40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td>zhangsan</td>

<td>男</td>

<td>40</td>

<td>110</td>

<td>

<a href="#">删除</a>

<a href="#">修改</a>

</td>

</tr>

<tr>

<td colspan="5">总结：xxx人</td>

</tr>

</table>

</body>

</html

表格中的一些标签

  • table

  • tr （table row）

  • td (table data cell)

  • thead

  • tbody

  • th(不推荐使用)，设置表头部分的

表格的合并单元格

和表格布局

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        meta表示是不可见标签
        主要作用是用来修改页面属性
        如：页面的编码
        ……
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签及表格布局</title>
</head>
<body>
    <h2>用户信息</h2>
​
    <table border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户昵称</th>
                <th>用户年龄</th>
                <th>用户性别</th>
                <th>用户邮箱</th>
                <th>用户电话</th>
                <th>用户操作</th>
            </tr>
        </thead>
​
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>法外狂徒</td>
                <td>18</td>
                <td rowspan="3">男</td>
                <td>110@qq.com</td>
                <td>110</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>法外狂徒2</td>
                <td>20</td>
                <td>男</td>
                <td>120@qq.com</td>
                <td>120</td>
                <td>
                    <a href="#">用户修改</a>
                    <button>用户删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="9">
                    总计：共xxxx人，xxxxxx
                </td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

语义化标签

H5提出的新特性，语义化的概念------正确的标签干正确的事。

定义大量望名而知其意标签来包裹内容，如地址，不在使用div，而是使用address，导航，也不再使用div，而是nav，文章使用article。

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
        }
        .top {
            height: 300px;
            border: 1px solid red;
        }
        .content {
            height: 2000px;
            border: 1px solid red;
        }
        .footer {
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- <div class="top">
​
    </div>
    <div class="content">
​
    </div>
    <div class="footer">
​
    </div> -->
​
    <header class="top">
​
    </header>
​
    <section class="content">
​
​
    </section>
​
    <footer class="footer">
​
        <address>
            西安鸥鹏互联：融鑫路xxx号，太白南路地铁口。
        </address>
    </footer>
</body>
</html>

列表标签

  • 有序列表

  • 无序列表

  • 数据列表

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        ol, ul {
            list-style: none;
            list-style-image: url(img/point.png);
        }
         
    </style>
</head>
<body>
​
    <h1>有序列表</h1>
    <ol>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
        <li>蔬菜的进城之旅 南宁“菜篮子”公交专线暖心升级</li>
    </ol>
​
    <h1>无序列表</h1>
    <ul>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
        <li>南宁“菜篮子”公交专线暖心升级</li>
    </ul>
​
    <h2>数据列表</h2>
    <dl>
        <dt>国内新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
​
        <dt>火星新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
​
        <dt>国外新闻</dt>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
        <dd>南宁“菜篮子”公交专线暖心升级</dd>
    </dl>
    
</body>
</html>
相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示