HTML
HTML基础标签
1.文件结构
<html>标签
HTML <html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
<head>标签
HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<body>标签
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
<title>标签
HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。
它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
<meta>
<meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>, <script>、<style>
或 <title>）之一表示的任何元数据信息。
常见属性：
charset：这个属性声明了文档的字符编码。如果使用了这个属性，
其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。
name：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，
其中 name 作为元数据的名称，content 作为元数据的值
icon
<link rel="icon" href="images/icon.png">
<!-- 多行注释 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="标题下面的内容" />
<meta name="keywords" content="计算机，算法，编程" />
<title>AcWing - Web应用课</title>
<link rel="icon" href="/images/logo.png" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
2.文本标签
文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>。
<div>标签
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，
其他块级标签例如：<h1>, <p>, <pre>, <ul>, <ol>, <table>。
<span>标签
<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。
可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性
应该在没有其他合适的语义元素时才使用它。
<span> 与 <div> 元素很相似，但 <div> 是一个块元素 而 <span> 则是 行内元素
其他内联标签例如：<i>, <b>, <del>, <ins>, <td>, <a>。
<h1> - <h6>标签（标题大小）
<p>标签
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，
或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
<pre>标签（p标签的整洁版）
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，
文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
<br>标签（回车）
<hr>标签（两段之间加一条分割线）
<i>标签（斜体）
<b>标签（粗体）
<del>标签（文字上加删除线）
<ins>标签
HTML <ins> 元素定义已经被插入文档中的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="标题下面的内容" />
<meta name="keywords" content="计算机，算法，编程" />
<title>AcWing - Web应用课</title>
<link rel="icon" href="/images/logo.png" />
</head>
<body>
<div>hello</div>
<div>
world
<span> !!! </span>
</div>
<div>
<h1>
你
<h6>好</h6>
</h1>
</div>
<!--分割线-->
<hr />
<div>
HTML
<pre>
cin
cout
<!--斜体-->
<i>cin和cou对齐 </i>
<!-- 元素（或者说 HTML段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，是块级元素。 -->
</pre>
<p>
cin
<!--回车-->
<br />
cout
<!--粗体+删除线-->
<del>
<b>没对齐</b>
</del>
<!-- 元素（或者说HTML段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，是块级元素。 -->
</p>
</div>
<hr />
<div>
<mark> 高亮 </mark>
</div>
</body>
</html>
运行结果：
3.图片
HTML <img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。
src属性：该属性是必须的，它包含了你想嵌入的图片的文件路径。
alt属性
该属性包含一条对图像的文本描述，这不是强制性的，
height属性：图像的高度
width属性：图像的宽度，
<body>
<img
width="300"
src="./images/mountain.jpg"
height="300"
alt="这是一座山"
/>
<img
width="300"
src="./images/mountain.jpg"
height="300"
alt="这是一座山"
/>
</body>
4.音频和视频
<audio>标签：HTML <audio> 元素用于在文档中嵌入音频内容
<video>标签:用于在 HTML 或者 XHTML 文档中嵌入媒体播放器
<body>
<audio controls >
<source src="/audios/bgm.mp31 " type="audio/mpeg" />
<source src="/audios/bgm.mp3 " type="audio/mpeg" />
</audio>
<video controls width="600" height="600">
<source src="videos/video1.mp4" type="video/mp4" />
</video>
</body>
5.超链接
HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
常用选项
点击链接打开新标签页面时加入属性：target="_blank"
<body>
<h1>超链接</h1>
<a href="https://www.acwing.com"> AcWing</a>
<a href="about.html"> About_测试</a>
</body>
6.表单
<form>标签
HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
<input>标签
HTML <input>用来填写内容，常见类型有：
<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入
<input type="email">：输入电子邮箱地址，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。
<input type="password">：输入密码
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，
常用属性有：
name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容
<textarea>标签
HTML <textarea>当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时
<select>与<option>标签
HTML <select> 元素表示一个提供选项菜单的控件。
<button>标签
HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
<body>
<h1>表单</h1>
<form action="/about.html">
<label for="username">用户名</label>
<input type="text" maxlength="5" name="username" id="username" />
<br />
<label for="usernumber"></label>
<input
placeholder="年龄"
type="number"
name="usernumber"
id="usernumber"
/>
<br />
<label for="cpp">cpp</label>
<input type="radio" name="lang" value="cpp" id="cpp" />
<br />
<label for="java">java</label>
<input type="radio" name="lang" value="java" id="java" />
<br />
<button type="submit">提交</button>
<input type="file" />
<hr />
<label for="pinlun">评论</label>
<textarea name="pinlun" id="pinlun" cols="30" rows="10"></textarea>
<hr />
<label for="langs">语言</label>
<select name="langs" id="langs">
<option value="cpp">cpp</option>
<option selected value="java">java</option>
</select>
</form>
</body>
运行结果：
7.列表
<ul>与<li>标签
HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
示例：
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<ol>与<li>标签
HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。
示例：
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
<dl>、<dt>与<dd>标签
HTML <dl> 元素 是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
示例：
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
<dd>Orange</dd>
</dl>
dd是有缩进的
dt是没有缩进的
<body>
<div>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
<div>
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
</div>
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
<dd>Orange</dd>
</dl>
</body>
8.表格
<table>标签
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
<thead>标签
HTML的<thead>表头
<tbody>标签
HTML的<tbody>数据区
<tr>标签
HTML <tr> 表格中的行
<th>标签
HTML <th>表格内的表头单元格。
<td>标签
HTML <td>数据区的表格单元格。
<caption>标签
HTML <caption>表格的标题
<body>
<table>
<caption>
成绩单
</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>czl</td>
<td>1</td>
<td>100</td>
</tr>
<tr>
<td>qzz</td>
<td>1</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
9.语义标签
<header>
HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。
它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<nav>
HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航
<section>
HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
<figure>
HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。
当它属于主内容流（main flow）时，它的位置独立于主体。
这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
<figcaption>
HTML <figcaption> 元素 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。
这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；
如果没有该元素，这个父节点的图片只是会没有说明/标题。
<article>
HTML <article>元素表示文档、页面、应用或网站中的独立结构，
其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，
或者其他独立的内容项目。
<aside>
HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，
被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
其通常表现为侧边栏或者标注框（call-out boxes）。
<footer>
HTML <footer> 页脚
<body>
<h3>收藏</h3>
<ul>
<li><a href="/images/mountain.jpg">图片1</a></li>
<li><a href="/images/mountain.jpg">图片2</a></li>
</ul>
<hr />
<section>
<figure>
<img src="/images/mountain.jpg" width="100" alt="shan" />
<figcaption>山</figcaption>
</figure>
</section>
<section>
<h3>文章</h3>
<article>在主文中引用的图片，插图，表格，代码段等等</article>
<article>在主文中引用的图片，插图，表格，代码段等等</article>
<article>在主文中引用的图片，插图，表格，代码段等等</article>
</section>
<hr />
<footer>2024.3.12</footer>
</body>
运行结果：
10.特殊符号
其他
1.MDN官方文档
2.下载VSCode
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
