HTML基础（html基础框架）

25-02-27 15

最近很多小伙伴都在问HTML基础和html基础框架这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展1、HTML基础学习第一天_html/css_WEB-ITnose、HTML+CS

最近很多小伙伴都在问HTML基础和html基础框架这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展1、HTML基础学习第一天_html/css_WEB-ITnose、HTML+CSS复习之HTML基础篇、HTML/CSS从零开始-HTML基础(一)、HTML之元素分类（HTML基础知识）等相关知识，下面开始了哦！

本文目录一览：

HTML基础（html基础框架）
1、HTML基础学习第一天_html/css_WEB-ITnose
HTML+CSS复习之HTML基础篇
HTML/CSS从零开始-HTML基础(一)
HTML之元素分类（HTML基础知识）

HTML基础（html基础框架）

页面结构相关的系统标签
1.页面根标签：<html></html>
2.页面头标签：<head></head>
3.页面体标签：<body></body>
4.页面标题标签：<title></title>
5.元标签：<Meta >
6.链接标签：<link >
7.样式标签：<style></style>
8.脚本标签：<script></script>

简单的系统标签
1.标题标签：<h1></h1> ....<h6></h6>
2.段落标签：<p></p>
3.换行标签：<br >
4.分割线标签：<hr >
5.行文本标签：<span></span>
6.斜体标签：<i></i>
7.加粗标签：<b></b>
8.图片标签：<img src="图片源" alt="图片加载失败显示内容">
9.超链接标签：<a href="链接地址"></a>
10.架构标签：<div></div>

复杂的系统标签
1.无序列表标签：<ul><li></li></ul>
2.表格标签：<table>包含大量的表格子标签</table>
    每一行用<tr></tr>标签包裹
    tr标签中th标签表示标题单元格
            td标签标识内容单元格
3.表单标签：<form action="表单数据提交的后台地址" method="提交方式"></form>

<!DOCTYPE html>
<!-- 文档指令，建议出现在html的最上方，一个文档只出现一次，标识该文档用html5语法进行编写-->
<html lang="en">
<!-- 页面根标签的开始，一个html文件只出现一次 -->
<!-- lang属性表示的是浏览器解析文件的语言，en代表英语，浏览器就会提示翻译 -->
<head>
<!-- 页面头标签的开始，一个html文件只出现一次   -->
    <Meta charset="UTF-8">
<!-- 单标签 可以指定文件编码   -->
    <title>Title</title>
<!-- 页面标题标签，用来在浏览器中显示页面标题   -->
    <link rel="icon" href="">
<!-- 设置页面标签图标   -->
    <link rel="stylesheet" href="">
<!--  用来连接外联式的css样式标签  -->
    <style></style>
<!--  用来存放内联式css样式标签  -->
    <script></script>
<!-- 用来存放出现在head中的JavaScript脚本代码标签   -->
</head>
<body>
<!-- 网页中所有展示给用户看的标签及内容存放在这里：普通文本、音频 -->
<!-- 页面中不给用户产看的内容也写在这：如结构标签或者是隐藏的标签 -->
</body>
<!-- 代表页面体的结束，这里一般不写标签，但是这里写的标签都会被放到body中的最后一个-->
</html>

页面结构相关

h1 - h6 标签
<h1>在页面上显示一级标题</h1>
        ......
<h6>在页面上显示六级标题</h6>
p标签
<p>一个页面显示的文本段落放在一个p标签中</p>
br标签
<br> 换行
hr标签
<hr> 分隔线
span标签
<span>普通的文本内容</span>
图片标签
<img src="" alt="" title="">
<!-- src中写的是链接：可以是本地地址，也可以是网络地址 -->
<!-- alt 中写的是加载图片失败后返回的信息 -->
<!-- title 中写的是鼠标放在上面显示的信息，基本上能显示内容的标签都可以设置 -->
超链接标签
<a href="https://www.baidu.com">前往百度</a>
<!-- 点一下超链接标签中文字就可以在当前页面中直接跳转-->
<a href="https://www.baidu.com" target="_blank"></a>
<!-- 加上 target="_blank" 可以实现新开一个窗口前往百度-->
<a name="xxx"></a>
<!-- 也可以通过 name 这种方式给页面种下锚点-->
<a href="#xxx"></a>
<!-- 直接用#对应值就可以实现当前页面内的跳转-->
架构标签
<div></div>
<!-- div标签没有具体的语义，主要被用于页面架构的设计-->

简单系统标签

无序列表
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 只需要掌握ul 与li 的嵌套关系即可 -->
<!-- ul 中只能嵌套li标签 li标签中可以嵌套任意标签-->
表格标签
<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>
<!--            <td></td>-->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<!--caption：标签中表示的是表格的标题-->
<!--thead：表示的是表格的头部，中间都是用th标签-->
<!--tbody：表示的是表格身体，中间都是用td标签-->
<!--tfoot：表示的是表格尾部，中间都是用td标签-->
<!--tr：主要用作表格的分行-->
<!--th：标题单元格-->
<!--td：内容单元格-->
注：我们一般都会把thead、tbody、tfoot省略，
    直接用tr、th、td构成表格
想要合并单元格可以直接通过rowspan或者colspan来合并
例如上面直接注掉第二个单元格，把第一个单元格colspan设为2，就显示合并了第一行的一二列单元格
表单标签（重点*****）
<form action="" method="get">
    <label for="">sdasd</label>
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" name="提交">
    <select name="list" id="s1">
        <option value="sss">math</option>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button type="submit" value="提交"></button>
</form>
<!-- 标签部分 -->
1.form 表单标签
2.label 普通文本标签
3.input 输入标签，通过type的值来确定输入的具体是什么类型
4.select 表单中的列表标签，option列表选项标签
5.textarea 文本域标签
6.button 按钮标签
<!-- form全局属性 -->
1.action：提交表单数据给后台的地址
2.method：提交数据的方式(get或post)
3.enctype：提交数据的编码格式
<!-- form子标签全局属性 -->
1.type：标签的类型
2.name：将该标签提交给后台表示数据的key，不设置name的标签内容无法提交
3.value：将该标签提交给后台的数据，用户自己输入的可以不设置
<!-- input标签type属性值的分类 -->
1.text：普通文本输入框
2.password：密文文本输入框
3.radio：单选框
4.checkBox：复选框
5.file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表可以选取文件提交给后台
6.submit：提交表单信息给后台，用value设置提交按钮的显示内容
<!-- button标签type属性值与分类-->
1.button：普通的按钮
2.reset：重置按钮，默认点击后会还原表单的所有操作
3.submit：提交按钮

复杂系统标签

转义字符

像后台开发语言的特殊字符\n一样，会被解析为换行，

html5中也有很多特殊字符数字的组合会被解析为特殊含义。

格式：  (&和; 中间加上字符)

1.空格： 

2.字符‘‘："

更多字符转换：http://tool.oschina.net/commons?type=2

指令

被<>包裹，以！开头的特殊符号，称之为指令

指令中不区分大小写，前端需要掌握两个指令

1.文档指令

　　<!doctype html>

2.注释指令

1、HTML基础学习第一天_html/css_WEB-ITnose

1、基本标签属性

 1 <html> 2 <!--属性和属性值对大小写不敏感。 3 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。 4 而新版本的 (X)HTML 要求使用小写属性。 5  --> 6  7 <body> 8  9 <!-- hello this is a comment-->10 11 <h1 align="left">This is heading 1</h1>12 <h2 align="center">This is heading 2</h2>13 <h3 align="right">This is heading 3</h3>14 <h4>This is heading 4</h4>15 <h5>This is heading 5</h5>16 <h6>This is heading 6</h6>17 18 <hr><!--绘制水平线-->19 20 <a href="http://www.baidu.com"> link_baidu </a>21 22 <br>23 <body bgcolor="#e6e6e6">24 25 26 <p> this is paragraph 1 </p>27 <p> this is paragraph 2 </p>28 <p> this is paragraph 3 </p>29 30 <img  src="/i/eg_w3school.gif"/ alt="1、HTML基础学习 第一天_html/css_WEB-ITnose" >31 <img  src="/i/eg_w3school.gif"/ alt="1、HTML基础学习 第一天_html/css_WEB-ITnose" >32 <br/>33 <br/>34 <br/>35 36 37 normal38 <br/>39 <b> bold </b>40 <br/>41 <strong> strong </strong>42 <br/>43 <big> big font </big>44 <br/>45 <small> small font </small>46 <br/>47 <i> italic font </i>48 <br/>49 what''s the  <sub> fuck </sub>50 <br/>51 what''s the  <sup> fuck </sup>52 <br/>53 <i> what''s the  <sup> fuck </sup> </i>54 55 <p>pre 标签很适合显示计算机代码：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>56 57 <pre>58 for i = 1 to 1059      print i60 next i61

登录后复制

62 63 64

2、始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

3、h标签只用于标题

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

4、HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签

5、
还是

您也许发现
与
很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使
在所有浏览器中的显示都没有问题，使用
也是更长远的保障。

6、计算机输出标签

 1 <br /> 2 Computer code  3 <br /> 4 <kbd>Keyboard input </kbd> 5 <br /> 6 <tt>Teletype text </tt> 7 <br /> 8 <samp>Sample text</samp> 9 <br />10 <var>Computer variable</var>11 <br />

登录后复制

7、地址输入

1 <address>2 Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 3 Visit us at:<br>4 Example.com<br>5 Box 564, Disneyland<br>6 USA7 </address>

登录后复制

8、文字方向

<p>如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；</p><bdo dir="rtl">Here is some Hebrew text</bdo>

登录后复制

9、块引用

 1 这是长的引用： 2 <blockquote> 3 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 4 </blockquote> 5  6 这是短的引用： 7 <q> 8 这是短的引用。 9 </q>10 11 <p>12 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。13 </p>

登录后复制

10、格式化总结

文本格式化标签

标签	描述
	定义粗体文本。
	定义大号字。
	定义着重文字。
	定义斜体字。
	定义小号字。
	定义加重语气。
	定义下标字。
	定义上标字。
	定义插入字。
	定义删除字。
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签	描述
	定义计算机代码。
	定义键盘码。
	定义计算机代码样本。
	定义打字机代码。
	定义变量。
登录后复制	定义预格式文本。
	不赞成使用。使用代替。登录后复制登录后复制登录后复制
</plaintext></p></td> <td> <p>不赞成使用。使用 </p> <div><div><div><pre> 代替。</pre><div>登录后复制</div></div><div>登录后复制</div></div><div>登录后复制</div></div> </td> </tr> <tr> <td> <p></p> <xmp></xmp> </td> <td> <p>不赞成使用。使用 </p> <div><div><div><pre> 代替。</pre><div>登录后复制</div></div><div>登录后复制</div></div><div>登录后复制</div></div> </td> </tr> </table> <p>引用、引用和术语定义</p> <table> <tr> <td><p><strong>标签</strong></p></td> <td><p><strong>描述</strong></p></td> </tr> <tr> <td><p><abbr></abbr></p></td> <td><p>定义缩写。</p></td> </tr> <tr> <td><p><acronym></acronym></p></td> <td><p>定义首字母缩写。</p></td> </tr> <tr> <td> <p></p> <address></address> </td> <td><p>定义地址。</p></td> </tr> <tr> <td><p><bdo></bdo></p></td> <td><p>定义文字方向。</p></td> </tr> <tr> <td> <p></p> <blockquote></blockquote> </td> <td><p>定义长的引用。</p></td> </tr> <tr> <td><p><q></q></p></td> <td><p>定义短的引用语。</p></td> </tr> <tr> <td><p><cite></cite></p></td> <td><p>定义引用、引证。</p></td> </tr> <tr> <td><p><dfn></dfn></p></td> <td><p>定义一个定义项目。</p></td> </tr> </table> <p></p> <p></p> <p> </p> <p></p> <p></p> <p> </p> <p></p> <p></p> </div> </div> <!-- <div> <div></div> <button type="button"> 没有解决问题？点击使用智能助手 </button> <div></div> </div> --> <div> <div> <atarget="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)" > <img src="https://img.php.cn/upload/Recdownload/000/000/085/66723a3016a41308.jpg"alt="HTML速学教程(入门课程)"> </a> <div> <atarget="_blank" rel="nofollow" title="HTML速学教程(入门课程)" href="https://pan.quark.cn/s/f4eedefabd61">HTML速学教程(入门课程)</a> <p>HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！</p> </div> </div> <atarget="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML速学教程(入门课程)"> 下载 </a> </div> <div> </div> <div> <div>来源：php中文网</div> </div> <div> <adata-id="269411"> <img src="/static/lhimages/shoucang_2x.png"> <span>收藏</span> </a> <adata-id="269411"> <img src="/static/images/images/icon37.png"> <span>点赞</span> </a> </div> <div> <a href="/faq/269410.html"> <span>上一篇：DIV+CSS 网页布局之：两列布局_html/css_WEB-ITnose</span> </a> <a href="/faq/269412.html"> <span>下一篇：DIV+CSS 网页布局之：三列布局_html/css_WEB-ITnose</span> </a> </div> <div> <img src="/static/images/images/benzhanshengming.png" /> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div> <div> <div>作者最新文章</div> <ul> <li> <div> <span></span> word在中间插字就会消失一个字怎么办 </div> <div>2024-07-17 21:28:11</div> </li> <li> <div> <span></span> 微信怎么注销微信支付微信注销微信支付的方法 </div> <div>2024-07-16 10:20:46</div> </li> <li> <div> <span></span> 惠普强势登陆2024德鲁巴印刷展与Canva可画达成全球合作 </div> <div>2024-05-29 08:13:13</div> </li> <li> <div> <span></span> 《鸣潮》卡卡罗角色攻略 </div> <div>2024-05-25 09:37:24</div> </li> <li> <div> <span></span> 华硕bios升级中途关机没法开机了？ </div> <div>2024-05-24 20:31:46</div> </li> <li> <div> <span></span> ps怎么调亮背光图片 ps调亮背光图片教程 </div> <div>2024-05-11 10:28:35</div> </li> <li> <div> <span></span> win10启动项开启方法 </div> <div>2023-12-29 17:08:12</div> </li> <li> <div> <span></span> 全新雷克沙ARES电竞超频内存来了，打造极致体验 </div> <div>2023-12-15 19:23:35</div> </li> <li> <div> <span></span> PHP中如何处理缓存错误？ </div> <div>2023-12-02 11:08:01</div> </li> <li> <div> <span></span> 如何在MongoDB中实现数据的备份和恢复功能 </div> <div>2023-09-19 16:27:31</div> </li> </ul> </div> <divdata-id="156"></div> <div> <div>最新问题</div> <div> <div> <div> 按照老师的方法不传值给TP6后台，再接收参数。出现以下错误。怎么办 http://localhost/index.php/admin/index/userliste 的远程资源。（原因：CORS 头缺少 'Access-Control-Al... <div> <div> <span>凡人来自于2024-07-09 15:20:49</span> </div> <div> <img src="/static/images/images/icon37.png">1 <img src="/static/images/images/icon24.png">39 <img src="/static/images/images/icon43.png">1634 </div> </div> </div> </div> <div></div> <div> <div> 请问写php项目都要用到git吗请问写php项目都要用到git吗 <div> <div> <span>PHP中文网用户-4202961来自于2024-06-11 14:28:59</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">57 <img src="/static/images/images/icon43.png">2262 </div> </div> </div> </div> <div></div> <div> <div> 请问能提供下源码么请问能提供下源码么？想对照着看 <div> <div> <span>周珂儿来自于2024-06-06 08:56:32</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">47 <img src="/static/images/images/icon43.png">2004 </div> </div> </div> </div> <div></div> <div> <div> 为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容 <div> <div> <span>许飞来自于2024-06-02 14:41:32</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">50 <img src="/static/images/images/icon43.png">1574 </div> </div> </div> </div> <div></div> <div> <div> 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat <div> <div> <span>会飞的汤姆来自于2024-05-28 03:09:58</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">47 <img src="/static/images/images/icon43.png">2127 </div> </div> </div> </div> <div></div> <div> <div> function_exists()无法判定自定义函数 function test()    {        return true;    }&nbsp... <div> <div> <span>凡人来自于2024-04-29 11:01:01</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">64 <img src="/static/images/images/icon43.png">3029 </div> </div> </div> </div> <div></div> <div> <div> google 浏览器手机版显示的怎么实现老师您好，google 浏览器怎么变成手机版样式的？ <div> <div> <span>艾尼宛尔.亚森来自于2024-04-23 00:22:19</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">51 <img src="/static/images/images/icon43.png">2764 </div> </div> </div> </div> <div></div> <div> <div> 子窗口操作父窗口，输出没反应前两句可执行，最后一句没法应 <div> <div> <span>P粉722478067来自于2024-04-19 15:37:47</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">49 <img src="/static/images/images/icon43.png">2579 </div> </div> </div> </div> <div></div> <div> <div> 父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb... <div> <div> <span>P粉722478067来自于2024-04-18 23:52:34</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">47 <img src="/static/images/images/icon43.png">2433 </div> </div> </div> </div> <div></div> <div> <div> 关于CSS思维导图的课件在哪？课件 <div> <div> <span>凡人来自于2024-04-16 10:10:18</span> </div> <div> <img src="/static/images/images/icon37.png">0 <img src="/static/images/images/icon24.png">46 <img src="/static/images/images/icon43.png">2318 </div> </div> </div> </div> <div></div> </div> </div> <div> <div> <div>相关专题</div> <a href="/faq/zt" target="_blank">更多> </a> </div> <div> <ul> <li> <img src="https://img.php.cn/upload/subject/202409/09/2024090917102993564.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>打电话铃声对方不响什么原因</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/09/2024090917083926696.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>蓝牙连上没有声音是哪里的问题</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090617474350514.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>a5是几寸</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090617405059370.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>中国电信怎么查询话费余额</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090617160187945.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>java三大体系分别是什么</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090617120135562.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>笔记本可以连接手机热点上网吗</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090617060514251.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>系统禁止安装软件怎么解除</span> </li> <li> <img src="https://img.php.cn/upload/subject/202409/06/2024090616592467288.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> <span>华为直营店和授权店有哪些区别</span> </li> </ul> </div> </div> <div></div> </div> </div> <div> <div> <div><ahref="https://teacher.php.cn/jump/68" title="华纳云服务器5M 20元起" rel="nofollow" target="_blank"><imgsrc="https://img.php.cn/teacher/course/20240523/8e6f3e43363dca642ef6e9ae657c3ab6.gif" alt="华纳云服务器5M 20元起"></a><span>广告</span></div> <!-- --> </div> <div> <div>热门推荐</div> <div> <ul> <li> <div> <span></span> <ahref="/faq/916557.html">html表单文件上传下载</a> </div> </li> <li> <div> <span></span> <ahref="/faq/916556.html">h5是什么文件？H5是什么格式？</a> </div> </li> <li> <div> <span></span> <ahref="/faq/916555.html">h5页面和web页面怎么做方法</a> </div> </li> <li> <div> <span></span> <atarget="_blank" rel="nofollow" href="https://pan.quark.cn/s/f4eedefabd61" title="HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！"><b>HTML速学教程(入门课程)</b></a> </div> </li> </ul> </div> </div> <div> <!----> </div> <div> <div><ahref="https://teacher.php.cn/jump/67" title="开源免费商场系统" rel="nofollow" target="_blank"><imgsrc="https://img.php.cn/teacher/course/20220930/8ef7a4a308a22ece023e77e5428c0e25.png" alt="开源免费商场系统"></a><span>广告</span></div> </div> <div> <div> <div>热门教程</div> <a target="_blank" href="https://www.php.cn/k.html">更多> </a> </div> <div> <div> <divdata-id="one">相关推荐 <div></div></div> <divdata-id="two">热门推荐<div></div></div> <divdata-id="three">最新课程<div></div></div> </div> <ul> <li> <a target="_blank" href="/course/631.html" title="ThinkPHP5快速开发企业站点[全程实录]"> <img src="https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png" alt="ThinkPHP5快速开发企业站点[全程实录]"/> </a> <div> ThinkPHP5快速开发企业站点[全程实录] <div> <div >386609次学习</div> <adata-id="631"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/332.html" title="Thinkphp3.2.3个人博客开发"> <img src="https://img.php.cn/upload/course/000/000/068/6253d96e5aaaf629.png" alt="Thinkphp3.2.3个人博客开发"/> </a> <div> Thinkphp3.2.3个人博客开发 <div> <div >205210次学习</div> <adata-id="332"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1475.html" title="PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）"> <img src="https://img.php.cn/upload/course/000/000/001/63885f486655e517.png" alt="PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）"/> </a> <div> PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6） <div> <div >38702次学习</div> <adata-id="1475"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> </ul> <ul> <li> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div> 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) <div> <div >1399963次学习</div> <adata-id="812"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/> </a> <div> phpStudy极速入门视频教程 <div> <div >516812次学习</div> <adata-id="639"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/> </a> <div> 独孤九贱(4)_PHP视频教程 <div> <div >1202474次学习</div> <adata-id="379"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/> </a> <div> PHP实战天龙八部之仿爱奇艺电影网站 <div> <div >746676次学习</div> <adata-id="801"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg" alt="独孤九贱(1)_HTML5视频教程"/> </a> <div> 独孤九贱(1)_HTML5视频教程 <div> <div >599544次学习</div> <adata-id="372"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> </ul> <ul> <li> <a target="_blank" href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）"> <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/> </a> <div> 支付宝沙箱支付（个人也能用的支付） <div> <div >189次学习</div> <adata-id="1654"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程"> <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/> </a> <div> 麻省理工大佬Python课程 <div> <div >4414次学习</div> <adata-id="1650"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1649.html" title="Swoole5 Hyperf3 php8新版本协程框架讲说"> <img src="https://img.php.cn/upload/course/000/000/067/6641ad56af4c9674.png" alt="Swoole5 Hyperf3 php8新版本协程框架讲说"/> </a> <div> Swoole5 Hyperf3 php8新版本协程框架讲说 <div> <div >4753次学习</div> <adata-id="1649"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1648.html" title="【web前端】Node.js快速入门"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入门"/> </a> <div> 【web前端】Node.js快速入门 <div> <div >3054次学习</div> <adata-id="1648"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1647.html" title="国外Web开发全栈课程全集"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="国外Web开发全栈课程全集"/> </a> <div> 国外Web开发全栈课程全集 <div> <div >2378次学习</div> <adata-id="1647"><img src="/static/images/images/icon-small-nocollect.png">收藏</a> </div> </div> </li> </ul> </div> </div> <div> </div> <div> <div> <div>最新下载</div> <a href="/xiazai">更多> </a> </div> <div> <ul> <li> <a href="/xiazai/code/8435" target="_blank" title="美发工作室宣传网站HTML5模板"> <img src="https://img.php.cn/upload/webcode/000/000/012/172593374490939.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='''';this.src=''/static/images/moren/morentu.png''" alt="美发工作室宣传网站HTML5模板"> </a> </li> <li> <a href="/xiazai/code/8434" target="_blank" title="HTML5房顶安装服务公司网站模板"> <img src="https://img.php.cn/upload/webcode/000/000/015/172593360334764.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='''';this.src=''/static/images/moren/morentu.png''" alt="HTML5房顶安装服务公司网站模板"> </a> </li> <li> <a href="/xiazai/code/8433" target="_blank" title="CSS建筑设计服务公司网站模板"> <img src="https://img.php.cn/upload/webcode/000/000/015/172593360240352.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='''';this.src=''/static/images/moren/morentu.png''" alt="CSS建筑设计服务公司网站模板"> </a> </li> <div></div> </ul> <div></div> </div> <div> <div> <divdata-id="onef">网站特效 <div></div></div> <divdata-id="twof">网站源码<div></div></div> <divdata-id="threef">网站素材<div></div></div> <divdata-id="fourf">前端模板<div></div></div> </div> <ul> <li> <div> <span></span> [表单按钮] jQuery企业留言表单联系代码 </div> </li> <li> <div> <span></span> [播放器特效] HTML5 MP3音乐盒播放特效 </div> </li> <li> <div> <span></span> [菜单导航] HTML5炫酷粒子动画导航菜单特效 </div> </li> <li> <div> <span></span> [表单按钮] jQuery可视化表单拖拽编辑代码 </div> </li> <li> <div> <span></span> [播放器特效] VUE.JS仿酷狗音乐播放器代码 </div> </li> <li> <div> <span></span> [html5特效] 经典html5推箱子小游戏 </div> </li> <li> <div> <span></span> [图片特效] jQuery滚动添加或减少图片特效 </div> </li> <li> <div> <span></span> [相册特效] CSS3个人相册封面悬停放大特效 </div> </li> </ul> <ul> <li> <div> <span></span> [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5 </div> </li> <li> <div> <span></span> [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus </div> </li> <li> <div> <span></span> [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5 </div> </li> <li> <div> <span></span> [Bootstrap模板] 简约简历资料网页模板 Bootstrap4 </div> </li> <li> <div> <span></span> [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE </div> </li> <li> <div> <span></span> [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版 </div> </li> <li> <div> <span></span> [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox </div> </li> <li> <div> <span></span> [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio </div> </li> </ul> <ul> <li> <div> <span></span> [网站素材] 可爱的夏天元素矢量素材(EPS+PNG) </div> </li> <li> <div> <span></span> [网站素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) </div> </li> <li> <div> <span></span> [网站素材] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) </div> </li> <li> <div> <span></span> [网站素材] 金色的毕业帽矢量素材(EPS+PNG) </div> </li> <li> <div> <span></span> [网站素材] 黑白风格的山脉图标矢量素材(EPS+PNG) </div> </li> <li> <div> <span></span> [网站素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) </div> </li> <li> <div> <span></span> [网站素材] 扁平风格的植树节banner矢量素材(AI+EPS) </div> </li> <li> <div> <span></span> [网站素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) </div> </li> </ul> <ul> <li> <div> <span></span> [前端模板] 美发工作室宣传网站HTML5模板 </div> </li> <li> <div> <span></span> [前端模板] HTML5房顶安装服务公司网站模板 </div> </li> <li> <div> <span></span> [前端模板] CSS建筑设计服务公司网站模板 </div> </li> <li> <div> <span></span> [前端模板] 宗教信仰文化教育服务网站模板 </div> </li> <li> <div> <span></span> [前端模板] 网页设计师作品简历展示网站模板 </div> </li> <li> <div> <span></span> [前端模板] 软件开发个人简历展示网页模板 </div> </li> <li> <div> <span></span> [前端模板] HTML5响应式人才机构网站模板 </div> </li> <li> <div> <span></span> [前端模板] HTML5足球运动赛事网站模板 </div> </li> </ul> </div> </div> </div> </div> <!--主体 end--> <!--底部--> <div> <div> <div> <div> <dl> <dt> 关于我们免责申明意见反馈讲师合作广告合作 <!--其他合作--> 最新更新 <div></div> </dt> <dd>php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd> <span> <b></b>关注服务号 <em> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span> <b></b>技术交流群 <em> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div></div> </dd> </dl> <div> <div>app下载</div> <div> <img src="https://www.php.cn/static/images/examples/text14.png"/> <p>扫描下载App</p> </div> </div> </div> <div> <div> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> <div> <span><img src="/static/images/dy.png"/></span> <dl> <dt>PHP中文网抖音号</dt> <dd>发现有趣的</dd> </dl> </div> </div> </div> </div> <div> <div><p>Copyright 2014-2024 https://www.php.cn/ All Rights Reserved \| php.cn \| 湘ICP备2023035733号</p><b></b></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <span></span> <!--底部 end--> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel=''stylesheet'' id=''_main-css'' href=''/static/css/viewer.min.css?2'' type=''text/css'' media=''all''/> <style> .content img{max-width:100%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style> <!--底部浮动层--> <!-- <div> <div> <div></div> <div>登录PHP中文网，和优秀的人一起学习！</div> <div>全站<span>2000+</span>教程免费学</div> <div>微信扫码登录</div> <divonclick="$(''.phpFudong'').hide();"></div> <div></div> </div> </div> --><!--底部浮动层 end--> <!--侧导航--> <style> .layui-fixbar{display: none;} </style> <div> <li> <div> <div> <a href="/k24.html" target="_blank"title="PHP学习"> <b></b> <p>PHP学习</p> </a> </div> </div> </li> <li> <div> <div> <a href="https://www.php.cn/blog/detail/1047189.html" target="_blank"> <b></b> <p>技术支持</p> </a> </div> </div> </li> <li> <div> <div> <a href="#"> <b></b> <p>返回顶部</p> </a> </div> </div> </li> </div> <!--侧导航 end--> <style> .google-cn { position: fixed; bottom: 0; left: 0; width: 200px; max-width: 100%; z-index: 9999; } </style> <div> </div> </body> </html></plaintext></td></tr></tbody></table><p style="text-align: center;"><img src="http://www.gvkun.com/zb_users/upload/2025/02/fe360e06-b980-4bcb-8d57-cce5577c2b921740644117525.jpg" title="HTML+CSS复习之HTML基础篇" alt="HTML+CSS复习之HTML基础篇"></p><h3 class="eye-protector-processed" style="border-top-color: rgba(0, 0, 0, 0.35); border-bottom-color: rgba(0, 0, 0, 0.35);" id="HTML+CSS复习之HTML基础篇">HTML+CSS复习之HTML基础篇</h3><h2 id="item-1">一些说明</h2> <p>写在前面：HTML和CSS，当你了解所有规则后，<strong>你应该多写页面并记录你出现的问题</strong>，这才是学习HTML和CSS的最佳方法</p> <p>这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识</p> <p>我把HTML标签分成两大类，重要的和不重要的，希望大家都能从众多标签中解脱出来！！</p> <p>本文的宗旨，简明扼要！最快入门 HTML (把我给出的代码不断地敲，并且适当加点个性化的东西，HTML标记语言你就入门了)</p> <blockquote><p>温故而知新</p></blockquote> <p>HTML，超文本标记语言（HyperText Markup Language）只是标记，没有任何逻辑，学习起来会很快的</p> <p>结构如下：</p> <pre><code>这里写了可以出现在head内的所有标签 <!DOCTYPE html> //HTML5的文档声明，现在都用这种方式了 <html> //文档的根 <head> //文档的头部信息 <meta charset="utf-8"> //表示该文档是以UTF-8编码的 <title>菜鸟教程(runoob.com)</title> //页面标题 //为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> //为网页定义描述内容: <meta name="description" content="Free Web tutorials on HTML and CSS"> //定义网页作者: <meta name="author" content="Hege Refsnes"> //每30秒中刷新当前页面: <meta http-equiv="refresh" content="30"> <style>a{CSS样式}</style> <link rel="stylesheet" type="text/css" href="xxx.css"> <script>脚本</script> <script type="text/javascript" src="xxxx.js"></script> <noscript></noscript> //该标签作为HTML文档中所有的链接标签的默认链接: <base href="http://www.runoob.com/images/" target="_blank"> </head> <body> //网页主题部分 <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> 关于文档声明：(了解即可，没什么作用) HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre> <p>tips:注释长啥样？<!-- html content--></p> <h2 id="item-2">直击主题：HTML标签</h2> <p>来，我们来看看HTML的标签都有哪些</p> <p><code>h1 ~ h6</code> , <code>p</code> , <code>a</code> , <code>img</code> , <code>button</code> , <code>caption</code> , <code>dd</code> , <code>dl</code> ,<code>dt</code>, <code>ul</code> ,<code>li</code> , <code>fieldset</code> , <code>from</code> , <code>iframe</code> , <code>input</code> ,<code> label</code> , <code>select</code> , <code>table</code> <code>td</code> ,<code>tr</code> , <code>tbody</code> , <code>tfoot</code> , <code>thead</code> ，<code>hr</code> , <code>html</code> , <code>body</code> <code>head</code> <code>title</code> <code>meta</code> <code>style</code> <code>script</code> ,<code>input</code> , <code>label</code> , <code>legend</code> , <code>div</code> , <code>span</code> </p> <p>基本上你只要看到这个标签，懂这个标签一般是怎么用的就OK了！</p> <h3 id="item-2-1">重点掌握的标签有（一些特别基础性的标签不在此之内）</h3> <blockquote><p><strong>超链接标签a：只要是a标签能包含啥，那个被包含的都是超链接</strong></p></blockquote> <p>a的常用方法如下：</p> <pre><code>1、<a href = "http://xxxx.xxx" target="_blank"> 2、电子邮件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 3、取消链接 <a href="javascript:void(0)"> 4、锚点 <a href="#tips">可以链接到本页面id为tips的元素，用于页面内跳转 <a href="javascript:void(0)">hello</a> </code></pre> <blockquote><p><p><strong>图像标签img:</strong></p></p></blockquote> <pre><code>img[src,title,alt,width,height] <img src="xxxx.png" width=300 height=200 title="pic" alt="person"> alt : 当图片无法加载时替代图片，一般都要写的 1、图片一个特殊用处(结合map,基本不用) <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </code></pre> <blockquote><p><p><strong>表格</strong></p></p></blockquote> <p>一般我们写表格的时候，table>tr>td(th)，采用这三层结构</p> <pre><code>一个完整的表格结构是这样的 <table> <caption></caption> <thead> <tr> <th></th> ..... </tr> </thead> <tbody> <tr> <td></td> ...... </tr> </tbody> <tfoot> <tr> <td></td> ...... </tr> </tfoot> </table> </code></pre> <p><strong>属性注意</strong></p> <pre><code><table border=0> //设置整个table的边框，外框和内框 <table cellpadding="10"> //相当于设置这个表格每个单元格的 padding 为 10px <table cellspacing="10"> //相当于设置这个表格每个单元格的 margin 为 10px <th colspan="2"> // 这个单元格跨了两列 tr也可以用 <th rowspan="2"> //这个单元格跨了两行 tr也可以用</code></pre> <blockquote><p><strong>列表</strong></p></blockquote> <p><strong>有序列表</strong></p> <pre><code><ol> <li></li> <li></li> ... </ol> </code></pre> <p><strong>无序列表</strong></p> <pre><code><ul> <li></li> <li></li> ... </ul> </code></pre> <p>无序列表和有序列表，可以更改前面的标记类型，但是不常用，采用图片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；来设置，这个在CSS学习笔记中会详细说明</p> <p>列表支持嵌套</p> <p><strong>自定义列表</strong></p> <pre><code>dl 注意一个dl里面最好只有一个dt，行业潜规则原意是解释名词， dt 一般一条信息，只解释一个名词,也就是一个dt dd dd dd dl </code></pre> <blockquote><p>div -- 最具有代表性的块级标签</p></blockquote> <p>通常用于布局，很常见的div+css布局，为什么采用div呢？因为div是一个容器元素，div内部可以包含很多标签，<br>div内部可以有div的<br>div是块级标签，注意，任何块级标签写在页面上，宽度都是占据父容器的百分之百，除非你设置块级元素的宽度，具体的怎么排版，请看这篇：HTML+CSS复习之CSS基础篇</p> <blockquote><p>span -- 最具有代表性的行级标签</p></blockquote> <p>span是一个行级标签，所谓行级标签的意思是，内容有多大，我在页面中占据的位置就有多大（内容+padding）</p> <blockquote><p>input --表单</p></blockquote> <p>表单的属性特别多，可以去W3C看一遍，这里就不详细讲了，毕竟是写个入门啦。表单主要用作数据传递，所以对表单的理解，就是要搞明白，表单的那些属性是怎么回事<br>一个表单完整书写</p> <pre><code><form action="url" method="post/get" > //文本框 <input name="username" type="text" /> //密码框 <input name="password" type="password" /> //单选框（注意name要相同,是同一类行的选择，以便后台拿到数据） <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female //多选框（注意name要相同,是同一类行的选择，以便后台拿到数据） <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car //下拉框 <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> //这种是为下拉框分组 <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> //文本域 <textarea name="textarea" rows="10" cols="30"> 我是一个文本框。 </textarea> //提交按钮，下面的提交按钮，默认提交到action地址 <input type="submit" value="Submit"> <button>submit</button> //这是另外一种形式的表单，注意其中的区别即可， //fieldset标签也只会在这种场合使用了 <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> //datalist标签，input的list属性绑定到datalist的id，就可以完成这项工作了 <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> //注意label标签 , 通过绑定input的id来实现在label出点击获取焦点，有两种写法 <label for="name">用户名</label> <input id="naem" type="text" size="30"> <label>Hello<input type="text" size="30"></label> </form> </code></pre> <p>实例如下：</p> <p><label for="name">用户名  </label><input id="name" type="text" size="30">    <label>Hello  <input type="text" size="30"></label> </p> <p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p> <blockquote><p>output标签，顾名思义，输出标签，那么从何处输入，定义规则是怎么样的呢？</p></blockquote> <p>form定义规则，那么你可不可以写一个升级版的呢？</p> <pre><code><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 //数据源 +<input type="number" id="b" value="50"> //数据源 =<output name="x" for="a b"></output> //计算出结果 </form> </code></pre> <blockquote><p>iframe --一般重要的标签</p></blockquote> <p>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</p> <pre><code><iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe> iframe显示的地址页面内容，制定高度和宽度，frameborder移除边框 </code></pre> <p>用iframe来显示页面内部链接</p> <pre><code><iframe src="www.baidu.com" name="iframe_a"></iframe> <p><a href="http://www.google.com" target="iframe_a">Google</a></p> </code></pre> <h3 id="item-2-2">全局属性</h3> <p>这些属性，基本上不怎么使用，了解即可。<br>accesskey 规定激活元素的快捷键。<br>一下元素支持accesskey属性</p> <pre><code><a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。 <a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a> <a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a> </code></pre> <p>例子：<br>HTML 、 CSS</p> <ul> <li><p>class 规定元素的一个或多个类名（引用样式表中的类）。</p></li> <li><p>contenteditable 规定元素内容是否可编辑。</p></li> <li><p>contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。</p></li> <li><p>data-* 用于存储页面或应用程序的私有定制数据。</p></li> <li><p>dir 规定元素中内容的文本方向。</p></li> <li><p>draggable 规定元素是否可拖动。</p></li> <li><p>dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。</p></li> <li><p>hidden 规定元素仍未或不再相关。</p></li> <li><p>id 规定元素的唯一 id。</p></li> <li><p>lang 规定元素内容的语言。</p></li> <li><p>spellcheck 规定是否对元素进行拼写和语法检查。</p></li> <li><p>style 规定元素的行内 CSS 样式。</p></li> <li><p>tabindex 规定元素的 tab 键次序。</p></li> <li><p>title 规定有关元素的额外信息。</p></li> <li><p>translate 规定是否应该翻译元素内容。</p></li> </ul> <h3 id="item-2-3">空元素标签</h3> <p><code>br</code> , <code>hr</code></p> <h3 id="item-2-4">HTML5标签</h3> <p><code>article</code>, <code>aside</code> , <code>audio</code> , <code>bdi</code> , <code>canvas</code> , <code>datalist</code> , <code>command</code> , <code>details</code> ,<code>dialog</code> , <code>embed</code> ,<code>figcaption</code> ,<code>figure</code> ,<code>footer</code> ,<code>header</code> , <code>keygen</code> , <code>mark</code> , <code>meter</code> , <code>nav</code> , <code>output</code> , <code>process</code> , <code>rp</code> ,<code>rt</code> , <code>ruby</code> , <code>section</code> , <code>source</code> , <code>summary</code> , <code>time</code> , <code>track</code> , <code>video</code> , <code>wbr</code></p> <p>这些都是html5的标签，一眼便能看出，更加语义化了，如果想看html5标签详解，请看这里:[HTML+CSS复习之HTML5基础篇]()</p> <h3 id="item-2-5">不重要的标签</h3> <p><code>b</code>（定义文本粗体） ,<code> i</code>（定义文本斜体） , <code>strong</code> , <code>em</code> , <code>big</code> ,<code>small</code> , <code>sub</code> , <code>sup</code> , <code>ins</code> , <code>del</code> , <code>pre</code> , <code>code</code> , <code>kbd</code> , <code>tt</code> , <code>samp</code> , <code>var</code> , <code>address</code>(定义文档作者或拥有者的联系信息) , <code>abbr</code>(定义缩写) , <code>acronym</code>（定义只取首字母的缩写，不支持HTML5） , <code>bdo </code>, <code>blockquote</code> , <code>q </code>, <code>cite</code> , <code>dfn</code> , <code>colgroup</code> , <code>col</code> , <code>center</code>, <code>font</code> , <code>dir</code>(与ul差不多，兼容性不如ul) , <code>frame/frameset</code>(这两个标签已经没人用了，主要是用了这个标签，交互就做不了)</p> <pre><code><code>计算机输出</code> <br /> <kbd>键盘输入</kbd> <br /> <tt>打字机文本</tt> <br /> <samp>计算机代码样本</samp> <br /> <var>计算机变量</var> <br /> <b>注释：</b>这些标签常用于显示计算机/编程代码。 <acronym title="World Wide Web">WWW</acronym> <bdo dir="rtl">该段落文字从右到左显示。</bdo></code></pre> <h3 id="item-2-6">标签嵌套规则</h3> <p>a标签不能嵌套a标签，p标签不能嵌套块级标签</p><p style="text-align: center;"><img src="http://www.gvkun.com/zb_users/upload/2025/02/6d2e2086-2d08-4960-ae9d-edab8ecfd43c1740644117895.jpg" title="HTML/CSS从零开始-HTML基础(一)" alt="HTML/CSS从零开始-HTML基础(一)"></p><h3 class="eye-protector-processed" style="border-top-color: rgba(0, 0, 0, 0.35); border-bottom-color: rgba(0, 0, 0, 0.35);" id="HTML/CSS从零开始-HTML基础(一)">HTML/CSS从零开始-HTML基础(一)</h3><p><strong>一、web标准</strong></p> <p>1.1结构</p> <p>(1)xhtml(extensible hypertext markup language) 可扩展超文本标记语言  <br>(2)w3c(world wide web consortium)万维网联盟<br><br>a、制定了结构（xhtml、xml）、表现（css）、标准。</p> <p>1.2表现</p> <p>（1）css(cascading style sheets)层叠样式表</p> <p>1.3行为</p> <p>（1）ECMA（Europan Computer Manufactures Association）欧洲电脑场商联合会<br>a、制定了行为 DOM(Document Object Model) 文本对象模型<br>b、ECMAscript标准</p> <p><strong>二、HTML基本结构</strong></p><div><pre><!doctype html> <html> <head> <meta charest="utf-8"> <!--编码格式--> <title></title> </head> <body> <h1></h1> <!--标题--> . . . <h6></h6> <p></p> <!--段落--> </body> </html></pre><div>登录后复制</div></div><p><strong>三、基本语法</strong></p><p>3.1常规标记</p><p><标记属性1="属性值1" 属性2="属性值2" ><!--标记--><br>如下：<br><strong></strong> <b></b> <!--加粗--><br><em></em> <i></i> <!--倾斜--></p><p><span>立即学习</span>“前端免费学习笔记（深入）”；</p><p>3.2空标记</p><p><标记属性="属性值"/><br>如下：<br></p><hr> <！--水平线--><br><br> <!--换行--><br><img src="路径" alt="HTML/CSS从零开始-HTML基础(一)"> <!--插入图片--><br> 空格<p></p><p><strong>四、常见标记（标签）</strong></p><p>4.1列表</p><p>a、有序列表</p><div><pre> <ol> ordered <li></li> <li></li> <li></li> </ol></pre><div>登录后复制</div></div><p>b、无序列表</p><div><pre><ul> unordered <li></li> <li></li> <li></li> </ul></pre><div>登录后复制</div></div><p>c、自定义列表</p><div><pre><dl> definition list <dt>被解释</dt> <dd>解释</dd> definition description </dl></pre><div>登录后复制</div></div><p>说明：dd可以重复,但是dt只允许有一个;<br>      有序列表中参数 tyle="A"，start="3",//第一个序列从C开始。</p> <p>4.2图片标签</p> <p><img src="%E7%9B%AE%E6%A0%87%E6%96%87%E4%BB%B6%E5%8F%8A%E5%85%A8%E7%A7%B0" alt="图片（插入错误时）替换文本" title="图标（鼠标点上时显示的内容）"></p> <p>4.3超链接</p> <p></p> <p>路径分为：绝对路径（https//www.baidu.com）,相对路径如（images/inder.html）.<br>target默认属性值为_self;_blank为打开新窗口<br></p> <p>4.4块标签</p> <p>说明：a、块之间自动换行<br>      b、如果p块限定宽、高，内容为中文时，自动换行；如果是英文不换行，会溢出。<br><br>说明：a、span块之间不换行，宽高不能限定，随着文本的长度变化。</p> <p>4.5表格标签</p> <p>1、语法：</p> <p></p> <p>2、说明;在表格给定宽高后,用属性cellpadding时，如果给定宽度超出设定的宽高，表格会被撑开。</p><table width="" height="" border="1（表框像素）" bordercolor="表格框颜色" cellspacing="0（单元格间距）" cellpadding="内容离左边框像素"> </table><table width="" border="1（表框像素）"><tbody><tr></tr></tbody></table> <p>  </p> <br>      <br>         <!--th表头变粗--><br>      <br>      <br>      <br>      <br>         <!--td单元格，tr行--><br>      <br>      <p>3、单元格合并属性</p> <p>colspan 合并列<br>   rowspan 合并行<br>   语法：rowspan="3"  //合并三行</p> <p>4、表单<br>a、表单框<br> 语法：</p> <form name="表单名称" method="post/get" action=""></form> <br>说明：<br><br>b、文本框<br><input type="text" value="默认值"><br><br>c、密码框<br><input type="password" placeholder="提示信息"><br><br>d、单选框<br><input type="radio" name="自定名(一致，必写)"><br>如下:<br><input type="radio" name="sex" value="男">男<br><input type="radio" name="sex" value="女">女<br><br>e、多选框<br><p>择偶标准</p> <br><input type="checkbox" name="boy" value="185">185<br><input type="checkbox" name="boy" value="黑">黑<br><input type="checkbox" name="boy" value="男">男<br><input type="chechbox" name="boy" value="东北">东北<br><br>disabled="disabled"(禁用、禁选)<br>checked="checked"(默认选中)<br>f、重置<br>(1)<input type="reset" value="默认值">  （重置，清空以上填写的数据）<br>g、按钮<br>(1)<input type="button" value="只是起跳转，不提提交"><br>(2)<input type="submit" value="既跳转，又提交"><br><br>说明：按钮作为标签时<button>按钮</button>既跳转，又提交<p>h、下拉列表<br>(1)<select name="">  <option></option>   <option></option>   </select><br><br>i、文本域<br><textarea cols="宽" rows="行数" name=""><br></textarea><br><br>注明：<br>（1）以上文本框放在表单form里；<br><br>（2）在form中属性method的属性值post/get的区别？<br>    a、get是从服务器上获取数据，post是向服务器传送数据；<br>    b、get是把参数值加到提交表单的Action的属性所指的URL中，值和表单内的各个字段一一对应，在URL中可以看见，<br>       post是通过HTTP，post机制将表单内的各个字段与其内容放置在HTML HEADER内一起传送给ACTION属性的URL地址，用户看不见这个       过程。<br>   c、对于get方式，服务器端的ReqestQueryString获取变量的值，对于post方式服务器用Request.Form获取提交数据。<br>   d、get数据传输量小不大于2kb,post的传输量大，一般不受限制<br>   f、get安全性低，post安全性高，但传输效率高<br><br> （3）value在input中的用法<br>  a、type="button" /"reset"/"submit"；表示按钮上的文本<br>  b、type="text"/"password";表示初始值<br>  c、type="check"/"radio"定义与输入相关值<br><br> （4）表单嵌套<br></p> <br>  <br>  <br>     <br>     <br>  <br>  <br>     <br>     <br>  <br><br><table> <form></form> <tbody><tr> <td><input type="text" placeholder="填写用户名"></td> <td><input type="password" placeholder="请输入密码"></td> </tr> <tr> <td><input type="button" value="忘记密码？"></td> <td><button>登录</button></td> </tr> </tbody></table><p style="text-align: center;"><img src="http://www.gvkun.com/zb_users/upload/2025/02/c7b3c75f-13dc-4076-a66d-e1f8976164f01740644118277.jpg" title="HTML之元素分类（HTML基础知识）" alt="HTML之元素分类（HTML基础知识）"></p><h3 class="eye-protector-processed" style="border-top-color: rgba(0, 0, 0, 0.35); border-bottom-color: rgba(0, 0, 0, 0.35);" id="HTML之元素分类（HTML基础知识）">HTML之元素分类（HTML基础知识）</h3><p>本文转载于:<span>猿2048</span>网站➪HTML之元素分类（HTML基础知识）</p> <div> <strong><span>HTML之元素分类</span></strong> </div> <div> <span>一.按照块级元素还是行内元素分类</span> </div> <div> <div> <span>块级元素（block-level）和行内元素（inline-level，也叫作“内联”元素）。</span> </div> <div> <span>a.块级元素（独占一行）</span> </div> <div> <span>块级元素：其最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是<span>独占一行</span>的。</span> <span>典型的块级元素有：<div>，<p>，<h1>~<h6>，<ul>等等。</span> </div> <div> <span>b.行内元素（可以与其他元素共享一行）</span> </div> <div> <span>行内元素：行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。</span> <span>display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。</span> </div> <div> <span>PS：（块级和行内可以相互转换）：通过设定<span>CSS的display</span>属性，可以使行内元素变为块级元素:display:block;也可以让块级元素变为行内元素:display:inline。</span> </div> <div>   </div> <div> <span><span><strong><span>*</span></strong></span><span><strong>块级元素和行内元素的区别：</strong></span></span> </div> <div> 1. <span>块级元素</span> <span>会独占一行，其宽度自动填满其父元素宽度;</span> <span>行内元素</span> <span>不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化</span> </div> <div> <span> 2.一般情况下，块级元素可以设置 width,height属性，行内元素设置width,height无效。</span> </div> <div> <span> 3.块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）。</span> </div> <div> <div> <span> </span> </div> <div> <div> <span>二. 按照替换和不可替换元素分类</span> </div> <div> <span>当然除按照块级和行内元素来分，也可以用是否为可替换元素来分。</span> </div> <div> <span>a.替换元素（该元素可以根据某属性的改变而产生不同的显示效果）</span> </div> <div> <span>替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。</span> </div> <div> <span>举个栗子：浏览器会根据<img>标签的<span>src属性</span>的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的<span>type属性</span>来决定是显示输入框，还是单选按钮等。</span> </div> <div> <span>(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素</span> </div> </div> <div> <div> <span>b.不可替换元素</span> </div> <div> <span>不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端。</span> </div> <div> <span><span><strong>ps</strong></span>：一般行内元素设置宽和高是没用的，那为什么input或者是img等一些行内元素可以设置width，height？</span> </div> <div> <span>因为input，img等都是替换元素，替换元素有一般有内在尺寸，所以具有width和height，可以设定，是比较特殊的。当我们不设置它们的宽度和高度时，浏览器会给出默认的宽高。举个栗子：<input type="text"> input的文本输入框形式就会给出默认的宽高。但我们可以改变他的width，height。</span> </div> <div>   </div> <div> <span>作者：Ry-yuan</span> </div> <div> <span>如需转载请标明出处：原文地址：http://www.cnblogs.com/Ry-yuan/p/6694189.html</span> </div> </div> </div> </div><p>今天关于<strong>HTML基础</strong>和<strong>html基础框架</strong>的介绍到此结束，谢谢您的阅读，有关<em>1、HTML基础学习第一天_html/css_WEB-ITnose、HTML+CSS复习之HTML基础篇、HTML/CSS从零开始-HTML基础(一)、HTML之元素分类（HTML基础知识）</em>等更多相关知识的信息可以在本站进行查询。</p> <section id="divTags"><p class="c-title mb"><span class="name">本文标签：</span></p><ul class="widget-content divTags"> <li><a href="https://www.gvkun.com/tags-38361.html" title="https://www.gvkun.com/tags-38361.html">html基础框架</a></li> <li><a href="https://www.gvkun.com/tags-38362.html" title="https://www.gvkun.com/tags-38362.html">HTML学习</a></li> <li><a href="https://www.gvkun.com/tags-38363.html" title="https://www.gvkun.com/tags-38363.html">网页开发基础</a></li> <li><a href="https://www.gvkun.com/tags-38364.html" title="https://www.gvkun.com/tags-38364.html">web前端入门</a></li> </ul> </section> </div> <!--<div class="m_ssxx" style="border-top: 1px dashed rgb(221, 221, 221); padding: 12px 10px 5px; margin-top: 10px; overflow: hidden; color: rgb(0, 0, 0); font-family: arial, "Microsoft YaHei", 微软雅黑; font-size: 14px; line-height: 28px;">  </div>--> </p> </div> </article> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis"> <span class="prev iconfont icon-toleft">上一篇</span><strong><a href='https://www.gvkun.com/html/15579.html'>HTML/CSS——1（html+css+）</a> </strong> </p> <p class="post-next fr ellipsis"> <span class="next iconfont icon-toright">下一篇</span><strong><a href='https://www.gvkun.com/html/15581.html'>HTML转成pdf（html转成PDF）</a> </strong> </p> </div> <div class="related-art sb br mb"> <p class="c-title"><span class="name">相关文章</span></p> <ul class="ul clearfix"> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="https://www.gvkun.com/ubuntu/32619.html" title="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）"> <img class="img-cover br" src="https://www.gvkun.com/zb_users/cache/thumbs/0030f0413463d30cd2ff8bd217846e17-180-120-1.jpg" alt="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="https://www.gvkun.com/ubuntu/32619.html" title="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）">ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）</a></h2> <p class="intro hidden-sm">在本文中，我们将详细介绍ubuntu下的Nessus插件更新的各个方面，并为您提供关于ubuntu安装nessus的相关解答，同时，我们也将为您带来关于BT5安装和使用nessus、Eclipse报告... </p> <p class="data clearfix"> <a class="cate fl br" href="https://www.gvkun.com/ubuntu/" target="_blank"><i class="iconfont icon-cate"></i>ubuntu</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>2025-04-30</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="https://www.gvkun.com/ubuntu/32618.html" title="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）"> <img class="img-cover br" src="https://www.gvkun.com/zb_users/cache/thumbs/49ae751826a114631a2ac89f5de3d642-180-120-1.jpg" alt="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="https://www.gvkun.com/ubuntu/32618.html" title="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）">18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）</a></h2> <p class="intro hidden-sm">对于18-Ubuntu-文件和目录命令-创建文件和目录-touch和mkdir感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍ubuntu目录下创建文件，并为您提供关于14-Ubuntu-文件和... </p> <p class="data clearfix"> <a class="cate fl br" href="https://www.gvkun.com/ubuntu/" target="_blank"><i class="iconfont icon-cate"></i>ubuntu</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>2025-04-30</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="https://www.gvkun.com/ubuntu/32617.html" title="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）"> <img class="img-cover br" src="https://www.gvkun.com/zb_users/cache/thumbs/048de7dc97e09b001ef3bf3bbdb84ee4-180-120-1.jpg" alt="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="https://www.gvkun.com/ubuntu/32617.html" title="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）">19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）</a></h2> <p class="intro hidden-sm">以上就是给各位分享19-Ubuntu-文件和目录命令-删除文件和目录-rm，其中也会对ubuntu删除目录下所有文件进行解释，同时本文还将给你拓展14-Ubuntu-文件和目录命令-查看目录内容-ls... </p> <p class="data clearfix"> <a class="cate fl br" href="https://www.gvkun.com/ubuntu/" target="_blank"><i class="iconfont icon-cate"></i>ubuntu</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>2025-04-30</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="https://www.gvkun.com/ubuntu/32616.html" title="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）"> <img class="img-cover br" src="https://www.gvkun.com/zb_users/cache/thumbs/7c362344e8308d419be0ab74f47fcb3d-180-120-1.jpg" alt="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="https://www.gvkun.com/ubuntu/32616.html" title="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）">ubuntu 下查询网络的常用命令（ubuntu查看网络信息）</a></h2> <p class="intro hidden-sm">本文将介绍ubuntu下查询网络的常用命令的详细情况，特别是关于ubuntu查看网络信息的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于apt-ge... </p> <p class="data clearfix"> <a class="cate fl br" href="https://www.gvkun.com/ubuntu/" target="_blank"><i class="iconfont icon-cate"></i>ubuntu</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>2025-04-30</time> </p> </div> </article> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="https://www.gvkun.com/ubuntu/32615.html" title="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）"> <img class="img-cover br" src="https://www.gvkun.com/zb_users/cache/thumbs/1b067adb9d859ccac33ceaf5de555de3-180-120-1.jpg" alt="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="https://www.gvkun.com/ubuntu/32615.html" title="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）">【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）</a></h2> <p class="intro hidden-sm">如果您想了解【Linux】Ubuntu安装anaconda的相关知识，那么本文是一篇不可错过的文章，我们将对ubuntu中安装anaconda进行全面详尽的解释，并且为您提供关于anaconda+te... </p> <p class="data clearfix"> <a class="cate fl br" href="https://www.gvkun.com/ubuntu/" target="_blank"><i class="iconfont icon-cate"></i>ubuntu</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>2025-04-30</time> </p> </div> </article> </ul> </div> </div> <aside id="sidebar" class="hidden-sm-md-lg fr"> <div class="theiaStickySidebar"> <section id="aside_new" class="widget widget_aside_new sb br mb"> <p class="c-title mb"><span class="name">最新文章</span></p> <ul class="widget-content aside_new"> <li> <a href="https://www.gvkun.com/ubuntu/32619.html" title="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）" target="_blank"> <span>ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32619.html" title="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/0030f0413463d30cd2ff8bd217846e17-100-70-1.jpg" alt="ubuntu 下的 Nessus 插件更新（ubuntu安装nessus）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">在本文中，我们将详细介绍ubuntu下的Nessus插件更新的各个方面，并...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32618.html" title="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）" target="_blank"> <span>18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32618.html" title="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/49ae751826a114631a2ac89f5de3d642-100-70-1.jpg" alt="18-Ubuntu - 文件和目录命令 - 创建文件和目录 - touch 和 mkdir（ubuntu目录下创建文件）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">对于18-Ubuntu-文件和目录命令-创建文件和目录-touch...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32617.html" title="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）" target="_blank"> <span>19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32617.html" title="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/048de7dc97e09b001ef3bf3bbdb84ee4-100-70-1.jpg" alt="19-Ubuntu-文件和目录命令-删除文件和目录-rm（ubuntu删除目录下所有文件）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">以上就是给各位分享19-Ubuntu-文件和目录命令-删除文件和目录-rm，其中...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32616.html" title="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）" target="_blank"> <span>ubuntu 下查询网络的常用命令（ubuntu查看网络信息）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32616.html" title="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/7c362344e8308d419be0ab74f47fcb3d-100-70-1.jpg" alt="ubuntu 下查询网络的常用命令（ubuntu查看网络信息）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">本文将介绍ubuntu下查询网络的常用命令的详细情况，特别是关于ubuntu查...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32615.html" title="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）" target="_blank"> <span>【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32615.html" title="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/1b067adb9d859ccac33ceaf5de555de3-100-70-1.jpg" alt="【Linux】Ubuntu 安装 anaconda（ubuntu中安装anaconda）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">如果您想了解【Linux】Ubuntu安装anaconda的相关知识，那么本...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32614.html" title="Ubuntu 16.04.4 LTS设置root用户登陆图形界面（ubuntu root用户登录图形界面）" target="_blank"> <span>Ubuntu 16.04.4 LTS设置root用户登陆图形界面（ubuntu root用户登录图形界面）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32614.html" title="Ubuntu 16.04.4 LTS设置root用户登陆图形界面（ubuntu root用户登录图形界面）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/0a1fcf2b5b4962f9c7ff436afa71b548-100-70-1.jpg" alt="Ubuntu 16.04.4 LTS设置root用户登陆图形界面（ubuntu root用户登录图形界面）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">这篇文章主要围绕Ubuntu16.04.4LTS设置root用户登陆图形界面...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32613.html" title="ubuntu 上用virtualenv安装python不同版本的开发环境。（ubuntu虚拟环境安装python3）" target="_blank"> <span>ubuntu 上用virtualenv安装python不同版本的开发环境。（ubuntu虚拟环境安装python3）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32613.html" title="ubuntu 上用virtualenv安装python不同版本的开发环境。（ubuntu虚拟环境安装python3）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/1ef92351660de895e3f29b4d06e8de64-100-70-1.jpg" alt="ubuntu 上用virtualenv安装python不同版本的开发环境。（ubuntu虚拟环境安装python3）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">对于想了解ubuntu上用virtualenv安装python不同版本的开发环...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32612.html" title="ubuntu 配置apt-get源（ubuntu设置apt源）" target="_blank"> <span>ubuntu 配置apt-get源（ubuntu设置apt源）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32612.html" title="ubuntu 配置apt-get源（ubuntu设置apt源）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/86c010005b54e0b4a54c2d3fc5a5fbc1-100-70-1.jpg" alt="ubuntu 配置apt-get源（ubuntu设置apt源）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">本文将分享ubuntu配置apt-get源的详细内容，并且还将对ubuntu设...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32611.html" title="ubuntu dnsmasq" target="_blank"> <span>ubuntu dnsmasq</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32611.html" title="ubuntu dnsmasq" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/b40fb82e1e9e1a4f688e0fcdb625a43d-100-70-1.jpg" alt="ubuntu dnsmasq" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">这篇文章主要围绕ubuntudnsmasq展开，旨在为您提供一份详细的参考资料...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> <li> <a href="https://www.gvkun.com/ubuntu/32610.html" title="Ubuntu 下几种软件安装的方法小结（ubuntu 安装软件）" target="_blank"> <span>Ubuntu 下几种软件安装的方法小结（ubuntu 安装软件）</span></a></li> <li class="list clearfix"><a href="https://www.gvkun.com/ubuntu/32610.html" title="Ubuntu 下几种软件安装的方法小结（ubuntu 安装软件）" ><span class="img-wrap br"><img src="https://www.gvkun.com/zb_users/cache/thumbs/bdd32327fa71349b77430cdacac1705b-100-70-1.jpg" alt="Ubuntu 下几种软件安装的方法小结（ubuntu 安装软件）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">关于Ubuntu下几种软件安装的方法小结和ubuntu安装软件的问题就给大...</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">2025-04-30</span></span></div> </div> </a> </li> </ul> </section> <section id="divTags" class="widget widget_tags sb br mb"> <p class="c-title mb"><span class="name">标签列表</span></p> <ul class="widget-content divTags"> <li><a href="https://www.gvkun.com/tags-62426.html" title="APP运行状态">APP运行状态</a></li><li><a href="https://www.gvkun.com/tags-51261.html" title="Laravel项目创建">Laravel项目创建</a></li><li><a href="https://www.gvkun.com/tags-62810.html" title="php数据库连接">php数据库连接</a></li><li><a href="https://www.gvkun.com/tags-1567.html" title="checkCallingOrSelfPermission">checkCallingOrSelfPermission</a></li><li><a href="https://www.gvkun.com/tags-66205.html" title="twitter_campaigns">twitter_campaigns</a></li><li><a href="https://www.gvkun.com/tags-69300.html" title="Precision或Edge">Precision或Edge</a></li><li><a href="https://www.gvkun.com/tags-37036.html" title="adt安装过程">adt安装过程</a></li><li><a href="https://www.gvkun.com/tags-68247.html" title="DigitalOcean">DigitalOcean</a></li><li><a href="https://www.gvkun.com/tags-42590.html" title="Html5实现功能">Html5实现功能</a></li><li><a href="https://www.gvkun.com/tags-30643.html" title="html_decoration">html_decoration</a></li><li><a href="https://www.gvkun.com/tags-53972.html" title="设计软件">设计软件</a></li><li><a href="https://www.gvkun.com/tags-52947.html" title="文本动画效果">文本动画效果</a></li><li><a href="https://www.gvkun.com/tags-52533.html" title="自增计数器">自增计数器</a></li><li><a href="https://www.gvkun.com/tags-41390.html" title="RMI_JNDI_error">RMI_JNDI_error</a></li><li><a href="https://www.gvkun.com/tags-896.html" title="Comparison-of-pattern-matching">Comparison-of-pattern-matching</a></li><li><a href="https://www.gvkun.com/tags-22368.html" title="ClassFormatError">ClassFormatError</a></li><li><a href="https://www.gvkun.com/tags-71091.html" title="browser_content_sharing">browser_content_sharing</a></li><li><a href="https://www.gvkun.com/tags-47130.html" title="windows安全配置">windows安全配置</a></li><li><a href="https://www.gvkun.com/tags-31839.html" title="Sysprep_Error">Sysprep_Error</a></li><li><a href="https://www.gvkun.com/tags-38595.html" title="pyqt5_tips">pyqt5_tips</a></li><li><a href="https://www.gvkun.com/tags-29468.html" title="PublicKey">PublicKey</a></li><li><a href="https://www.gvkun.com/tags-10194.html" title="加V实名认证">加V实名认证</a></li><li><a href="https://www.gvkun.com/tags-14083.html" title="oschina网站">oschina网站</a></li><li><a href="https://www.gvkun.com/tags-69228.html" title="App_Tracking">App_Tracking</a></li><li><a href="https://www.gvkun.com/tags-33029.html" title="class应用">class应用</a></li><li><a href="https://www.gvkun.com/tags-50417.html" title="Unix开发工具">Unix开发工具</a></li><li><a href="https://www.gvkun.com/tags-40090.html" title="win7系统屏幕亮度调节方法">win7系统屏幕亮度调节方法</a></li><li><a href="https://www.gvkun.com/tags-28913.html" title="ExpectedConditions">ExpectedConditions</a></li><li><a href="https://www.gvkun.com/tags-43109.html" title="Angular指令详解">Angular指令详解</a></li><li><a href="https://www.gvkun.com/tags-1665.html" title="RuntimeException">RuntimeException</a></li><li><a href="https://www.gvkun.com/tags-17593.html" title="获取多个值">获取多个值</a></li><li><a href="https://www.gvkun.com/tags-36537.html" title="表前缀与表名">表前缀与表名</a></li><li><a href="https://www.gvkun.com/tags-50766.html" title="Magento搜索">Magento搜索</a></li><li><a href="https://www.gvkun.com/tags-7977.html" title="CentOS语言环境设置">CentOS语言环境设置</a></li><li><a href="https://www.gvkun.com/tags-49511.html" title="网址SEO分析">网址SEO分析</a></li><li><a href="https://www.gvkun.com/tags-19045.html" title="Colors">Colors</a></li><li><a href="https://www.gvkun.com/tags-62487.html" title="Swift_数值分离">Swift_数值分离</a></li><li><a href="https://www.gvkun.com/tags-68159.html" title="App_Delegate">App_Delegate</a></li><li><a href="https://www.gvkun.com/tags-47500.html" title="注册实例">注册实例</a></li><li><a href="https://www.gvkun.com/tags-64796.html" title="Java_获取访客IP">Java_获取访客IP</a></li><li><a href="https://www.gvkun.com/tags-29616.html" title="Vuex">Vuex</a></li><li><a href="https://www.gvkun.com/tags-53456.html" title="19.01">19.01</a></li><li><a href="https://www.gvkun.com/tags-27976.html" title="get方法混淆">get方法混淆</a></li><li><a href="https://www.gvkun.com/tags-43523.html" title="SQL_Server_2008指南">SQL_Server_2008指南</a></li><li><a href="https://www.gvkun.com/tags-8882.html" title="传统打破">传统打破</a></li><li><a href="https://www.gvkun.com/tags-7095.html" title="字符全索引获取">字符全索引获取</a></li><li><a href="https://www.gvkun.com/tags-7146.html" title="Tkinter模块">Tkinter模块</a></li><li><a href="https://www.gvkun.com/tags-71773.html" title="Unix_sql">Unix_sql</a></li><li><a href="https://www.gvkun.com/tags-64043.html" title="uuid_getnode">uuid_getnode</a></li><li><a href="https://www.gvkun.com/tags-16074.html" title="测试类">测试类</a></li><li><a href="https://www.gvkun.com/tags-27440.html" title="LocationManager">LocationManager</a></li><li><a href="https://www.gvkun.com/tags-27425.html" title="onNewPicture()">onNewPicture()</a></li><li><a href="https://www.gvkun.com/tags-3235.html" title="系统故障实例">系统故障实例</a></li><li><a href="https://www.gvkun.com/tags-9140.html" title="上级路由配置">上级路由配置</a></li><li><a href="https://www.gvkun.com/tags-25519.html" title="网页加速">网页加速</a></li><li><a href="https://www.gvkun.com/tags-58607.html" title="sum()函数">sum()函数</a></li><li><a href="https://www.gvkun.com/tags-4655.html" title="Coding_Tutorial">Coding_Tutorial</a></li><li><a href="https://www.gvkun.com/tags-33337.html" title="win11电脑">win11电脑</a></li><li><a href="https://www.gvkun.com/tags-24756.html" title="win32k.sys错误处理">win32k.sys错误处理</a></li><li><a href="https://www.gvkun.com/tags-19936.html" title="防火墙设置">防火墙设置</a></li><li><a href="https://www.gvkun.com/tags-62640.html" title="MyISAM">MyISAM</a></li><li><a href="https://www.gvkun.com/tags-34190.html" title="RSQLite_API_Error">RSQLite_API_Error</a></li><li><a href="https://www.gvkun.com/tags-39744.html" title="保留两位小数">保留两位小数</a></li><li><a href="https://www.gvkun.com/tags-23557.html" title="Transaction_Isolation">Transaction_Isolation</a></li><li><a href="https://www.gvkun.com/tags-62225.html" title="动态写字效果">动态写字效果</a></li><li><a href="https://www.gvkun.com/tags-63711.html" title="java_util_arraylist_methods">java_util_arraylist_methods</a></li><li><a href="https://www.gvkun.com/tags-24606.html" title="自定义工具类">自定义工具类</a></li><li><a href="https://www.gvkun.com/tags-3079.html" title="应用设计">应用设计</a></li><li><a href="https://www.gvkun.com/tags-20217.html" title="序列号显示">序列号显示</a></li><li><a href="https://www.gvkun.com/tags-37122.html" title="Docker_image">Docker_image</a></li><li><a href="https://www.gvkun.com/tags-23879.html" title="伪静态实现">伪静态实现</a></li><li><a href="https://www.gvkun.com/tags-20078.html" title="PHP_version切换">PHP_version切换</a></li><li><a href="https://www.gvkun.com/tags-1355.html" title="蜘蛛程序通道">蜘蛛程序通道</a></li><li><a href="https://www.gvkun.com/tags-24421.html" title="索引范围">索引范围</a></li><li><a href="https://www.gvkun.com/tags-20290.html" title="Redis安装">Redis安装</a></li><li><a href="https://www.gvkun.com/tags-22252.html" title="PHP计算">PHP计算</a></li><li><a href="https://www.gvkun.com/tags-57483.html" title="Fla_Uninstallation">Fla_Uninstallation</a></li><li><a href="https://www.gvkun.com/tags-14185.html" title="微信视频号视频下载工具">微信视频号视频下载工具</a></li><li><a href="https://www.gvkun.com/tags-22818.html" title="URLConnection.connect">URLConnection.connect</a></li><li><a href="https://www.gvkun.com/tags-36128.html" title="win7开机画面修改">win7开机画面修改</a></li><li><a href="https://www.gvkun.com/tags-61517.html" title="技术社区贡献">技术社区贡献</a></li><li><a href="https://www.gvkun.com/tags-7827.html" title="functions">functions</a></li><li><a href="https://www.gvkun.com/tags-47321.html" title="执行日志查询">执行日志查询</a></li><li><a href="https://www.gvkun.com/tags-47522.html" title="数字信号处理">数字信号处理</a></li><li><a href="https://www.gvkun.com/tags-2440.html" title="jdbcTemplate">jdbcTemplate</a></li><li><a href="https://www.gvkun.com/tags-13443.html" title="Warn Log">Warn Log</a></li><li><a href="https://www.gvkun.com/tags-5362.html" title="if判断">if判断</a></li><li><a href="https://www.gvkun.com/tags-19283.html" title="anaconda环境管理">anaconda环境管理</a></li><li><a href="https://www.gvkun.com/tags-24459.html" title="自定义路由">自定义路由</a></li><li><a href="https://www.gvkun.com/tags-43712.html" title="Regression">Regression</a></li><li><a href="https://www.gvkun.com/tags-35259.html" title="数据库唯一性">数据库唯一性</a></li><li><a href="https://www.gvkun.com/tags-63789.html" title="设置恢复">设置恢复</a></li><li><a href="https://www.gvkun.com/tags-42962.html" title="nowrap_attribute">nowrap_attribute</a></li><li><a href="https://www.gvkun.com/tags-33856.html" title="栏目名称获取">栏目名称获取</a></li><li><a href="https://www.gvkun.com/tags-20848.html" title="数字工具">数字工具</a></li><li><a href="https://www.gvkun.com/tags-47358.html" title="getFromLocationName">getFromLocationName</a></li><li><a href="https://www.gvkun.com/tags-33905.html" title="大型文件上传">大型文件上传</a></li><li><a href="https://www.gvkun.com/tags-69847.html" title="Oracle数据批量入库">Oracle数据批量入库</a></li><li><a href="https://www.gvkun.com/tags-3771.html" title="高级">高级</a></li><li><a href="https://www.gvkun.com/tags-45720.html" title="多面体">多面体</a></li> </ul> </section> </div> </aside> </div> <footer class="footer"> <div class="flink container sb mb"> <ul id="flink" class="f-list clearfix"> <li class="title">网站栏目：</li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/mssql/">mssql</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/java/">java</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/android/">android</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/windows/">windows</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/dedecms/">dedecms</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/python/">python</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/numpy/">numpy</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/swift/">swift</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/js/">js</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/phpcms/">phpcms</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/oracle/">oracle</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/centos/">centos</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/css/">css</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/seo/">seo</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/web/">web</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/weixin/">weixin</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/marketing/">marketing</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/app/">app</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/html/">html</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/php/">php</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/mysql/">mysql</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/linux/">linux</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/ios/">ios</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/wordpress/">wordpress</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/phone/">phone</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/router/">router</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/computer/">computer</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/ubuntu/">ubuntu</a></li> <li id="navbar-category-1" class="li" ><a href="https://www.gvkun.com/tag.html">标签云</a></li> </ul> </div> <div class="main container"> <div class="f-about"> <small>Copyright © 2024-2025 www.gvkun.com <a href="http://www.gvkun.com/sitemap.xml" target='_blank'>网站地图</a> <a target="_blank" href="http://beian.miit.gov.cn/" rel="nofollow">豫ICP备18021181号-11</a> 部分文章来源于网络仅用作公益分享，如侵联系：pyabo#qq.com</small> </div> <div class="f-diy"><small></small></div> <div class="clear"></div> </div> <div id="toolbar" class="toolbar "> <div id="totop" class="btn hidden"> <i class="iconfont icon-totop"></i> </div> </div> </footer> <div id="mask-hidden" class="mask-hidden transition"></div> <script src="https://www.gvkun.com/zb_users/theme/Zit/js/91084.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify.min.js"></script> </body> </html><!--1,151.10 ms , 18 queries , 5080kb memory , 74 errors-->

HTML基础（html基础框架）