1.HTML主体格式基本结构
<!DOCTYPE html> 告诉浏览器，我们使用什么规范
<html>
<head> 网页头部
<mate charset="utf-8"/> 描述性标签
<title>标题</title>
</head>
<body> 网页主体
主要内容
</body>
</html>
解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题
2.常用标签：
标题标记
<h1></h1>标题标记
<p></p>段落标签
<b></b> <strong></strong>加粗
<i></i>倾斜
<em></em>斜体
<br/>换行
<hr/>水平线标签
空格
>；大于号
<；小于号
"；引号
©；版权符合@
<img src="" alt="" title=""/> 图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败的时候，在图片原本的位置显示的提示文本
title：鼠标悬停的时候，显示的提示文本
<a href="" target=""></a> 超链接
href：链接地址
target：打开新网页的打开方式，默认是在本页面打开
3.锚链接
定义锚点，使用id来定义 ：<p id="back">锚点</p>
定义锚链接，使用a标签：<a href="#back">锚链接</a>
4.列表
无序列表
以<ul>标签来实现
以<li>标签表示列表项
有序列表
以<ol>标签来实现
以<li>标签表示列表项
自定义列表
以<dl>标签来实现
以<dt>标签定义列表项
以<dd>标签定义内容
5.表格 table
行标签 tr
单元格标签 td
跨列 colspan
跨行 rowspan
6.视频标签
src：指定要播放的视频文件的路径
controls：提供播放、暂停和音量的控件
autoplay：自动播放属性
loop：视频的循环播放
<video src=”视频路径“ controls autoplay></video>
7.音频标签
src：指定要播放的音频文件的路径
trols：提供播放、暂停和音量的控件
<audio src=”音频路径“ controls autoplay></video>
8.页面结构
*header 标题头部区域的内容
*footer 标记脚步区域的内容
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
*nav 导航类辅助内容
9.内联框架
iframe单页面内联
src：引用页面地址
name：框架标识名
<iframe src =”path” name=”mainframe”></iframe>
Iframe 属性（实现页面间的相互跳转）
在被打开的框架上加name属性
<iframe name =”mainframe”></iframe>
在超链接上设置traget目标窗口属性位希望显示的框架窗口名
<a href = https://www.baidu.com/ “ target = ”mainframe“>加载</a>
10.表单元素
（1）文本框
Type=“text”
Name：文本框名称（必填）
Value：文本框初始值
Size：文本框长度
Maxlength：文本框可输入最多字符
（2）密码框
Type=“password”
Name：密码框名称（必填）
Size：密码框长度
（3）单选按钮
Type=“radio”
Name：单选框名称（必填），一组的名称需要相同
Checked：单选按钮选中状态
Value：单选框的值
（4）复选框
Type=“checkbox”
Name：复选框的名称（必填），一组的名称需要相同
Checked：单选按钮选中状态
Value：复选框的值
（5）下拉列表框
一个<select>中至少包含一下<option>
select：下拉列表框
option：选项
<select name=“列表名称“ size=”行数”>
<option value=”选项的值“ selected=”selected“>…</option>
(6)按钮
<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />
单击三个按钮，让学员看三个按钮提交后显示的不同效果，主要演示提交按钮和重置按钮，提一下普通 按钮是需要添加onclick事件的，后期课程会讲解，这里稍微提一下就可以了。
有时会使用图片代替按钮，讲解图片按钮的用法，强调type和src属性，强调“type”属性没有设置为
“submit”，但仍然具备提交表单的功能。
（7）多行文本域
改变cols和rows的值，让学员看到由于这两个值的改变，文本框内容显示的改变。强调多行文本域的内 容是在标签之间。
textarea：多行文本域
cols：显示的列数
rows：显示的行数
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
（8）文件域
在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。未来文件上传和下载会详细讲解，现在了解即可！
enctype：表单编码属性
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
（9）邮箱
会自动验证Email地址格式是否正确
(10）网址
会自动验证URL地址格式是否正确
(11)数字
min：最小值
max：最大值
step：步长
请输入数字:<input type="number" name="num" min="0" max="100" step="10"/>
(12)滑块
type值为range即为滑块。
请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>
(13)搜索框
type值为search即为搜索框。
11.表单的高级应用
在某些注册页面或本图片中订单信息页面，必须同意一些条款按钮才能使用等等
隐藏域
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
<input type="hidden" value="666" name="userid">
只读、禁用
W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略
讲解只读和禁用的语法，强调不能单写readonly或disabled，必须写readonly
＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
表单元素的标注增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<!--它的for属性对应的id与表单元素id一致-->
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
12.表单的初级验证
思考：为什么要进行表单验证？
如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就 会返回响应给用户，用户重新填写再提交，如此多次持续直到用户输入正确。它们之间的通信是通过网 络进行的，如果网络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务器来说 也增加了其工作压力。
要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。
表单验证的好处：
（1） 减轻服务器的压力。
（2） 保证数据的可行性和安全性。
在客户端就对表单进行验证是非常有必要的
表单初级验证的方法
这三个属性是html5中很实用的属性，后面javaScript课程中还会详细的讲解。现在大家就大概认识者三 种属性即可。
placeholder
提示语默认显示，当文本框中输入内容时提示语消失
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
required
规定文本框填写内容不能为空，否则不允许用户提交表单
<input type="text" name="username" required/>
pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
（javaScript课程会详解）
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
7219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
