前端开发技术
HTML/CSS
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。
基本标签
1. <div>：定义文档中的一个分区或节，常用于页面布局和样式化。
<div>这是一个分区</div>2. <p>：定义段落。
<p>这是一个段落。</p>3. <a>：定义超链接，用于链接到其他网页或网页中的某个部分。
<a href="https://www.baidu.com">访问示例网站</a>4. <img>：定义图像。
<img src="image.jpg" alt="描述图片内容">文档结构标签
1. <html>：定义整个HTML文档。
<html>
<!-- 文档内容 -->
</html>2. <head>：包含文档的元数据，如标题、字符编码声明、样式表链接、脚本链接等。
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<!-- 其他元数据 -->
</head>3. <body>：包含网页的所有内容，如文本、图片、视频、游戏、可播放的音频等。
<body>
<!-- 页面内容 -->
</body>4. <header>：定义文档或节的页眉。
<header>
<h1>页面标题</h1>
</header>5. <footer>：定义文档或节的页脚。
<footer>
<p>版权所有 © 2023</p>
</footer>文本标签
1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。
<h1>这是标题1</h1>
<h2>这是标题2</h2>2. <em>：定义强调文本。
<em>强调文本</em>3. <strong>：定义重要文本。
<strong>重要文本</strong>4. <blockquote>：定义长引用。
<blockquote>
这是一个长引用。
</blockquote>5. <q>：定义短引用。
<q>这是一个短引用。</q>列表标签
1. <ul>：定义无序列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>2. <ol>：定义有序列表。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>3. <li>：定义列表项。
<li>列表项</li>表格标签
1. <table>：定义表格。
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>2. <tr>：定义表格中的行。
<tr>
<!-- 行内容 -->
</tr>3. <th>：定义表格中的表头单元格。
<th>表头</th>4. <td>：定义表格中的标准单元格。
<td>单元格内容</td>媒体标签
1. <audio>：定义音频内容。
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>2. <video>：定义视频内容。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>3. <iframe>：定义内联框架，用于嵌入另一个HTML页面。
<iframe src="https://www.example.com"></iframe>文档章节标签
1. <article>：定义独立的内容区块，比如博客条目或新闻文章。
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>2. <section>：定义文档中的一个章节，比如章节、页眉、页脚或文档中的其他部分。
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
</section>3. <nav>：定义导航链接的部分。
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>文本格式化标签
1. <b>：定义粗体文本，没有语义上的强调。
<b>粗体文本</b>2. <i>：定义斜体文本，没有语义上的强调。
<i>斜体文本</i>3. <sub>：定义下标文本。
H<sub>2</sub>O4. <sup>：定义上标文本。
X<sup>2</sup>5. <pre>：定义预格式化文本，保留空格和换行符。
<pre>
文本行的 空格和
换行都会被保留。
</pre>元数据标签
1. <meta>：定义关于HTML文档的元数据，比如字符集、页面描述、关键字等。
<meta charset="UTF-8">
<meta name="description" content="这是一个示例页面">2. <link>：定义文档与外部资源之间的关系，比如样式表或预加载的图片。
<link rel="stylesheet" type="text/css" href="style.css">其他标签
1. <details>：定义用户可以展开或折叠的详细信息。
<details>
<summary>点击查看详细信息</summary>
<p>这里是详细信息...</p>
</details>2. <dialog>：定义对话框或窗口。
<dialog open>
<p>这是一个对话框。</p>
</dialog>3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
<figure>
<img src="example.jpg" alt="示例图片">
<figcaption>这是图片的说明</figcaption>
</figure>4. <mark>：定义标记或高亮的文本。
<p>你需要<mark>标记</mark>这段文本。</p>5. <samp>：定义示例输出文本。
<samp>This is sample text.</samp>6. <kbd>：定义键盘输入文本。
<kbd>CTRL+C</kbd>表单相关标签
1. <select>：定义下拉列表。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>2. <optgroup>：定义选项组。
<select name="cars">
<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>3. <textarea>：定义多行文本输入控件。
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>表格相关标签
1. <caption>：定义表格标题。
<table>
<caption>我的表格标题</caption>
<!-- 表格内容 -->
</table>2. <colgroup> 和 <col>：定义表格列的组，并设置列的属性。
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<!-- 表格内容 -->
</table>分组和划分标签
1. <fieldset>：定义表单中的相关元素分组。
<form>
<fieldset>
<legend>健康信息</legend>
身高: <input type="text" name="height">
体重: <input type="text" name="weight">
</fieldset>
</form>2. <legend>：定义 <fieldset> 元素的标题。
<fieldset>
<legend>个人详细信息</legend>
<!-- 表单内容 -->
</fieldset>Ruby 标签
1. <ruby>：定义 Ruby 注释（用于东亚文字）。
<ruby>
汉 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>2. <rt>：定义字符的解释或发音。
<ruby>汉 <rt>han</rt></ruby>3. <rp>：定义当浏览器不支持 <ruby> 元素时显示的内容。
<ruby>汉 <rp>(</rp><rt>han</rt><rp>)</rp></ruby>其他标签
1. <output>：定义不同类型的输出，比如脚本的输出。
<output id="result" onforminput="resCalc()"></output>2. <progress>：定义任务的进度（进程）。
<progress value="22" max="100"></progress>3. <meter>：定义已知范围（尺度）内的标量测量。
<meter value="3" min="0" max="10" low="4" high="6" optimum="5"></meter>4. <template>：定义模板内容，可以在运行时使用 JavaScript 呈现。
<template id="template">
<p>这是一个模板内容。</p>
</template>5. <noscript>：定义当浏览器不支持脚本或者脚本被禁用时显示的内容。
<noscript>抱歉，您的浏览器不支持JavaScript。</noscript>新的 HTML5 语义标签
1. <main>：定义文档的主要内容区域。
<main>
<!-- 页面的主要内容 -->
</main>2. <aside>：定义页面内容之外的内容，比如侧边栏或嵌入内容。
<aside>
<!-- 侧边栏内容 -->
</aside>3. <header>：定义页面或区段的页眉。
<header>
<!-- 页眉内容 -->
</header>4. <footer>：定义页面或区段的页脚。
<footer>
<!-- 页脚内容 -->
</footer>5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>
元素的标题或说明。
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption>这是图片的说明</figcaption>
</figure>媒体和图形标签
1. <canvas>：通过 JavaScript 绘制图形和动画。
<canvas id="myCanvas" width="200" height="100"></canvas>2. <svg>：定义 SVG 图形的容器。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>3. <embed>：嵌入外部内容，如插件。
<embed src="movie.swf" type="application/x-shockwave-flash">4. <video>：定义视频内容。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>5. <audio>：定义音频内容。
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>文档和元数据标签
1. <datalist>：定义输入字段的选项列表。
<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>2. <keygen>：定义生成密钥的表单字段（已在 HTML5.1 中被弃用）。
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>3. <output>：定义不同类型的输出，比如脚本的输出。
<output id="result" onforminput="resCalc()"></output>其他标签
1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5
中已废弃）。
<menu>
<menuitem label="Refresh" onclick="window.location.reload();">
</menu>2. <command>：定义命令按钮（HTML5 中已废弃）。
<menu>
<command type="command" label="Save" onclick="saveDoc()">
</menu>表单<form>和输入<input>元素
表单（<form>）和输入（<input>）元素是HTML中用于创建交互式网页的关键部分，它们允
许用户输入数据，这些数据可以被网页或服务器处理。
<form> 元素
<form> 元素用于创建一个HTML表单，用户可以在其中输入数据，比如文本、选择选项或上
传文件。表单数据通常被发送到服务器进行进一步处理。
以下是一些 <form> 元素的属性：
action：指定表单数据提交时应该发送到的URL。
method：指定提交表单数据时使用的HTTP方法，通常是 get 或 post。
enctype：当 method 属性为 post 时，enctype 指定表单数据的编码类型，常用的值有
application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件
上传）和 text/plain。
<form action="submit.php" method="post" enctype="multipart/form-data">
<!-- 表单内容 -->
</form><input> 元素
<input> 元素是表单中最常用的元素，用于收集用户输入的数据。
以下是一些 <input> 元素的属性和类型：
type：定义输入字段类型，如文本、密码、复选框等。
name：定义输入字段的名称，用于在提交表单时识别数据。
value：定义输入字段的值。
placeholder：提供输入框的提示信息。
required：指定输入字段是必填的。
disabled：禁用输入字段，使其不可编辑。
下面是一些常见的 <input> 类型：
1. 文本框：
<input type="text" name="username" placeholder="请输入用户名" required>2. 密码框：
<input type="password" name="password" placeholder="请输入密码" required>3. 单选按钮：
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女4. 复选框：
<input type="checkbox" name="hobby" value="sports"> 运动
<input type="checkbox" name="hobby" value="reading"> 阅读5. 下拉列表：
<select name="country">
<option value="usa">美国</option>
<option value="canada">加拿大</option>
<option value="uk">英国</option>
</select>6. 文本域：
<textarea name="message" rows="4" cols="50" placeholder="请输入您的留言"></textarea>7. 文件上传：
<input type="file" name="fileupload">8. 提交按钮：
<input type="submit" value="提交">9. 重置按钮：
<input type="reset" value="重置">当用户填写表单并点击提交按钮时，表单数据将被发送到服务器上指定的URL（由 action 属
性指定），并按照指定的方法（由 method 属性指定）进行提交。
随着时间的推移，一些标签可能会被弃用或替换，因此最好查看最新的 HTML 规范以获取最
准确的信息。
最新的 HTML 规范可以在万维网联盟（World Wide Web Consortium，简称 W3C）的官方网
站上查看。
以下是查看最新 HTML 规范的步骤：
1. 访问 W3C 的官方网站：[https://www.w3.org/](https://www.w3.org/)
2. 在网站上找到“Standards”或“规范”部分。
3. 在规范列表中找到 HTML 相关的规范。
4. 选择最新的 HTML 规范版本进行查看。
或者，你可以直接访问以下链接来查看最新的 HTML 规范：
HTML 5.3: https://www.w3.org/TR/html53/](https://www.w3.org/TR/html53/
HTML 5.2: https://www.w3.org/TR/html52/](https://www.w3.org/TR/html52/
HTML 5.1: https://www.w3.org/TR/html51/](https://www.w3.org/TR/html51/
HTML 5.0: https://www.w3.org/TR/html5/](https://www.w3.org/TR/html5/
随着技术的发展，HTML 规范可能会更新。
因此，建议定期查看 W3C 的网站以获取最新的规范信息。
