HTML5+CSS——Day4
HTML5新元素
将HTML5元素定义为块（行、行内块元素）元素
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:（块元素）inline（行元素）inline-block（行内块）元素
header, section, footer, aside, nav, main, article, figure {
display: block;
}
为 HTML 添加新元素(自定义标签)
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
HTML语义化
HTML语义化是指在编写HTML代码时，使用适当的标签和元素来描述内容的结构和含义，以使页面具有良好的结构和可读性。
HTML5新标签的优点:
- 更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的让人明白存放的是什么东西；
- 对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
- 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
- 代码更加的简洁；
HTML5特性
HTML5的改进
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
HTML5多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
- HTML5 video
- HTML5 audio
HTML5应用
使用 HTML5 你可以简单地开发应用
- 本地数据存储
- 访问本地文件
- 本地 SQL 数据
- 缓存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5图形
使用 HTML5 你可以简单的绘制图形
- 使用 元素。
- 使用内联 SVG。
- 使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5使用CSS3
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
新语义元素
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
| 定义页面独立的内容区域 | |
| 定义页面的侧边栏内容 | |
| 允许您设置一段文本，使其脱离其父元素的文本方向设置 | |
| 定义命令按钮，比如单选按钮、复选框或按钮 | |
| 用于描述文档或文档某个部分的细节 | |
| 定义对话框，比如提示框 | |
| 标签包含details元素的标题 | |
|
| 规定独立的流内容(图像、图表、照片、代码等等)。 |
|
| 定义
|
| 定义section或document的页脚 | |
|
| 定义了文档的头部区域 |
| 定义带有记号的文本 | |
| 定义度量衡。仅用于已知最大和最小值的度量 | |
| 定义导航链接的部分 | |
| 定义任何类型的任务的进度。 | |
| 定义ruby注释(中文注音或字符) | |
| 定义字符（中文注音或字符）的解释或发音。 | |
| 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 | |
| 定义文档中的节（section、区段）。 | |
| 定义日期或时间 | |
| 规定在文本中的何处适合添加换行符 |
HTML5表单
新表单元素, 新属性，新输入类型，自动验证。
HTML5新布局标签
许多现有网站都包含以下HTML代码：
首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现。
HTML5除了提出很炫的新效果以外还加强了语义化结构
HTML5新增的还有article、nav、header、footer…等等等，其实现效果都是和div一样没有效果，但是合理使用却能让页面结构更加清晰有逻辑。
如果了解H5之前的HTML，会发现之前页面布局完全就是使用的div+css,但是div是不能滥用的,只能用来做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构 有条理才能让搜索引擎更加友好。
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
- header
- nav
- section
- article
- aside
- figcaption
- figure
- footer
HTML5 header元素
在HTML5中，<header>元素用于表示页面或区域的头部。它通常包含一些引导性的信息，如网站的标志、主导航、搜索框等。以下是一些使用<header>元素的常见示例：
- 网页头部：
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
- 区域头部：
<section>
<header>
<h2>Featured Products</h2>
<p>Check out our latest and greatest products.</p>
</header>
<div>
<!-- 区域内容 -->
</div>
</section>
<header>元素可以包含任何其他HTML元素，用于构建页面或区域的标题和导航部分。请注意，一个页面可以包含多个<header>元素，但应仅用于表示页面或区域的真正头部。在使用<header>元素时，确保按照语义化的原则合理地标记和组织页面的内容结构。
HTML5 nav元素
在HTML5中，<nav>元素用于表示导航部分，即页面或区域的导航菜单。<nav>元素内通常包含了一组导航链接或菜单项。以下是一些使用<nav>元素的示例：
- 网站主导航：
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
- 页面局部导航：
<section>
<nav>
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
</ul>
</nav>
<div>
<!-- 区域内容 -->
</div>
</section>
请注意，<nav>元素并不一定要包含<ul>和<li>，它可以包含任何与导航相关的元素，如<a>、<div>等。使用<nav>元素有助于语义化地标记和组织导航内容，让页面更具可读性和可访问性。同时，搜索引擎也可以使用<nav>元素更好地理解页面的导航结构。
HTML5 article元素
在HTML5中，<article>元素用于表示独立的、完整的、能够独立存在或分发的内容。它通常被用作独立的博客文章、新闻报道、帖子等。以下是一些使用<article>元素的示例：
<article>
<header>
<h1>Article Title</h1>
<p>Author: John Doe</p>
<p>Date: July 17, 2023</p>
</header>
<p>This is the content of the article.</p>
<p>It can include paragraphs, images, videos, and other elements.</p>
<footer>
<p>Tags: HTML, CSS, Web Development</p>
<p>Share: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Email</a></p>
</footer>
</article>
<article>元素可以包含任何其他HTML元素，用于构建独立的、完整的内容块。它应该具有自我包含、完整和可独立使用的特性。通常情况下，每个<article>元素都应具备标题、作者、日期等信息。
使用<article>元素有助于语义化地标记和组织独立内容，提供更好的结构和可读性。此外，一些浏览器和搜索引擎还可以使用<article>元素来提供更好的阅读体验和搜索结果。
HTML5 aside元素
在HTML5中，<aside>元素用于表示页面或文章的次要内容，通常是与主要内容相关但不是核心部分的内容。它可以被认为是一种侧边栏，用于补充或扩展主要内容。以下是一些使用<aside>元素的示例：
<article>
<h1>Article Title</h1>
<p>This is the main content of the article.</p>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</article>
<section>
<h2>Section Title</h2>
<p>This is the main content of the section.</p>
<aside>
<h3>Additional Information</h3>
<p>Some extra details or side notes.</p>
</aside>
</section>
<aside> 元素可以包含任何与主要内容相关但不是核心部分的内容，如侧边栏、引用、解释、广告等。它的位置可以是在主要内容的旁边，或者是在内容的内部提供额外的信息。
使用 <aside> 元素有助于语义化地标记和组织页面或文章的次要内容，提高可读性和可访问性。同时，它还能帮助搜索引擎更好地理解页面的结构和内容关联性。
HTML5 footer元素
在HTML5中，<footer>元素用于表示页面、区域或文章的页脚部分。它通常包含与页面相关的版权信息、联系方式、导航链接等内容。以下是一些使用<footer>元素的示例：
<footer>
<p>© 2023 My Website. All rights reserved.</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</footer>
<article>
<h1>Article Title</h1>
<p>This is the content of the article.</p>
<footer>
<p>Written by John Doe</p>
<p>Date: July 17, 2023</p>
<p>Tags: HTML, CSS, Web Development</p>
</footer>
</article>
<footer>元素可以包含任何与页脚相关的内容，如版权信息、联系方式、导航链接、作者信息等。它在页面底部提供了一个固定的区域来呈现这些信息。
使用<footer>元素有助于语义化地标记和组织页面的页脚内容，提高可读性和可访问性。同时，它还能帮助搜索引擎更好地理解页面的结构和信息。
HTML5 figure和figcaption元素
在HTML5中，<figure>元素用于表示一段独立的媒体内容，通常是图片、图表、音频、视频等。而<figcaption>元素被用作<figure>元素的标题或说明。
<figure>元素包含了一个独立的媒体内容，可以通过<img>、<video>、<audio>等标签来呈现。<figcaption>元素则用于提供与媒体内容相关的标题或描述。以下是一个使用<figure>和<figcaption>的示例：
<figure>
<img src="image.jpg" alt="A beautiful image">
<figcaption>This is a beautiful image.</figcaption>
</figure>
在上面的示例中，<figure>元素包含了一个图片作为独立的媒体内容，而<figcaption>元素提供了与图片相关的标题或描述。
<figure>和<figcaption>元素常用于展示包含图像、图表、音视频等具有说明性的内容。它们有助于语义化地标记和组织这些内容，提高可读性和可访问性。
需要注意的是，<figcaption>元素必须是<figure>元素的第一个或最后一个子元素，以确保正确的关联。
HTML5新表单元素
HTML5新的input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 电子邮箱 | 包含e-mail地址的输入域（有校验） | |
| 拾色器 | color | color 类型用在input字段主要用于选取颜色 选择你喜欢的颜色: |
| 日期字段 | date datetime datetime-local month week time | 定义日期字段：包含年月日 定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月 定义年中的周数 定义时间 |
| 数值框 | number | 输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。 使用min属性和max属性设置最小和最大值 step设置数字间隔 如果step=“3” ,那么数值间隔是3 |
| 数值滑块空间 | range | 用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。 使用min属性和max属性设置最小和最大值,step设置数字间隔 |
| 搜索框 | search | 用于搜索字段，比如站内搜索或谷歌搜索等。 |
| 电话号码框 | tel | 定义输入电话号码字段，但是不会进行校验 |
| url地址 | url | 包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。 |
HTML5新的表单控件
HTML5 datalist元素（重要）
在HTML5中，<datalist>元素用于定义输入字段的预定义选项。它通常与<input>元素的list属性配合使用，提供输入建议或自动完成的功能。<datalist>元素包含一个或多个<option>元素，用于定义可供选择的选项。
以下是一个使用<datalist>元素的示例：
<label for="fruit">Choose a fruit:</label>
<input type="text" id="fruit" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Mango">
<option value="Grapes">
</datalist>
在上述示例中，输入框通过list属性与<datalist>元素建立了关联。当用户在输入框中开始输入时，浏览器会显示来自<datalist>中的可选项，并根据用户的输入进行筛选。
<datalist>元素可以包含多个<option>元素。每个<option>元素都表示一个可选的预定义值。用户可以选择其中一个值，或根据输入进行自动完成。
使用<datalist>元素可以提供更好的用户体验，帮助用户快速选择预定义的选项，减少输入错误的可能性。
需要注意的是，<datalist>元素只是提供了选项列表，它本身不显示在页面上。真正显示的是与<datalist>关联的<input>元素。
HTML5新的表单属性
HTML5 的 和 标签添加了几个新属性.
新属性：- autocomplete
- novalidate
新属性：
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 与 width
- list
- min 与 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
form / input autocomplete属性
autocomplete属性是HTML表单中的一个属性，用于指示浏览器是否可以自动填充表单字段的值。它可以与<input>、<select>和<textarea>等表单元素一起使用。
autocomplete属性有以下可选值：
on：浏览器可以自动填充该字段的值。这是默认值。off：浏览器不应自动填充该字段的值。name：浏览器可以根据用户先前输入的指定名称的值来填充字段。这对于登录表单很有用，使用户可以选择他们之前使用过的用户名。email：浏览器可以根据用户先前输入的电子邮件地址来填充字段。username：浏览器可以根据用户先前输入的用户名来填充字段。new-password：浏览器可以根据用户先前保存的密码来填充字段，但应提示用户输入一个新密码。current-password：浏览器可以根据用户先前保存的密码来填充字段，但应提示用户输入当前密码以进行验证。
示例用法：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" autocomplete="username">
<label for="password">密码：</label>
<input type="password" id="password" name="password" autocomplete="current-password">
<input type="submit" value="提交">
</form>
在上面的示例中，autocomplete属性分别设置为username和current-password，告诉浏览器可以根据用户先前的输入来自动填充这些字段的值。
form novalidate属性
novalidate属性是HTML表单中的一个布尔属性，用于指示浏览器在提交表单时是否应该执行验证。
当novalidate属性被添加到<form>元素上时，浏览器将不会执行内置的验证检查，而是允许提交表单的所有数据。这意味着即使用户没有填写必填字段或者字段的值不符合规定的格式，表单也可以被提交。
使用novalidate属性的主要用途是在需要自定义客户端验证逻辑时，阻止浏览器的默认验证行为。你可以通过JavaScript来编写自定义的表单验证代码，并在需要时调用该代码。
以下是一个示例，展示了如何在提交表单时阻止浏览器默认的验证行为：
<form novalidate>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
在上面的示例中，novalidate属性被添加到<form>元素上，这样浏览器就不会执行默认的验证检查。当用户点击提交按钮时，即使name和email字段没有被填写，表单也会被提交。
请注意，使用novalidate属性可能会导致无效或不完整的数据被提交到服务器上，因此在使用此属性时，请确保在服务器端进行适当的验证。
input placeholder属性
placeholder属性是HTML <input>元素中的一个属性，用于为输入字段提供一个占位文本。占位文本是在输入字段为空时显示的提示文本，它通常描述了预期的输入值或提供了一些上下文信息。
当用户在输入字段中输入内容时，占位文本会自动消失，以便用户能够输入自己的值。
以下是一个示例，展示了如何使用placeholder属性：
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">
在上面的示例中，placeholder属性被设置为"请输入您的姓名"。当输入字段为空时，用户将看到这个占位文本。一旦用户开始输入内容，占位文本会自动消失。
placeholder属性对于提供输入字段的预期格式、提供示例输入或简要说明是很有用的。然而，它并不代替合适的表单验证和标签说明。确保在使用placeholder属性时，仍然提供明确的标签和必要的验证来帮助用户正确填写表单。
input required属性
required属性是HTML <input>元素中的一个布尔属性，用于指示输入字段是否为必填字段。当设置了required属性时，浏览器会在提交表单之前验证该字段是否已填写内容。
如果用户提交表单且必填字段为空，则浏览器会显示一个验证提示，指示用户必须填写该字段才能继续提交。
以下是一个示例，展示了如何使用required属性：
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
在上面的示例中，required属性被添加到<input>元素中，表示"邮箱"字段是必填的。如果用户提交表单时未填写邮箱字段，浏览器会显示验证错误，并阻止表单的提交。通常，浏览器会显示一个默认的验证提示，例如"请填写此字段"。
required属性对于确保用户提供必要信息非常有用，以便在后续处理或验证中使用。请注意，虽然浏览器会在客户端验证必填字段，但仍建议在服务器端进行进一步验证，以确保数据的完整性和安全性。
input step属性
step属性是HTML <input>元素中的一个属性，主要用于指定有效数字间隔的步长。
这个属性常用于<input>元素的类型为"number"、“date”、"time"和"datetime-local"时，它控制着用户在输入字段中可以选择或输入的值的间隔。
具体取值根据输入字段类型的不同而不同：
- 对于
type="number"的输入字段，step属性接受任何十进制或科学计数法表示的数字。这决定了用户在输入字段中选择或输入的数字的有效步长。例如，step="0.01"可以允许用户选择或输入小数点后两位的数字。 - 对于
type="date"的输入字段，step属性可以接受一个表示日期间隔的字符串。这可以是一个标准的日期格式，例如"1"（表示每隔一天）或"2"（表示每隔两天），或者是"week"（表示每隔一周）或"month"（表示每隔一个月）等。 - 对于
type="time"的输入字段，step属性可以接受一个表示时间间隔的字符串。这可以是一个标准的时间格式，例如"1"（表示每隔一秒）或"2"（表示每隔两秒）等。 - 对于
type="datetime-local"的输入字段，step属性可以接受一个表示日期时间间隔的字符串，具体格式类似于日期和时间的组合。
以下是一个示例，展示了如何使用step属性：
<label for="price">价格：</label>
<input type="number" id="price" name="price" step="0.01" min="0" max="100">
在上面的示例中，step属性被设置为"0.01"，表示用户在输入价格时可以选择或输入的有效步长为小数点后两位。
请注意，step属性仅影响用户输入的有效性，并不能完全限制或控制输入的准确性。因此，为了确保数据的准确性和完整性，仍然需要在服务器端进行适当的验证和处理。
input autofocus属性
autofocus属性是HTML <input>元素中的一个布尔属性，用于在页面加载完毕后自动设置输入字段为焦点状态，即自动将光标置于输入字段中，以便用户可以立即开始输入。
当页面加载完成后，如果存在一个具有autofocus属性的输入字段，浏览器将自动对其进行焦点设置，而无需用户手动点击或选择该字段。
以下是一个示例，展示了如何使用autofocus属性：
<label for="name">姓名：</label>
<input type="text" id="name" name="name" autofocus>
在上面的示例中，autofocus属性被添加到<input>元素中，表示"姓名"字段在页面加载后会自动获得焦点。这使得用户无需点击或选择该输入字段，直接就可以开始输入姓名。
autofocus属性可以在页面上的一个输入字段上使用，也可以同时在多个输入字段上使用，但实际上只有一个输入字段可以获得焦点。
请注意，虽然在某些情况下自动设置输入字段焦点可能提供良好的用户体验，但在其他情况下，这可能会干扰用户的正常操作。因此，提供良好的可用性和用户友好性仍然需要综合考虑，并慎重使用autofocus属性。
input form属性
form属性是HTML <input>元素中的一个属性，用于指定一个输入字段所属的表单。
当将form属性设置为一个表单的id属性值时，该输入字段就会被归属于指定的表单。这意味着在提交表单时，该输入字段的值将包含在表单数据中。
以下是一个示例，展示了如何使用form属性：
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" form="myForm">
</form>
在上面的示例中，form属性被设置为"myForm"，表示"姓名"字段属于具有id="myForm"的表单。
通过将输入字段的form属性设置为相应表单的id，可以根据需要在同一个页面上组织和管理多个表单，并将输入字段与相应的表单关联起来。
请注意，如果没有为输入字段指定form属性，该字段将被默认归属于最近的父级<form>元素，或者如果没有包含在<form>元素中，则被视为单独的表单，也就是说在form属性中设置form值没有意义。
另外，form属性对于某些输入字段类型（例如<button>或<input type="submit">）也是适用的，用于指定该按钮或提交按钮所属的表单。
input formaction属性
formaction属性是HTML <input>元素中的一个属性，用于指定表单提交时的目标URL。
当在表单中包含一个按钮或提交按钮时，可以使用formaction属性来指定提交表单时要发送数据的URL。这允许您为不同的按钮指定不同的处理程序或目标URL。
以下是一个示例，展示了如何使用formaction属性：
<form action="/submitHandler">
<input type="text" name="name">
<button type="submit" formaction="/submitHandler1">提交到处理程序 1</button>
<button type="submit" formaction="/submitHandler2">提交到处理程序 2</button>
</form>
在上面的例子中，formaction属性被分别添加到两个提交按钮上，它们分别指定了不同的处理程序URL。当用户点击第一个按钮时，表单数据将通过指定的/submitHandler1 URL进行提交；点击第二个按钮时，表单数据将通过指定的/submitHandler2 URL进行提交。
请注意，formaction属性是针对按钮或提交按钮的，而不是输入字段本身。它仅适用于拥有type="submit"或type="image"的<button>元素或<input>元素。
如果在form元素的action属性中指定了URL，并且按钮或提交按钮没有指定formaction属性，则表单会提交到action属性中指定的URL。
请确保目标URL的处理程序能够正确处理表单提交，并响应相应的逻辑处理或显示结果。
input formenctype属性
formenctype属性是HTML <input>元素中的一个属性，在将表单数据提交到服务器时用于指定数据的编码类型。
当使用表单提交数据时，浏览器默认使用URL编码 (application/x-www-form-urlencoded)。然而，通过使用formenctype属性，可以指定其他编码类型，例如multipart/form-data 或 text/plain。
以下是三种常用的formenctype属性的取值和作用：
-
application/x-www-form-urlencoded（默认值）：这是最常用的编码类型。它将表单数据转换为URL编码格式，适合于大多数表单提交。这种类型的编码对于处理简单的文本数据很有效。 -
multipart/form-data：这种编码类型适用于包含二进制数据（例如文件上传）的表单。它可以将多个部分的数据合并为一个请求，并且不对数据进行URL编码。这种编码类型在文件上传等场景中非常有用。需要记住，如果您的表单中包含文件上传字段，应该将form元素的enctype属性也设置为multipart/form-data。 -
text/plain：这种编码类型以纯文本形式提交数据，不进行任何编码。这个编码类型不常用，但在某些特殊场景下可能会有用。需要注意的是，这种编码类型不支持文件上传，因为它不会对数据进行编码或分隔。
下面是一个示例，展示了如何使用formenctype属性：
<form action="/submitHandler" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="提交">
</form>
在上面的例子中，enctype属性被设置为multipart/form-data，以支持文件上传。当用户点击提交按钮时，表单数据将以多部分编码格式进行提交。
请注意，formenctype属性只能应用于包含在<form>元素中的表单字段，而不能直接应用于<input>元素。
input formmethod属性
formmethod属性是HTML <input>元素中的一个属性，用于指定在提交表单时使用的HTTP请求方法。
默认情况下，当表单提交时，浏览器使用GET方法发送请求。然而，通过使用formmethod属性，可以将请求方法设置为POST或其他合法的HTTP请求方法。
以下是三种常用的formmethod属性的取值和作用：
-
GET（默认值）：这是最常用的请求方法，表单数据将附加在URL的查询字符串中，并以可读的形式显示在URL中。这种方法适用于获取资源，对于非敏感信息的查询和过滤操作。 -
POST：这种请求方法将表单数据作为请求的主体进行发送，对于提交更敏感的、包含大量数据的表单以及执行对资源进行更改的操作是更安全和合适的选择。 -
其他请求方法：除了
GET和POST，formmethod属性还支持其他标准的HTTP请求方法，如PUT、DELETE、PATCH等。这可以用于支持RESTful API或实现特定的业务逻辑。
下面是一个示例，展示了如何使用formmethod属性：
<form action="/submitHandler" method="post">
<input type="text" name="name">
<input type="submit" value="提交" formmethod="put">
</form>
在上面的例子中，formmethod属性被设置为put，以将请求方法设置为PUT。当用户点击提交按钮时，表单数据将被以PUT请求方法提交到服务器。
请注意，formmethod属性只能应用于包含在<form>元素中的按钮或提交按钮（例如<button>或<input type="submit">），而不能直接应用于<input>元素。
input formnovalidate属性
formnovalidate属性是HTML <input>元素中的一个属性，用于禁用表单验证。
默认情况下，当用户在提交表单时，浏览器会对表单进行验证，确保输入字段符合其定义的验证规则。如果某个输入字段未通过验证，浏览器将阻止表单提交，并显示相应的错误消息。
通过使用formnovalidate属性，可以在需要时禁用表单验证，强制提交表单而不进行验证。这在需要自定义验证逻辑或在特定场景下跳过验证的情况下非常有用。
下面是一个示例，展示了如何使用formnovalidate属性：
<form action="/submitHandler" method="post">
<input type="text" name="name" required>
<input type="submit" value="提交" formnovalidate>
</form>
在上面的例子中，formnovalidate属性被添加到提交按钮上。这将禁用对name输入字段的验证，即使它被定义为required（必填）。
当用户点击提交按钮时，表单将不会对字段进行验证，并将被提交到指定的处理程序。
请注意，formnovalidate属性只能应用于包含在<form>元素中的按钮或提交按钮（例如<button>或<input type="submit">），而不能直接应用于任何其他<input>元素。
input height和width属性
height和width是HTML <input>元素中可用的两个属性，用于指定输入字段的高度和宽度。
height属性：用于指定输入字段的高度。它接受一个以像素（px）为单位的整数值，表示输入字段的垂直尺寸。
示例：
<input type="text" name="name" height="50">
上面的示例将创建一个高度为50像素的文本输入字段。
请注意，大多数HTML输入字段的高度是由浏览器自动计算和渲染的，因此设置height属性可能会对样式产生有限的影响。
width属性：用于指定输入字段的宽度。它接受一个以像素（px）为单位的整数值，表示输入字段的水平尺寸。
示例：
<input type="text" name="name" width="200">
上面的示例将创建一个宽度为200像素的文本输入字段。
请注意，与height属性一样，大多数HTML输入字段的宽度也是由浏览器自动计算和渲染的，因此设置width属性可能会对样式产生有限的影响。
综上所述，height和width属性可以用于修改HTML输入字段的尺寸，但实际的效果可能会受到浏览器样式和默认样式的限制。在设计页面时，使用CSS来更精确地控制输入字段的尺寸通常更为常见和可靠。
input list属性
list属性是HTML <input>元素中的一个属性，用于与 <datalist>元素相关联，提供输入字段的预定义选项列表。
<datalist>元素是一个包含多个 <option> 元素的容器，用于定义输入字段的可选项。通过将list属性设置为<datalist>元素的id，即可将输入字段与预定义选项列表关联起来。
以下是一个示例，展示了如何使用list属性：
<input type="text" name="name" list="nameList">
<datalist id="nameList">
<option value="John">
<option value="Jane">
<option value="Mike">
<option value="Emily">
</datalist>
在上面的示例中，list属性被设置为nameList，将文本输入字段与id为nameList的<datalist>元素关联起来。
当用户在输入字段中输入内容时，浏览器将显示与输入内容匹配的预定义选项列表。用户可以从列表中选择一个选项，或继续输入自己的内容。
请注意，<datalist>元素中的<option>元素定义了输入字段的可选项。用户可以选择这些预定义选项，或者在输入字段中输入其他内容。
需要注意以下一些要点：
list属性的值必须与关联的<datalist>元素的id相匹配。- 输入字段尽可能地与
<datalist>元素关联，以便浏览器能够正确地提供预定义的选项。 - 浏览器对
<datalist>的支持程度可能有所不同，因此在使用该功能时应考虑兼容性问题。
使用list属性，可以方便地提供输入字段的预定义选项列表，以帮助用户选择合适的值。
input multiple属性
multiple属性是HTML <input>元素中的一个属性，用于指定是否允许在文件上传字段中选择多个文件。
通常，<input type="file">元素用于让用户选择文件并上传到服务器。默认情况下，该元素只允许选择单个文件进行上传。但是通过添加multiple属性，可以允许用户一次选择多个文件。
以下是一个示例，展示了如何使用multiple属性：
<input type="file" name="files" multiple>
在上面的示例中，multiple属性被添加到文件上传字段上，因此允许用户选择多个文件。
请注意以下几点：
- 添加
multiple属性后，用户可以使用键盘上的Ctrl键（在Windows系统中）或Cmd键（在Mac系统中）来选择多个文件，或者使用鼠标拖拽选择多个文件。 - 用户所选的多个文件会作为一个文件列表一起提交到服务器端进行处理。
- 在处理上传的多个文件时，服务器端代码需要相应地进行处理，以适应多文件上传的情况。
需要注意的是，multiple属性只适用于文件上传字段(<input type="file">)，对于其他类型的输入字段，该属性没有任何效果。
通过使用multiple属性，可以方便地允许用户一次选择并上传多个文件，提升用户体验和效率。
input pattern属性
pattern属性是HTML <input>元素中的一个属性，用于指定输入字段接受的文本模式，以进行基本的表单验证。
pattern属性使用正则表达式来定义输入字段所允许的文本模式。当用户在输入字段中输入内容时，浏览器会自动与pattern属性中定义的正则表达式进行匹配，以验证输入是否符合指定的模式。
以下是一个示例，展示了如何使用pattern属性来验证输入字段中只能包含数字和字母（大小写不敏感）：
<input type="text" name="username" pattern="[a-zA-Z0-9]+" title="只允许输入字母和数字" required>
在上面的示例中，pattern属性的值是[a-zA-Z0-9]+，它定义了只允许输入字母和数字的模式。同时，title属性用于提供对验证规则的说明。
当用户在该输入字段中输入内容时，如果输入的内容不符合模式要求（即非字母和数字），浏览器将显示title属性中指定的错误提示信息，并阻止表单的提交。
需要注意以下几点：
pattern属性的值是一个有效的正则表达式，它定义了输入字段所允许的文本模式。- 浏览器在对输入内容进行验证时，会根据
pattern属性的值进行匹配。 - 通过
title属性，可以为输入字段的验证规则提供描述性的错误提示信息。 pattern属性通常与required属性一起使用，以确保用户在提交表单时输入了有效的内容。
pattern属性可以用于一些基本的输入字段验证，例如检查电子邮件格式、电话号码格式等。但请注意，对于更复杂的验证需求，应使用服务器端或客户端脚本来进行验证，以提供更详细和可靠的验证逻辑。
input min和max属性
min和max是HTML <input>元素中的两个属性，用于指定输入字段允许的最小值和最大值。
min属性：用于指定输入字段允许的最小值。它主要用于类型为number、date、time或datetime-local的输入字段。
示例：
<input type="number" name="quantity" min="1">
上面的示例中，min属性被设置为1，表示输入字段的最小值为1。
max属性：用于指定输入字段允许的最大值。它同样主要适用于类型为number、date、time或datetime-local的输入字段。
示例：
<input type="date" name="birthdate" max="2005-01-01">
上面的示例中，max属性被设置为2005-01-01，表示输入字段的最大值为2005-01-01。
请注意以下几点：
min和max属性适用于特定类型的输入字段，如number、date、time或datetime-local。- 输入字段的值必须在
min和max之间（包括边界值），否则输入将被视为无效。 - 设置
min和max属性可以提供输入字段的范围限制，以确保用户输入的值满足特定的要求。 - 对于其他类型的输入字段，如文本或密码字段，
min和max属性没有预定义的行为，可以使用其他验证手段来限制输入值的范围。
通过使用min和max属性，可以方便地指定输入字段允许的最小值和最大值，以确保用户输入的值在特定的范围内。这可以帮助进行基本的表单数据验证。
HTML5多媒体标签
HTML5 Video标签
HTML5提供了<video>标签，用于在网页中嵌入视频内容。下面是<video>标签的基本用法示例：
<video src="视频文件路径" controls></video>
<video>标签包含一个src属性，用于指定视频文件的路径。视频文件可以是本地文件路径或远程URL。另外，controls属性将显示视频播放器的控制条，使用户可以暂停、播放、跳转等操作。
以下是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video</title>
</head>
<body>
<video src="video.mp4" controls></video>
</body>
</html>
你可以根据需要添加其他属性，例如width和height来设置视频的宽度和高度。此外，<video>标签还支持多种事件和方法，例如play()、pause()和seek()等，可通过JavaScript进行控制。
请注意，视频格式需要遵循HTML5视频支持的格式，包括MP4、WebM和Ogg等。在src属性中指定视频文件时，应确保文件路径正确并且视频文件存在。
HTML5 Audio (音频)
HTML5提供了<audio>标签，用于在网页中嵌入音频内容。下面是<audio>标签的基本用法示例：
<audio src="音频文件路径" controls></audio>
<audio>标签包含一个src属性，用于指定音频文件的路径。音频文件可以是本地文件路径或远程URL。与<video>标签类似，controls属性将显示音频播放器的控制条，使用户可以控制音频的播放、暂停等操作。
以下是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio</title>
</head>
<body>
<audio src="audio.mp3" controls></audio>
</body>
</html>
你可以根据需要添加其他属性，例如autoplay属性来指定音频在页面加载后自动播放，或者loop属性来循环播放音频。
与<video>标签一样，<audio>标签也支持多种事件和方法，例如play()、pause()和seek()等，可通过JavaScript进行控制。
在使用<audio>标签时，请确保音频文件路径正确并且音频文件存在，同时使用HTML5支持的音频格式，如MP3、WAV和Ogg
source标签
<source>标签是用于在<audio>和<video>标签内指定多个音频或视频源的标签。它允许你为不同的浏览器或不同的音视频格式提供备选的源文件。
下面是<source>标签的示例用法：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
在该示例中，我们在<audio>标签内使用了两个<source>标签，分别指定了不同的音频源文件。浏览器会自动根据支持的格式选择可用的源文件。
每个<source>标签都必须包含src属性，用于指定音频或视频文件的路径，以及type属性，用于指定文件的MIME类型。如果浏览器不支持<source>标签内的任何源文件，那么会显示<audio>标签内的备选内容，即在嵌套的<audio>标签之间的文本。
<source>标签也可以有其他属性，例如media属性用于指定与媒体资源一起使用的媒体查询，以及srcset属性用于提供多个不同分辨率或大小的源文件。
使用<source>标签可以提供更好的兼容性和灵活性，以确保在不同的环境和浏览器中正确加载和播放音频或视频文件。
其他常用HTML5新标签
HTML5文本格式化标签
HTML5提供了一些文本格式化的标签，用于对文本进行结构化和样式化。以下是其中一些常用的标签：
<strong>：用于表示重要的文本，会以粗体显示。
<strong>This text is important</strong>
<em>：用于表示强调的文本，会以斜体显示。
<em>This text is emphasized</em>
<u>：用于表示下划线的文本。
<u>This text is underlined</u>
<s>：用于表示删除线的文本。
<s>This text is striked-through</s>
<sub>：用于表示下标文本。
H<sub>2</sub>O
<sup>：用于表示上标文本。
2<sup>nd</sup>
<code>：用于表示计算机代码段的文本，会以等宽字体显示。
<code>console.log("Hello, World!");</code>
<pre>：用于表示预格式化的文本，保留文本中的空格、换行符等原始格式。
<pre>
This text
is
preformatted
</pre>
<blockquote>：用于表示长引用的文本块。
<blockquote>
This is a long quote that spans multiple lines. It is usually indented to visually distinguish it from the surrounding text.
</blockquote>
这些标签可以用于改变文本的呈现方式，提高可读性和理解性。你可以根据需要使用这些标签来格式化你的文本内容。
HTML5度量条
HTML5中没有特定的度量条（progress bar）标签，但可以通过一些HTML5元素和CSS来创建自定义的度量条。
一种常见的方法是使用<progress>标签。该标签表示进度的测量，可以在页面中显示一个渐进的度量条，显示进度的百分比。
以下是一个示例：
<progress value="50" max="100"></progress>
在上述示例中，value属性指定当前的进度值，max属性指定最大值。这将在页面上显示一个半满的度量条。
你还可以使用CSS来自定义度量条的样式，如颜色、高度和宽度等。例如：
<style>
progress {
width: 300px;
height: 20px;
}
progress::-webkit-progress-value {
background-color: #blue;
}
progress::-moz-progress-bar {
background-color: #blue;
}
</style>
<progress value="50" max="100"></progress>
在上述示例中，使用了CSS来设置度量条的宽度和高度，并定义了进度条的颜色。
除了使用<progress>标签外，你还可以使用其他HTML元素和CSS来创建自定义的度量条效果。例如，使用<div>元素和CSS逐步改变其宽度或背景颜色来表示进度。
这些方法只是一些示例，你可以根据自己的需求和喜好来设计和创建适合的度量条效果。
HTML5进度条
HTML5提供了<progress>标签用于创建进度条。该标签可以用来表示任务的进度或加载过程中的进度。
以下是一个示例：
<progress value="50" max="100"></progress>
在上述示例中，value属性指定当前的进度值，max属性指定最大值。这将在页面上显示一个半满的进度条，表示任务完成了50%。
你也可以使用CSS来自定义进度条的样式。例如，下面的代码将进度条设置为红色背景和蓝色前景：
<style>
progress {
width: 300px;
height: 20px;
}
progress::-webkit-progress-value {
background-color: blue;
}
progress::-webkit-progress-bar {
background-color: red;
}
</style>
<progress value="50" max="100"></progress>
在上述示例中，通过CSS设置了进度条的宽度和高度，并使用::-webkit-progress-value和 ::-webkit-progress-bar伪元素选择器来定义前景和背景的样式。
此外，你还可以使用JavaScript来动态更新进度条的值。例如，可以使用setInterval()函数来模拟任务的进行并更新进度条的值：
<progress id="myProgress" value="0" max="100"></progress>
<script>
var progressValue = 0;
var progressBar = document.getElementById("myProgress");
setInterval(function() {
progressValue += 10;
progressBar.value = progressValue;
}, 1000);
</script>
在上述示例中，使用setInterval()函数每隔1秒更新一次进度条的值，每次增加10，直到达到最大值。
这是使用HTML5创建进度条的一些基本方法。你可以根据自己的需求和喜好，进一步自定义样式和功能。
HTML5详情标签
在HTML5中，<details>标签用于创建一个可折叠的详细内容部分，用户可以通过点击标题来展开或关闭这部分内容。它通常与<summary>标签一起使用，<summary>标签用于定义标题文本。
以下是一个示例：
<details>
<summary>点击展开详细内容</summary>
<p>这是一个示例详细内容。</p>
<ul>
<li>详细信息1</li>
<li>详细信息2</li>
<li>详细信息3</li>
</ul>
</details>
在上述示例中，<summary>标签定义了标题文本，当用户点击标题时，<details>元素会展开或关闭。<p>和<ul>等标签可以包含在<details>元素内部，作为详细内容显示的部分。
实际上，默认情况下，<details>元素是关闭的，只显示标题。用户点击标题时，详细内容才会展开。可以添加open属性来让<details>元素默认展开，如下所示：
<details open>
<summary>默认展开详细内容</summary>
<p>这是一个默认展开的示例详细内容。</p>
</details>
通过使用<details>和<summary>标签，你可以在网页中添加具有交互性和可折叠性的详细内容部分。你可以根据需要自定义样式和交互行为，以实现你想要的效果。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
