前端开发技术之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 的网站以获取最新的规范信息。

前端开发技术之HTML/CSS

前端开发技术

基本标签

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

模仿电影中黑客电脑界面，html装逼代码

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

在IntelliJ IDEA中创建一个HTML项目

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<head>

	<title>页面标题</title>

	<meta charset="UTF-8">

	<!-- 其他元数据 -->

	</head>

	<table>

	<tr>

	<th>表头1</th>

	<th>表头2</th>

	</tr>

	<tr>

	<td>单元格1</td>

	<td>单元格2</td>

	</tr>

	</table>

	<audio controls>

	<source src="horse.mp3" type="audio/mpeg">

	您的浏览器不支持 audio 元素。

	</audio>

	<video width="320" height="240" controls>

	<source src="movie.mp4" type="video/mp4">

	您的浏览器不支持 video 元素。

	</video>

	<article>

	<h2>文章标题</h2>

	<p>文章内容...</p>

	</article>

	<section>

	<h2>章节标题</h2>

	<p>章节内容...</p>

	</section>

	<nav>

	<ul>

	<li><a href="#home">首页</a></li>

	<li><a href="#news">新闻</a></li>

	<li><a href="#contact">联系方式</a></li>

	</ul>

	</nav>

	<meta charset="UTF-8">

	<meta name="description" content="这是一个示例页面">

	<details>

	<summary>点击查看详细信息</summary>

	<p>这里是详细信息...</p>

	</details>

	<figure>

	<img src="example.jpg" alt="示例图片">

	<figcaption>这是图片的说明</figcaption>

	</figure>

	<h1>这是标题1</h1>

	<h2>这是标题2</h2>

	<pre>

	文本行的空格和

	换行都会被保留。

	</pre>

	<select name="cars">

	<option value="volvo">Volvo</option>

	<option value="saab">Saab</option>

	<option value="mercedes">Mercedes</option>

	<option value="audi">Audi</option>

	</select>

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

	<textarea name="message" rows="10" cols="30">

	The cat was playing in the garden.

	</textarea>

	<table>

	<caption>我的表格标题</caption>

	<!-- 表格内容 -->

	</table>

	<table>

	<colgroup>

	<col span="2" style="background-color:red">

	<col style="background-color:yellow">

	</colgroup>

	<!-- 表格内容 -->

	</table>

	<form>

	<fieldset>

	<legend>健康信息</legend>

	身高: <input type="text" name="height">

	体重: <input type="text" name="weight">

	</fieldset>

	</form>

	<fieldset>

	<legend>个人详细信息</legend>

	<!-- 表单内容 -->

	</fieldset>

	<ruby>

	汉 <rp>(</rp><rt>han</rt><rp>)</rp>

	字 <rp>(</rp><rt>zi</rt><rp>)</rp>

	</ruby>

	<template id="template">

	<p>这是一个模板内容。</p>

	</template>

	<figure>

	<img src="image.jpg" alt="示例图片">

	<figcaption>这是图片的说明</figcaption>

	</figure>

前端开发技术之HTML/CSS

前端开发技术

基本标签

微信扫一扫：分享

	<svg width="100" height="100">

	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

	</svg>

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

	<form action="demo_form.asp" method="get">

	Username: <input type="text" name="usr_name">

	Encryption: <keygen name="security">

	<input type="submit">

	</form>

	<menu>

	<menuitem label="Refresh" onclick="window.location.reload();">

	</menu>

	<menu>

	<command type="command" label="Save" onclick="saveDoc()">

	</menu>

	<form action="submit.php" method="post" enctype="multipart/form-data">

	<!-- 表单内容 -->

	</form>

	<input type="radio" name="gender" value="male"> 男

	<input type="radio" name="gender" value="female"> 女

	<input type="checkbox" name="hobby" value="sports"> 运动

	<input type="checkbox" name="hobby" value="reading"> 阅读

	<select name="country">

	<option value="usa">美国</option>

	<option value="canada">加拿大</option>

	<option value="uk">英国</option>

	</select>