HTML学习大纲 - 码农知识堂

HTML学习大纲
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。了解HTML是进行网络爬虫、网页开发等活动的基础。下面是一些基本但重要的HTML知识点：
1. 元素和标签:
 - 元素: HTML元素是从开始标签到结束标签的所有内容。
 - 标签: HTML标签是用于定义HTML元素的关键字，放在尖括号中。
```
<tagname>Content goes here...tagname>
1
```
2. 属性:
 - HTML元素可以具有属性，属性提供有关元素的额外信息，始终包含在开始标签中。
```
<tagname attribute="value">Content goes here...tagname>
1
```
3. 文档结构:
 - : 定义文档类型。
 - : HTML文档的根元素。
 - : 包含元数据（如</code>、<code><link></code>、<code><meta></code>等）。</li><li><code><body></code>: 包含页面的可见内容（如<code><h1></code>、<code></code>、<code><img></code>等）。</li></ul> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> </li><li> 标题和段落: <ul><li><code><h1></code>到<code><h6></code>: 定义标题，<code><h1></code>是最高级别的标题。</li><li><code></code>: 定义段落。</li></ul> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><h1>This is a heading</h1> <p>This is a paragraph.</p> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> </li><li> 链接和图片: <ul><li><code><a></code>: 定义超链接。</li><li><code><img></code>: 定义图像。</li></ul> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><a href="https://www.example.com">This is a link</a> <img src="image.jpg" alt="An image"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> </li><li> 列表: <ul><li><code><ul></code>: 定义无序列表。</li><li><code><ol></code>: 定义有序列表。</li><li><code><li></code>: 定义列表项。</li></ul> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ul> <li>Item 1</li> <li>Item 2</li> </ul> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> </li><li> 表格: <ul><li><code><table></code>: 定义表格。</li><li><code><tr></code>: 定义表格行。</li><li><code><th></code>: 定义表头单元格。</li><li><code><td></code>: 定义表格单元格。</li></ul> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1 Col 1</td> <td>Row 1 Col 2</td> </tr> </table> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> </li><li> 表单: <ul><li><code><form></code>: 定义表单。</li><li><code><input></code>: 定义输入字段。</li><li><code><textarea></code>: 定义多行文本输入字段。</li><li><code><button></code>: 定义按钮。</li></ul> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form> <input type="text" name="name"> <textarea name="comment"></textarea> <button type="submit">Submit</button> </form> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> </li><li> CSS与JavaScript: <ul><li>CSS (Cascading Style Sheets): 用于样式化HTML元素。</li><li>JavaScript: 用于为网页添加交互性。</li></ul> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><head> <style> body {font-family: Arial, sans-serif;} </style> <script> function myFunction() { alert("Hello World!"); } </script> </head> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> </li><li> Div和Span标签: <ul><li><code><div></code>: 是一个块级元素，常用于组合块级元素，并通过CSS样式化。</li><li><code></code>: 是一个内联元素，常用于组合文本，并通过CSS样式化。</li></ul> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div style="background-color:lightblue"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <span style="color:blue">This text is in blue color</span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> </li><li> ID和Class属性: <ul><li><code>id</code>属性提供唯一标识，每个HTML文档中的<code>id</code>值都应该是唯一的。</li><li><code>class</code>属性用于定义元素的类名，可以将相同的样式应用于具有相同<code>class</code>值的多个元素。</li></ul> <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div id="uniqueElement">This element has a unique ID</div> <p class="styled-text">This text has a specific style.</p> <p class="styled-text">This text has the same style.</p> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> </li><li> HTML5新标签: <ul><li><code><header></code>, <code><footer></code>, <code><nav></code>, <code><section></code>, <code><article></code>等是HTML5中引入的新标签，用于更具语义化的组织内容。</li></ul> <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><header> <h1>Site Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> </ul> </nav> </header> <section> <article> <h2>Article Title</h2> <p>Article Content</p> </article> </section> <footer> <p>Copyright © 2023</p> </footer> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li></ul></pre> </li><li> 嵌入内容: <ul><li><code><iframe></code>: 可以嵌入另一个HTML页面。</li><li><code><video></code>和<code><audio></code>: HTML5新增的标签，用于嵌入视频和音频内容。</li></ul> <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><iframe src="https://www.example.com" width="600" height="400"></iframe> <video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <audio controls> <source src="sound.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> </li><li> 表单输入类型: <ul><li>HTML5引入了一些新的输入类型如<code><input type="email"></code>, <code><input type="date"></code>, <code><input type="range"></code>, <code><input type="color"></code>等，以支持更多的用户输入选项。</li></ul> <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><input type="date" name="birthdate"> <input type="email" name="email" placeholder="Enter your email"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> </li><li> 数据属性 (<code>data-*</code>): <ul><li>自定义数据属性，以存储页面或应用程序的私有自定义数据，以<code>data-</code>为前缀。</li></ul> <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div data-role="page" data-theme="a">This div has some data attributes</div> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li><li> 响应式设计相关标签和属性: <ul><li>如<code><meta name="viewport" content="width=device-width, initial-scale=1"></code>，用于控制页面在不同设备上的呈现。</li></ul> </li></ol> 这些是HTML中较为高级或HTML5中新引入的特性，了解这些有助于编写更现代、更高效的HTML代码，并能更好地理解和分析网络上的网页结构。 </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1414687">[C#基础训练]FoodRobot食品管理部分代码-1</a> <a href="/Article/Index/1222629">云服务器安装 redis</a> <a href="/Article/Index/642674">家庭理财管理系统设计与实现</a> <a href="/Article/Index/894240">【机器学习-周志华】学习笔记-第十五章</a> <a href="/Article/Index/983722">Gartner：机器人流程自动化RPA三大误区</a> <a href="/Article/Index/924993">数据库第四章习题-数据库安全性控制</a> <a href="/Article/Index/1280205">Oracle故障案例之-19C时区补丁DSTV38更新</a> <a href="/Article/Index/829279">【浅学Java】详解网络层IP协议</a> <a href="/Article/Index/1258808">PlantUML——类图（持续更新）</a> <a href="/Article/Index/777022">vue基本概念</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_57021623/article/details/133281215 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>