1 html
1.1 列表
01.总结
<ol> 定义有序列表
<ul> 定义无序列表 u拼音"无"
---------------------------------------------------------------------------------------------------------
<li> 定义列表项
---------------------------------------------------------------------------------------------------------
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
02.样式
<!-- 有序列表 -->
<h2>有序列表（<ol>）</h2>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
---------------------------------------------------------------------------------------------------------
<!-- 无序列表 -->
<h2>无序列表（<ul>）</h2>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
---------------------------------------------------------------------------------------------------------
<!-- 自定义列表 -->
<h2>定义列表（<dl>）</h2>
<dl>
<dt>术语一</dt>
<dd>术语一的定义描述。</dd>
<dt>术语二</dt>
<dd>术语二的定义描述。</dd>
<dt>术语三</dt>
<dd>术语三的定义描述。</dd>
</dl>
1.2 表格
00.标签
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
01.总结
HTML 表格由 <table> 标签来定义。
tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
---------------------------------------------------------------------------------------------------------
边框 border="1px"
水平移动 align="left|centerlright"
垂直移动 valign="toplmiddlelbottom"
跨行 rowspan="n"
跨列 colspan="n"
02.样式
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>45</td>
</tr>
</tbody>
</table>
---------------------------------------------------------------------------------------------------------
<table>元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead>用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody>用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
03.样式
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="1px" >
<caption> 标题 </caption>
<tr>
<th> 表头1 </th>
<th> 表头2 </th>
<th> 表头3 </th>
</tr>
<tr align="right">
<td rowspan="2">1-1</td>
<td colspan="2" align="center">a</td>
</tr>
<tr>
<td valign="middle">2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td align="center">c</td>
</tr>
</table>
</body>
</html>
1.3 表单
00.标签
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
01.总结
<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
02.样式
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
03.样式
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<!-- action="result.html"：跳转页面
method="get/post"：get（地址栏显示参数值，默认）, post（不显示，推荐）
enctype="multipart/form-data"：上传文件到服务器时，防止乱码
-->
<form action="result.html" method="post" enctype="multipart/form-data">
<!-- 文本字段type="text"
密码字段type="password"
size: 文本框/密码显示的长度
maxlength:实际能够输入内容的长度
-->
认证名：<input name="realname" value="汐炎" type="text" size="100" maxlength="5" readonly="readonly"/><br/>
用户名：<input name="username" value="默认值" type="text" size="100" maxlength="5"/><br/>
密码： <input name="pwd" value="默认值" type="password" size="50" maxlength="5"/>
<br/>
<br/>
<!-- 复选框type="checkbox" 默认checked="checked"-->
兴趣爱好：<br/>
足球<input name="hobby" type="checkbox" checked="checked">
篮球<input name="hobby" type="checkbox">
排球<input name="hobby" type="checkbox" checked="checked">
<br/>
<br/>
<!-- 复选框type="checkbox" 默认checked="checked"-->
计划旅游的城市：<br/>
西安<input name="city" type="checkbox">
北京<input name="city" type="checkbox" checked="checked" >
上海<input name="city" type="checkbox">
<br/>
<br/>
<!-- 单选框type="radio" 默认checked="checked"-->
性别：<br/>
男<input name="sex" type="radio" checked="checked"/>
女<input name="sex" type="radio" />
<br/>
<br/>
<!-- 下拉框select+option 默认selected="selected"-->
城市：<br/>
<select>
<option>西安</option>
<option selected="selected">成都</option>
<option>深圳</option>
</select>
<br/>
<br/>
<!-- 提交type="submit" 默认“提交”，可以通过value修改为“注册” -->
<!-- 重置type="reset" 默认“重置”，可以通过value修改为“清空” -->
<input value="注册" type="submit"/>
<input value="清空" type="reset"/>
<!-- 普通type="button"，用于事件触发，禁用disabled="disabled"-->
<input value="按钮" type="button" disabled="disabled"/>
<br/>
<br/>
<!-- 文本域（Textarea）-->
个人说明:<br/>
<textarea cols="50" rows="5">
这是编写默认值的地方！
</textarea>
<br/>
<br/>
<!-- 上传文件：type="file"
下面两个一起写：①input type="file"
②<form enctype="multipart/form-data">：防止乱码
-->
<input type="file" name="file1"/>
<br/>
<br/>
<!-- 隐藏域：type="hidden"。前台不显示，但真实存在，供后台使用-->
<input type="hidden" value="1">
<br/>
<br/>
<!-- 语义化表单fieldset+legend-->
<fieldset>
<legend>用户信息</legend>
认证名：<input name="realname" value="汐炎" type="text" size="100" maxlength="5" readonly="readonly"/><br/>
用户名：<input name="username" value="默认值" type="text" size="100" maxlength="5"/><br/>
密码： <input name="pwd" value="默认值" type="password" size="50" maxlength="5"/>
</fieldset>
<br/>
<br/>
<!-- 表单元素的标注label + for + id-->
<label for="xa">西安</label>
<input id="xa" type="checkbox" />
</form>
</body>
</html>
1.4 表单校验
01.HTML5内置表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Validation</title>
</head>
<body>
<h1>HTML5 Form Validation</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name must contain only letters and spaces."><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
02.JavaScript 自定义表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Custom Form Validation</title>
<script>
function validateForm(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const age = document.getElementById('age').value;
if (!name.match(/^[A-Za-z\s]+$/)) {
alert('Name must contain only letters and spaces.');
event.preventDefault();
return false;
}
if (!email.includes('@')) {
alert('Please enter a valid email address.');
event.preventDefault();
return false;
}
if (password.length < 6) {
alert('Password must be at least 6 characters long.');
event.preventDefault();
return false;
}
if (age < 18 || age > 99) {
alert('Age must be between 18 and 99.');
event.preventDefault();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>JavaScript Custom Form Validation</h1>
<form action="/submit" method="post" onsubmit="return validateForm(event)">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
1.5 布局
00.汇总
a.总结
<div id="container" style="width:500px">：500px是绝对单位
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">：100px是绝对单位
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">：400px是绝对单位
b.样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里、
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com
</div>
</div>
</body>
</html>
01.header、section、article、aside、nav、footer，它们在语义上有不同的用途
a.header
功能: 用于定义页面或部分的头部区域，通常包含网站的标题、导航菜单或其他介绍性内容。
CSS 样式: 通常设置为页面顶部的容器，可以包括背景颜色、内边距、边框等。
header {
background-color: #f4f4f4;
padding: 20px;
border-bottom: 1px solid #ddd;
}
b.section
功能: 用于定义文档中的一个独立的区段或部分，通常包括标题和相关内容。适用于将页面内容分成逻辑上的部分。
CSS 样式: 用于创建分隔不同内容区域的样式，可以设置边距、填充、背景色等。
section {
margin: 20px 0;
padding: 20px;
background-color: #f9f9f9;
}
c.article
功能: 用于定义独立的内容块，通常可以独立存在并与其他内容分开，例如博客文章、新闻报道等。
CSS 样式: 可以设置独立块的样式，例如背景色、边框、阴影等，以便区分不同的文章内容。
article {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
background-color: #fff;
}
d.aside
功能: 用于定义与主内容相关但不直接属于主内容的部分，如侧边栏、补充信息或广告。
CSS 样式: 常用于创建侧边栏或浮动的补充内容区域，可以使用浮动、背景色和边距来设置样式。
aside {
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
float: right; /* 例子: 侧边栏通常浮动在右侧 */
}
e.nav
功能: 用于定义导航链接区域，通常包含网站的主要导航菜单。
CSS 样式: 常用于设置导航条的样式，包括布局、背景色、字体等。
nav {
background-color: #333;
padding: 10px;
color: #fff;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
f.footer
功能: 用于定义页面或部分的底部区域，通常包含版权信息、联系信息或页脚链接。
CSS 样式: 常用于设置页脚的样式，例如背景颜色、内边距、边界等。
footer {
background-color: #f4f4f4;
padding: 20px;
border-top: 1px solid #ddd;
text-align: center;
}
g.共同点
header {
display: block;
unicode-bidi: isolate;
}
header、section、article、aside、nav 和 footer 都是 HTML5 的语义化标签，它们在默认情况下具有类似的样式，但具体的 CSS 属性可能会有所不同。
-----------------------------------------------------------------------------------------------------
display: block;：这些标签默认都是块级元素。块级元素的特点是会占据整行的宽度，换行显示。
unicode-bidi: isolate;：这个属性用于处理双向文本（如英文和阿拉伯文混排）。
它在大多数情况下可能不对这些元素产生实际影响，因为默认情况下，unicode-bidi 的值是 normal，
而 isolate 用于确保文本的双向处理是独立的，主要用于更复杂的双向文本情况。
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 结构标签示例</title>
<style>
header {
background-color: #f4f4f4;
padding: 20px;
border-bottom: 1px solid #ddd;
}
section {
margin: 20px 0;
padding: 20px;
background-color: #f9f9f9;
}
article {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
background-color: #fff;
}
aside {
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
float: right;
width: 200px;
}
nav {
background-color: #333;
padding: 10px;
color: #fff;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
footer {
background-color: #f4f4f4;
padding: 20px;
border-top: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
</header>
<section>
<article>
<h2>文章标题</h2>
<p>这是文章的内容部分。</p>
</article>
<aside>
<h3>侧边栏标题</h3>
<p>这是侧边栏的内容。</p>
</aside>
</section>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>
1.6 框架
00.总结
<iframe> 元素用于在当前页面中嵌入另一个 HTML 页面。这对于展示外部内容（例如，嵌入视频、展示第三方内容等）非常有用
01.iframe常用属性
src: 指定要嵌入的页面的 URL。
title: 提供有关 <iframe> 内容的描述。
width 和 height: 设置 <iframe> 的宽度和高度。
frameborder: 设置是否显示边框，0 表示无边框。
scrolling: 设置是否显示滚动条。取值可以是 "yes"、"no" 或 "auto"。
allowfullscreen: 允许全屏模式。
sandbox: 应用沙箱模式以限制 <iframe> 内容的行为和功能。可以设置多个空格分隔的标志。
02.基本示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Iframe Example</title>
<style>
iframe {
border: 2px solid #ccc;
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h1>Basic Iframe Example</h1>
<iframe src="https://www.example.com" title="Example Website"></iframe>
</body>
</html>
03.带有属性的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe with Attributes</title>
<style>
iframe {
border: 2px solid #000;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<h1>Iframe with Attributes</h1>
<iframe
src="https://www.wikipedia.org"
title="Wikipedia"
width="600"
height="300"
frameborder="0"
scrolling="yes"
allowfullscreen
></iframe>
</body>
</html>
04.嵌入YouTube视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Iframe Example</title>
<style>
iframe {
border: none;
width: 560px;
height: 315px;
}
</style>
</head>
<body>
<h1>Embedded YouTube Video</h1>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
allowfullscreen
></iframe>
</body>
</html>
1.7 [新]视频
01.总结
a.HTML5 Video 标签
标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹
b.视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频示例</title>
</head>
<body>
<h1>HTML5 视频示例</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
</body>
</html>
1.8 [新]音频
01.总结
a.HTML5 Audio 标签
标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
b.音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 音频示例</title>
</head>
<body>
<h1>HTML5 音频示例</h1>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
您的浏览器不支持 HTML5 音频标签。
</audio>
</body>
</html>
1.9 [新]表单
00.总结
a.HTML5 新表单元素
<datalist>: 提供一个下拉列表供用户选择。用户可以从列表中选择一个选项或输入其他值。
<keygen>: 用于生成密钥对（已弃用）。现代浏览器不再支持此元素。
<output>: 用于显示计算或其他动态内容的结果。
b.HTML5 新表单属性
autocomplete: 控制浏览器是否启用自动填充功能。设置为 "off" 禁用自动填充。
novalidate: 在 <form> 标签上使用时，禁用表单验证。
autofocus: 当页面加载时，自动将焦点设置到该输入字段。
form: 指定 <input> 元素属于哪个表单。
formaction: 指定表单提交时的 URL。
formenctype: 指定表单提交的编码类型。
formmethod: 指定表单提交时使用的 HTTP 方法（如 "get" 或 "post"）。
formnovalidate: 指定在提交时禁用表单验证。
formtarget: 指定表单提交的目标窗口。
list: 与 <datalist> 元素结合使用，提供预定义的选项列表。
min 和 max: 用于 <input> 元素指定允许的最小值和最大值。
multiple: 允许选择多个文件或多个值（适用于文件和选择输入）。
pattern: 用于正则表达式验证输入的值。
placeholder: 提供输入字段的提示文本。
required: 指定该字段为必填项。
step: 指定合法的数字步长（适用于 <input type="number"> 和 <input type="range">）。
01.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 表单元素和属性示例</title>
</head>
<body>
<h1>HTML5 表单元素和属性示例</h1>
<!-- 使用 <datalist> 元素 -->
<h2><datalist> 元素</h2>
<label for="fruit">选择一个水果:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="苹果">
<option value="香蕉">
<option value="橙子">
<option value="葡萄">
</datalist>
<br><br>
<!-- 使用 <keygen> 元素 -->
<h2><keygen> 元素 (注意: keygen 元素在现代浏览器中已被弃用)</h2>
<form action="#">
<label for="keygen">生成密钥:</label>
<keygen id="keygen" name="keygen">
</form>
<br><br>
<!-- 使用 <output> 元素 -->
<h2><output> 元素</h2>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<label for="a">数字 A:</label>
<input type="number" id="a" name="a">
<label for="b">数字 B:</label>
<input type="number" id="b" name="b">
<output name="result" for="a b">0</output>
</form>
<br><br>
<!-- 使用 <form> 新属性 -->
<h2><form> 新属性</h2>
<form action="#" method="post" autocomplete="off" novalidate>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" required autofocus>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<br><br>
<input type="submit" value="提交">
</form>
<br><br>
<!-- 使用 <input> 新属性 -->
<h2><input> 新属性</h2>
<form action="#" method="post">
<label for="number">选择一个数字 (1-100):</label>
<input type="number" id="number" name="number" min="1" max="100" step="1" required>
<br><br>
<label for="range">选择范围 (0-100):</label>
<input type="range" id="range" name="range" min="0" max="100" step="1">
<br><br>
<label for="url">输入网址:</label>
<input type="url" id="url" name="url" placeholder="https://example.com" required>
<br><br>
<label for="file">选择文件:</label>
<input type="file" id="file" name="file" multiple>
<br><br>
<label for="search">搜索:</label>
<input type="search" id="search" name="search">
<br><br>
<label for="tel">输入电话号码:</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1.10 [新]输入框
00.总结
Color Input (<input type="color">): 允许用户选择颜色。
Date Input (<input type="date">): 允许用户选择日期。
Datetime Input (<input type="datetime-local">): 允许用户选择本地日期和时间。
Email Input (<input type="email">): 允许用户输入电子邮件地址，并进行基本的验证。
Month Input (<input type="month">): 允许用户选择月份和年份。
Number Input (<input type="number">): 允许用户输入数字，并可以设置最小值、最大值和步长。
Range Input (<input type="range">): 允许用户选择一个范围值。
Search Input (<input type="search">): 允许用户输入搜索查询。
Tel Input (<input type="tel">): 允许用户输入电话号码。
Time Input (<input type="time">): 允许用户选择时间。
URL Input (<input type="url">): 允许用户输入网址，并进行基本的验证。
Week Input (<input type="week">): 允许用户选择年份和周数。
01.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 表单输入类型示例</title>
</head>
<body>
<h1>HTML5 表单输入类型示例</h1>
<form action="#" method="post">
<!-- Color Input -->
<label for="color">选择颜色:</label>
<input type="color" id="color" name="color">
<br><br>
<!-- Date Input -->
<label for="date">选择日期:</label>
<input type="date" id="date" name="date">
<br><br>
<!-- Datetime Input -->
<label for="datetime">选择日期和时间:</label>
<input type="datetime-local" id="datetime" name="datetime-local">
<br><br>
<!-- Email Input -->
<label for="email">输入邮箱:</label>
<input type="email" id="email" name="email">
<br><br>
<!-- Month Input -->
<label for="month">选择月份:</label>
<input type="month" id="month" name="month">
<br><br>
<!-- Number Input -->
<label for="number">输入数字:</label>
<input type="number" id="number" name="number" min="1" max="100" step="1">
<br><br>
<!-- Range Input -->
<label for="range">选择范围:</label>
<input type="range" id="range" name="range" min="0" max="100" step="1">
<br><br>
<!-- Search Input -->
<label for="search">搜索:</label>
<input type="search" id="search" name="search">
<br><br>
<!-- Tel Input -->
<label for="tel">输入电话:</label>
<input type="tel" id="tel" name="tel">
<br><br>
<!-- Time Input -->
<label for="time">选择时间:</label>
<input type="time" id="time" name="time">
<br><br>
<!-- URL Input -->
<label for="url">输入网址:</label>
<input type="url" id="url" name="url">
<br><br>
<!-- Week Input -->
<label for="week">选择周:</label>
<input type="week" id="week" name="week">
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1.11 附：html标签
00.汇总
a.分类1
01.列表
02.表格
03.表单
04.表单校验
05.布局
06.框架常用属性
07.[新]视频
08.[新]音频
09.[新]表单
10.[新]输入框
b.分类2
01.普通文本和pre标签
02.常用标签1
03.常用标签2
01.列表
<ol> 定义有序列表
<ul> 定义无序列表 u拼音"无"
---------------------------------------------------------------------------------------------------------
<li> 定义列表项
---------------------------------------------------------------------------------------------------------
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
02.表格
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
03.表单
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
04.表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Validation</title>
</head>
<body>
<h1>HTML5 Form Validation</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name must contain only letters and spaces."><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
05.布局
<div id="container" style="width:500px">：500px是绝对单位
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">：100px是绝对单位
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">：400px是绝对单位
header、section、article、aside、nav、footer，它们在语义上有不同的用途
06.框架常用属性
src: 指定要嵌入的页面的 URL。
title: 提供有关 <iframe> 内容的描述。
width 和 height: 设置 <iframe> 的宽度和高度。
frameborder: 设置是否显示边框，0 表示无边框。
scrolling: 设置是否显示滚动条。取值可以是 "yes"、"no" 或 "auto"。
allowfullscreen: 允许全屏模式。
sandbox: 应用沙箱模式以限制 <iframe> 内容的行为和功能。可以设置多个空格分隔的标志。
07.[新]视频
a.HTML5 Video 标签
标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹
b.视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
08.[新]音频
a.HTML5 Audio 标签
标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
b.音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
09.[新]表单
a.HTML5 新表单元素
<datalist>: 提供一个下拉列表供用户选择。用户可以从列表中选择一个选项或输入其他值。
<keygen>: 用于生成密钥对（已弃用）。现代浏览器不再支持此元素。
<output>: 用于显示计算或其他动态内容的结果。
b.HTML5 新表单属性
autocomplete: 控制浏览器是否启用自动填充功能。设置为 "off" 禁用自动填充。
novalidate: 在 <form> 标签上使用时，禁用表单验证。
autofocus: 当页面加载时，自动将焦点设置到该输入字段。
form: 指定 <input> 元素属于哪个表单。
formaction: 指定表单提交时的 URL。
formenctype: 指定表单提交的编码类型。
formmethod: 指定表单提交时使用的 HTTP 方法（如 "get" 或 "post"）。
formnovalidate: 指定在提交时禁用表单验证。
formtarget: 指定表单提交的目标窗口。
list: 与 <datalist> 元素结合使用，提供预定义的选项列表。
min 和 max: 用于 <input> 元素指定允许的最小值和最大值。
multiple: 允许选择多个文件或多个值（适用于文件和选择输入）。
pattern: 用于正则表达式验证输入的值。
placeholder: 提供输入字段的提示文本。
required: 指定该字段为必填项。
step: 指定合法的数字步长（适用于 <input type="number"> 和 <input type="range">）。
10.[新]输入框
Color Input (<input type="color">): 允许用户选择颜色。
Date Input (<input type="date">): 允许用户选择日期。
Datetime Input (<input type="datetime-local">): 允许用户选择本地日期和时间。
Email Input (<input type="email">): 允许用户输入电子邮件地址，并进行基本的验证。
Month Input (<input type="month">): 允许用户选择月份和年份。
Number Input (<input type="number">): 允许用户输入数字，并可以设置最小值、最大值和步长。
Range Input (<input type="range">): 允许用户选择一个范围值。
Search Input (<input type="search">): 允许用户输入搜索查询。
Tel Input (<input type="tel">): 允许用户输入电话号码。
Time Input (<input type="time">): 允许用户选择时间。
URL Input (<input type="url">): 允许用户输入网址，并进行基本的验证。
Week Input (<input type="week">): 允许用户选择年份和周数。
11.普通文本和pre标签
a.格式化
a.<pre> 标签
表示“预格式化文本”。文本在 <pre> 标签中的格式会被保留，包括空格、换行和制表符。
浏览器会以原样显示文本，保留所有的空格和换行符
-----------------------------------------------------------------------------------------------------
<pre>
Line 1
Line 2
Line 3
</pre>
-----------------------------------------------------------------------------------------------------
以上代码会在浏览器中显示为：
Line 1
Line 2
Line 3
b.普通文本
在 HTML 中，普通文本（如 <p>、<div>、<span> 等标签内的文本）会忽略多余的空格和换行，只保留一个空格，并自动换行。
文本会根据浏览器的默认格式来显示
-----------------------------------------------------------------------------------------------------
<p>
Line 1
Line 2
Line 3
</p>
-----------------------------------------------------------------------------------------------------
以上代码在浏览器中显示为：
Line 1 Line 2 Line 3
c.用途
<pre> 标签：通常用于显示代码或需要保留特定格式的文本，如诗歌、表格等。它适合那些格式和布局非常重要的内容。
普通文本：更常用于一般的内容展示，如段落、文章等，不需要保留特定的格式。
c.默认样式
<pre> 标签：文本通常会以固定宽度字体（如 Courier）显示，并保留输入的空格和换行。
普通文本：字体和显示样式通常会根据浏览器的默认样式或 CSS 样式进行调整。
d.CSS影响
<pre> 标签：可以通过 CSS 调整字体、颜色、背景等，但格式化特性（如空格和换行）不会被 CSS 影响。
普通文本：可以使用 CSS 控制显示方式，包括文本对齐、行高、字体大小等。
12.常用标签1
a.头部
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
b.常见
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行
-----------------------------------------------------------------------------------------------------
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释
-----------------------------------------------------------------------------------------------------
<p> 定义一个段落
<br> 插入单个折行（换行）
c.文本格式化标签
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
d.计算机输出标签
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
e.HTML引文,引用及标签定义
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
13.常用标签2
a.链接
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
b.图片
<img src="URL" alt="替换文本" height="42" width="42">
c.样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
d.无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
e.有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
f.定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
g.表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
h.框架
<iframe src="demo_iframe.htm"></iframe>
i.表单
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
j.实体
< 等同于 <
> 等同于 >
" 等同于 引号
等同于 空格
©
2 html汇总
2.1 html语义化
01.总结
1.用正确的标签做正确的事情；
2.html语义化让页面的内容结构化，结构更加清晰，便于对浏览器、搜索引擎解析；
3.即使在没有CSS样式的情况下也以一种文档格式显示，并且是更容易阅读的；
4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2.2 html5新特性
01.总结
语义标签，例如：<header><header/>、<nav></nav>、<footer></footer>；
多媒体，视频video、音频audio；
图像效果，canvas元素、svg元素；
新的表单控件，比如 color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week；
02.总结
HTML5 表单属性， input 属性，比如height 和 width、min和max 、placeholder；form属性，autocomplete、novalidate；
HTML5 Web 存储，对本地存储的更好的支持，localStorage — 没有时间限制的数据存储、sessionStorage — 针对一个 session 的数据存储；
HTML5 拖放，设置元素为可托放；
HTML5 地理定位，获取用户地理位置；
HTML5 Web Workers（多线程并发）；
2.3 html5新增标签
01.结构标签
<section>独立内容区块</section>
<article>上下文不相关的独立内容</article>
<aside>这是边栏</aside>
<header>头</header>
<nav>导航</nav>
<footer>脚</footer>
<figure>表示一段独立的流内容</figure>
02.表单标签
email邮箱、url地址、number数值、range一定范围的数值、date日期选择器（火狐不支持）、search搜索域、color颜色、
03.媒体标签
<video>视频</video>
<audio>音频</audio>
<embed/> 定义外部的可交互的内容或插件 格式可以是Midi、Wav、AIFF、AU、MP3、flash
04.其他功能标签
<mark>高亮</mark>
<command>命令按钮</command>
<progress>状态标签</progress>
<details>用于描述文档或文档的某个细节</details>
<time>标记时间</time>
<datalist>为input标签定义一个下拉列表，配合option使用</datalist>
<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
<output>定义不同类型的输出</output>
<canvas>画布</canvas>
<menu>定义菜单列表</menu>
<dialog>定义对话框或窗口</dialog>
<meter>用于表示一个范围内的值</meter>
05.删除的标签
纯表现的元素：basefont、big、center、font、s、strike、tt、u；
对可用性产生负面影响的元素：frame、frameset、noframes；
2.4 html和html5区分
00.总结
取消了一些过时的 HTML4的标签；
添加了一些新的元素；
新的全局属性：id、tabindex、repeat；
新的JS API：HTML5 ≈ HTML+CSS3+JS+API
01.文档类型声明
html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
html5:<!doctype html>
02.在结构语义上
html:没有体现结构语义化的标签，我们通常都是这样来命名的<id="header">这样表示网站的头部。
html5:在语义上却有很大的优势。提供了一些新的标签，比如:<header>、<articale>、<footer>
04.对 <!DOCTYPE html> 与其他 HTML 版本的区别
a.HTML5 的 <!DOCTYPE html>
语法简洁：<!DOCTYPE html> 是 HTML5 中唯一的文档类型声明，简单明了，易于使用。
向后兼容性：这种声明告诉浏览器使用 HTML5 标准来解析文档，确保了浏览器以标准模式呈现页面。
现代特性：HTML5 引入了许多新特性，比如新的语义元素（如 <article>、<section>）、API（如 Web Storage、Canvas）和更好的多媒体支持（如 <audio> 和 <video>）。
b.其他 HTML 版本的 <!DOCTYPE> 声明
a.HTML 4.01
严格模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">)
过渡模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">)
框架集模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">)
b.XHTML 1.0
严格模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">)
过渡模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)
框架集模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">)
c.区别总结
简洁性：<!DOCTYPE html> 是 HTML5 的标准声明，去掉了旧版本中的复杂性和冗余，简化了文档类型声明。
兼容性：HTML5 的 <!DOCTYPE html> 旨在确保浏览器使用标准模式渲染页面，不再需要浏览器的怪异模式。
特性支持：HTML5 引入了新的特性和 API，因此使用 <!DOCTYPE html> 可以启用这些现代功能，而旧版的 DOCTYPE 声明则不支持这些特性。
2.5 html5写!DOCTYPE html
00.总结
HTML5 不基于 SGML（标准通用标记语言），因此不需要对DTD（文档类型定义）进行引用，但是需要 doctype 来规范浏览器的行为。
HTML 4.01 中的 doctype 需要对DTD（文档类型定义）进行引用，因为 HTML 4.01 基于 SGML。
Doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
01.区别
标准模式（也就是严格呈现模式）用于呈现遵循最新标准的网页；
兼容模式（也就是松散呈现模式或者怪异模式）用于呈现为传统浏览器而设计的网页；
---------------------------------------------------------------------------------------------------------
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行；
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看；
02.具体区别
盒模型
兼容模式下可设置百分比的高度和行内元素的高宽
用margin:0 auto设置水平居中在IE下会失效
兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
2.6 html5新标签的浏览器兼容
01.方法1：实现标签被识别
通过document.createElement(tagName)方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式
02.方法2：JavaScript解决方案
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
03.方法3：使用kill IE6
在</body>之前调用
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
2.7 前端优化
01.前端页面有哪三层
结构层、表示层、行为层
02.前端性能优化
1.减少HTTP请求
2.使用浏览器缓存
3.服务端启用压缩（HTML、CSS、JavaScript）
4.CSS放在页面最上面、JavaScript放在页面最下面
5.精简CSS和JS文件 （避免CSS表达式）
6.减少对DOM的操作
7.使用JSON格式进行数据交换
8.避免重定向
2.8 浏览器构成
01.主流浏览器内核
1.Trident：俗称 IE 内核
2.Gecko：俗称 Firefox 内核
3.Presto：Opera 前内核
4.Webkit：Safari 内核
5.Blink：由 Google 和 Opera Software 开发，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
02.浏览器的主要构成
1.用户界面：包括地址栏、后退/前进按钮、书签目录等
2.浏览器引擎：用来查询及操作渲染引擎的接口
3.渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
4.网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
5.UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
6.JS解释器：用来解释执行JS代码
7.数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
2.9 iframe优缺点
01.iframe的优点
iframe能够原封不动的把嵌入的网页展现出来
如果有多个网页引用iframe，那么你只需要修改一个iframe的内容，每一个页面的内容都能进行更改，方便快捷
统一风格，公用的部分可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
02.iframe的缺点
会产生很多页面，不容易管理
影响用户体验性
代码复杂，无法被一些搜索引擎索引到，不利于搜索引擎优化
设备兼容性差，很多的移动设备（PDA 手机）无法完全显示框架
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的