前端开发技术之HTML/CSS

前端开发技术

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>O

4. <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 的网站以获取最新的规范信息。