UP主:
黑马
链接:
前端开发学习路线（学+测） - 阿里云开发者社区 (aliyun.com)
1. 标准框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
【注意】： 生成标准框架的快捷方式（编辑器）
1. 输入【html: 5】
2. 输入 【！】然后回车
2. html标签
单标签（空标签）
-
<br>- 描述: 换行标签，用于在文本中插入一个换行。
- 案例:
<p>这是第一行<br>这是第二行</p>
-
<hr>- 描述: 水平线标签，用于在页面中插入一条水平线。
- 案例:
<p>这是第一段</p> <hr> <p>这是第二段</p>
-
<img>- 描述: 图像标签，用于在页面中插入图像。
- 案例:
<img src="image.jpg" alt="描述图片的文字">
-
<input>- 描述: 输入标签，用于创建各种输入控件（如文本框、按钮等）。
- 案例:
<input type="text" placeholder="请输入文本">
-
<meta>- 描述: 元数据标签，用于提供页面的元数据，如字符集、描述等。
- 案例:
<meta charset="UTF-8">
-
<link>- 描述: 链接标签，用于链接外部资源，如CSS文件。
- 案例:
<link rel="stylesheet" href="styles.css">
-
<base>- 描述: 基底标签，用于指定页面中所有相对URL的基地址。
- 案例:
<base href="https://www.example.com/">
-
<col>- 描述: 列标签，用于为表格中的列定义属性。
- 案例:
<table> <colgroup> <col style="background-color:yellow"> </colgroup> <tr><td>列1</td><td>列2</td></tr> </table>
-
<source>- 描述: 资源标签，用于为
<audio>或<video>标签指定媒体资源。 - 案例:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio>
- 描述: 资源标签，用于为
-
<track>- 描述: 轨道标签，用于为
<audio>或<video>标签指定字幕或标题。 - 案例:
<video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> </video>
- 描述: 轨道标签，用于为
双标签（开始标签和结束标签）
-
<html>- 描述: HTML文档的根元素。
- 案例:
<html> <head>...</head> <body>...</body> </html>
-
<head>- 描述: 文档的头部，包含元数据和外部资源的链接。
- 案例:
<head> <title>页面标题</title> <meta charset="UTF-8"> </head>
-
<title>- 描述: 文档的标题，显示在浏览器的标题栏或标签页上。
- 案例:
<title>我的网页</title>
-
<body>- 描述: 文档的主体，包含所有可见的内容。
- 案例:
<body> <h1>欢迎来到我的网页</h1> <p>这是我的第一个段落。</p> </body>
-
<h1>到<h6>- 描述: 标题标签，用于定义不同级别的标题。
- 案例:
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
-
<p>- 描述: 段落标签，用于定义文本段落。
- 案例:
<p>这是一个段落。</p>
-
<a>- 描述: 锚标签，用于创建超链接。
- 案例:
<a href="https://www.example.com">访问示例网站</a>
-
<div>- 描述: 块级容器标签，用于组织和布局内容。
- 案例:
<div style="background-color:lightblue; padding:10px;"> <p>这是一个div容器中的段落。</p> </div>
-
<span>- 描述: 行内容器标签，用于对文本的一部分进行样式化。
- 案例:
<p>这是一段包含<span style="color:red;">红色</span>文字的段落。</p>
-
<ul>- 描述: 无序列表标签，用于创建项目符号列表。
- 案例:
<ul> <li>项目1</li> <li>项目2</li> </ul>
-
<ol>- 描述: 有序列表标签，用于创建编号列表。
- 案例:
<ol> <li>第一项</li> <li>第二项</li> </ol>
-
<li>- 描述: 列表项标签，用于定义列表中的项目。
- 案例:
<ul> <li>苹果</li> <li>香蕉</li> </ul>
-
<table>- 描述: 表格标签，用于创建表格。
- 案例:
<table border="1"> <tr><th>姓名</th><th>年龄</th></tr> <tr><td>张三</td><td>25</td></tr> </table>
-
<tr>- 描述: 表格行标签，用于定义表格中的一行。
- 案例:
<table> <tr><td>第一行第一列</td><td>第一行第二列</td></tr> </table>
-
<td>- 描述: 表格数据标签，用于定义表格中的单元格。
- 案例:
<table> <tr><td>单元格1</td><td>单元格2</td></tr> </table>
-
<th>- 描述: 表格标题标签，用于定义表格中的表头单元格。
- 案例:
<table> <tr><th>表头1</th><th>表头2</th></tr> </table>
-
<form>- 描述: 表单标签，用于创建用户输入的表单。
- 案例:
<form action="/submit" method="post"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
-
<button>- 描述: 按钮标签，用于创建可点击的按钮。
- 案例:
<button type="button">点击我</button>
-
<textarea>- 描述: 文本区域标签，用于创建多行文本输入框。
- 案例:
<textarea rows="4" cols="50">请输入文本</textarea>
-
<select>- 描述: 选择标签，用于创建下拉列表。
- 案例:
<select> <option value="option1">选项1</option> <option value="option2">选项2</option> </select>
-
<option>- 描述: 选项标签，用于定义下拉列表中的选项。
- 案例:
<select> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select>
-
<label>- 描述: 标签标签，用于为表单控件提供标签。
- 案例:
<label for="username">用户名:</label> <input type="text" id="username" name="username">
-
<fieldset>- 描述: 字段集标签，用于对表单中的相关元素进行分组。
- 案例:
<form> <fieldset> <legend>个人信息</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name"> </fieldset> </form>
-
<legend>- 描述: 图例标签，用于为
<fieldset>元素提供标题。 - 案例:
<fieldset> <legend>登录信息</legend> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </fieldset>
- 描述: 图例标签，用于为
-
<header>- 描述: 头部标签，用于定义文档或节的头部。
- 案例:
<header> <h1>网站标题</h1> <nav>...</nav> </header>
-
<footer>- 描述: 页脚标签，用于定义文档或节的页脚。
- 案例:
<footer> <p>版权所有 © 2023</p> </footer>
-
<nav>- 描述: 导航标签，用于定义导航链接。
- 案例:
<nav> <a href="/home">首页</a> | <a href="/about">关于我们</a> </nav>
-
<section>- 描述: 节标签，用于定义文档中的节或部分。
- 案例:
<section> <h2>关于我们</h2> <p>这是关于我们的信息。</p> </section>
-
<article>- 描述: 文章标签，用于定义独立的内容块。
- 案例:
<article> <h2>文章标题</h2> <p>这是文章的内容。</p> </article>
-
<aside>- 描述: 侧边栏标签，用于定义与主要内容相关的侧边内容。
- 案例:
<aside> <h3>相关链接</h3> <ul> <li><a href="/link1">链接1</a></li> <li><a href="/link2">链接2</a></li> </ul> </aside>
-
<main>- 描述: 主要内容标签，用于定义文档的主要内容。
- 案例:
<main> <h1>主要内容标题</h1> <p>这是主要内容。</p> </main>
-
<figure>- 描述: 图形标签，用于定义自包含的内容（如图表、图像等）。
- 案例:
<figure> <img src="image.jpg" alt="描述图片的文字"> <figcaption>图片标题</figcaption> </figure>
-
<figcaption>- 描述: 图形标题标签，用于为
<figure>元素提供标题。 - 案例:
<figure> <img src="image.jpg" alt="描述图片的文字"> <figcaption>图片标题</figcaption> </figure>
- 描述: 图形标题标签，用于为
-
<audio>- 描述: 音频标签，用于嵌入音频内容。
- 案例:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频标签。 </audio>
-
<video>- 描述: 视频标签，用于嵌入视频内容。
- 案例:
<video controls width="320" height="240"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video>
-
<iframe>- 描述: 内嵌框架标签，用于嵌入另一个网页或媒体内容。
- 案例:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
-
<blockquote>- 描述: 块引用标签，用于定义从其他来源引用的内容。
- 案例:
<blockquote cite="https://www.example.com"> <p>这是一个引用段落。</p> </blockquote>
-
<q>- 描述: 短引用标签，用于定义短的行内引用。
- 案例:
<p>他说：<q>这是一个短引用。</q></p>
-
<cite>- 描述: 引用标签，用于定义作品的标题（如书籍、电影等）。
- 案例:
<p><cite>《哈利·波特》</cite>是一本非常受欢迎的书。</p>
-
<code>- 描述: 代码标签，用于定义计算机代码片段。
- 案例:
<p>使用<code>console.log()</code>函数来输出信息。</p>
-
<pre>- 描述: 预格式化文本标签，用于保留文本中的空格和换行。
- 案例:
<pre> 这是预格式化的文本。 它保留了所有的空格和换行。 </pre>
-
<em>- 描述: 强调标签，用于强调文本。
- 案例:
<p>这是<em>强调</em>的文本。</p>
-
<strong>- 描述: 重要标签，用于定义重要的文本。
- 案例:
<p>这是<strong>重要</strong>的文本。</p>
-
<small>- 描述: 小号文本标签，用于定义小号文本。
- 案例:
<p>这是正常文本<small>这是小号文本</small></p>
-
<mark>- 描述: 标记标签，用于高亮显示文本。
- 案例:
<p>这是<mark>高亮</mark>的文本。</p>
-
<sub>- 描述: 下标标签，用于定义下标文本。
- 案例:
<p>水的化学式是H<sub>2</sub>O。</p>
-
<sup>- 描述: 上标标签，用于定义上标文本。
- 案例:
<p>2<sup>3</sup>等于8。</p>
-
<del>- 描述: 删除标签，用于定义被删除的文本。
- 案例:
<p>这是<del>删除</del>的文本。</p>
-
<ins>- 描述: 插入标签，用于定义被插入的文本。
- 案例:
<p>这是<ins>插入</ins>的文本。</p>
-
<address>- 描述: 地址标签，用于定义文档或文章的联系信息。
- 案例:
<address> 联系我们：<a href="mailto:info@example.com">info@example.com</a> </address>
-
<time>- 描述: 时间标签，用于定义日期和时间。
- 案例:
<p>活动开始时间：<time datetime="2023-10-15T19:00">10月15日晚上7点</time></p>
-
<abbr>- 描述: 缩写标签，用于定义缩写词。
- 案例:
<p>HTML代表<abbr title="超文本标记语言">超文本标记语言</abbr>。</p>
-
<dfn>- 描述: 定义标签，用于定义术语。
- 案例:
<p><dfn>HTML</dfn>是一种用于创建网页的标准标记语言。</p>
-
<kbd>- 描述: 键盘输入标签，用于定义键盘输入。
- 案例:
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
-
<samp>- 描述: 样本输出标签，用于定义计算机程序的样本输出。
- 案例:
<p>程序输出：<samp>Hello, World!</samp></p>
-
<var>- 描述: 变量标签，用于定义数学变量或编程变量。
- 案例:
<p>设<var>x</var>为未知数。</p>
-
<bdo>- 描述: 双向文本覆盖标签，用于覆盖文本的方向。
- 案例:
<bdo dir="rtl">这是从右到左的文本。</bdo>
-
<bdi>- 描述: 双向隔离标签，用于隔离可能具有不同方向性的文本。
- 案例:
<p>他说：<bdi>مرحبا</bdi>（你好）。</p>
-
<ruby>- 描述: 注音标签，用于定义注音符号。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> </ruby>
-
<rt>- 描述: 注音文本标签，用于定义注音符号的文本。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> </ruby>
-
<rp>- 描述: 注音括号标签，用于在不支持注音符号的浏览器中显示括号。
- 案例:
<ruby> 漢 <rt>ㄏㄢˋ</rt> <rp>(</rp><rt>han</rt><rp>)</rp> </ruby>
-
<canvas>- 描述: 画布标签，用于通过脚本绘制图形。
- 案例:
<canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 150, 75); </script>
-
<svg>- 描述: 可缩放矢量图形标签，用于嵌入SVG图形。
- 案例:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
-
<math>- 描述: 数学标签，用于嵌入数学表达式。
- 案例:
<math> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math>
-
<noscript>- 描述: 无脚本标签，用于在不支持脚本的浏览器中显示内容。
- 案例:
<noscript> <p>您的浏览器不支持JavaScript。</p> </noscript>
-
<template>- 描述: 模板标签，用于定义可重复使用的HTML模板。
- 案例:
<template id="myTemplate"> <p>这是一个模板内容。</p> </template> <script> var template = document.getElementById('myTemplate').content; document.body.appendChild(template.cloneNode(true)); </script>
-
<script>- 描述: 脚本标签，用于嵌入或引用JavaScript代码。
- 案例:
<script> alert('Hello, World!'); </script>
-
<style>- 描述: 样式标签，用于嵌入CSS样式。
- 案例:
<style> body { background-color: lightblue; } </style>
-
<details>- 描述: 详细信息标签，用于创建可展开和折叠的内容。
- 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
-
<summary>- 描述: 摘要标签，用于定义
<details>元素的可见标题。 - 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
- 描述: 摘要标签，用于定义
-
<dialog>- 描述: 对话框标签，用于创建对话框或弹出窗口。
- 案例:
<dialog open> <p>这是一个对话框。</p> </dialog>
-
<meter>- 描述: 度量标签，用于显示已知范围内的标量测量值。
- 案例:
<meter value="7" min="0" max="10">7 out of 10</meter>
-
<progress>- 描述: 进度条标签，用于显示任务的进度。
- 案例:
<progress value="70" max="100">70%</progress>
-
<output>- 描述: 输出标签，用于显示计算结果。
- 案例:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="result" for="a b">100</output> </form>
-
<map>- 描述: 图像映射标签，用于定义图像映射。
- 案例:
<img src="image.jpg" usemap="#map1" alt="图像映射"> <map name="map1"> <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1"> <area shape="circle" coords="150,150,50" href="page2.html" alt="区域2"> </map>
-
<area>- 描述: 区域标签，用于定义图像映射中的可点击区域。
- 案例:
<img src="image.jpg" usemap="#map1" alt="图像映射"> <map name="map1"> <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1"> </map>
-
<object>- 描述: 对象标签，用于嵌入多媒体内容（如Flash、PDF等）。
- 案例:
<object data="movie.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"> </object>
-
<param>- 描述: 参数标签，用于为
<object>元素定义参数。 - 案例:
<object data="movie.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"> </object>
- 描述: 参数标签，用于为
-
<embed>- 描述: 嵌入标签，用于嵌入外部应用程序或交互内容。
- 案例:
<embed src="movie.swf" type="application/x-shockwave-flash">
-
<picture>- 描述: 图片标签，用于定义多个图像源以适应不同的设备或屏幕尺寸。
- 案例:
<picture> <source media="(min-width: 650px)" srcset="image-large.jpg"> <source media="(min-width: 465px)" srcset="image-medium.jpg"> <img src="image-small.jpg" alt="图片"> </picture>
-
<source>- 描述: 资源标签，用于为
<picture>、<audio>或<video>标签指定媒体资源。 - 案例:
<picture> <source media="(min-width: 650px)" srcset="image-large.jpg"> <img src="image-small.jpg" alt="图片"> </picture>
- 描述: 资源标签，用于为
-
<track>- 描述: 轨道标签，用于为
<audio>或<video>标签指定字幕或标题。 - 案例:
<video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> </video>
- 描述: 轨道标签，用于为
-
<wbr>- 描述: 换行机会标签，用于定义文本中的换行机会。
- 案例:
<p>这是一个非常长的单词，浏览器会自动换行，但您可以使用<wbr>标签来定义换行机会。</p>
-
<data>- 描述: 数据标签，用于将内容与机器可读的翻译关联起来。
- 案例:
<ul> <li><data value="21053">Cherry Tomato</data></li> <li><data value="21054">Beef Tomato</data></li> </ul>
-
<datalist>- 描述: 数据列表标签，用于为输入控件提供预定义选项。
- 案例:
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> </datalist>
-
<optgroup>- 描述: 选项组标签，用于对
<select>元素中的选项进行分组。 - 案例:
<select> <optgroup label="浏览器"> <option value="chrome">Chrome</option> <option value="firefox">Firefox</option> </optgroup> <optgroup label="操作系统"> <option value="windows">Windows</option> <option value="mac">Mac</option> </optgroup> </select>
- 描述: 选项组标签，用于对
-
<menu>- 描述: 菜单标签，用于定义命令菜单。
- 案例:
<menu> <li><button onclick="copy()">复制</button></li> <li><button onclick="paste()">粘贴</button></li> </menu>
-
<menuitem>- 描述: 菜单项标签，用于定义命令菜单中的项目。
- 案例:
<menu> <menuitem label="复制" onclick="copy()"></menuitem> <menuitem label="粘贴" onclick="paste()"></menuitem> </menu>
-
<summary>- 描述: 摘要标签，用于定义
<details>元素的可见标题。 - 案例:
<details> <summary>点击查看详细信息</summary> <p>这是详细信息内容。</p> </details>
- 描述: 摘要标签，用于定义
-
<dialog>- 描述: 对话框标签，用于创建对话框或弹出窗口。
- 案例:
<dialog open> <p>这是一个对话框。</p> </dialog>
-
<meter>- 描述: 度量标签，用于显示已知范围内的标量测量值。
- 案例:
<meter value="7" min="0" max="10">7 out of 10</meter>
-
<progress>- 描述: 进度条标签，用于显示任务的进度。
- 案例:
<progress value="70" max="100">70%</progress>
-
<output>- 描述: 输出标签，用于显示计算结果。
- 案例:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="result" for="a b">100</output> </form>
-
<map>- 描述: 图像映射标签，用于定义图像映射。
- 案例:
<img src="image.jpg"
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
