1，什么是HTML?
HTML
Hyper Text Markup Language（超文本标记语言）
HTML5优势
知名浏览器对HTML5的支持
市场的需求
可以夸平台
W3C
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
World Wide Web Consortium（万维网联盟）
W3C标准
常见IDE
记事本
Dreamweaver
IDEA
WebStorm
......
HTML基本结构
<html> <head> <title>我的第一个网页title> head> <body> 我的第一个网页 body>html>
<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签，如< hr/>；用/来关闭空元素。
2，网页基本标签
注释
注释 -->
DOCTYPE声明
告诉浏览器要使用什么规范
<title>标签
表示网页标题
<meta>标签
描述性标签，用来描述网站的一些信息。一般用来做SEO
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
段落标签
<p>段落标签</p>
换行标签
<br>
水平线标签
<hr/>
特殊符号
空格： 
大于：>
小于：<
版权符号：©
特殊符号可以用&+来搜索
3，图像，超链接，网页布局
图像标签(<img>)
<img src="../img/1.png" alt="头像" title="点击下载" width="30" heigth="30">
src：图片的地址
相对地址，绝对地址
alt：图片名字
title：悬停文字
超链接
文本链接
<a herf="https://www.baidu.com" target="_blank">点击跳转百度a><a herf="https://www.baidu.com" target="_self">点击跳转百度a>
herf：必填，表示 要跳转到的那个页面地址
target：表示窗口打开位置
_blank：在新标签中打开
_self：在当前 窗口中打开（默认）
图像链接
<a herf="https://www.baidu.com"> <img src="../img/1.png" alt="头像" title="点击下载" width="30" heigth="30">a>
锚链接
<html> <head> <title>我的第一个网页title> head> <body> 使用name做为标记 --> <a name="top">顶部a> 我的第一个网页 <a herf="https://www.baidu.com"> <img src="../img/1.png" alt="头像" title="点击下载" width="30" heigth="30">a> <a href="#top">回到顶部a> body>html>
需要一个锚标记
通过#跳转到标记
功能性链接
邮件链接：mailto:
<a href="mailto:233166@qq.com">点击联系我a>
4，列表，表格，媒体元素
列表
什么是列表？
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示 出来，以便浏览者能更快捷地获得相应的信息。
无序列表
<ul> <li>Javali> <li>C/C++li> <li>Pythonli>ul>
有序列表
<ol> <li>Javali> <li>C/C++li> <li>Pythonli>ol>
自定义列表
<dl> <dt>学科dt> <dd>Javadd> <dd>C/C++dd> <hr/> <dt>城市dt> <dd>武汉dd> <dd>重庆dd>dl>
dl：标签
dt：表头
dd：列表内容
表格
<table border="1px"> <tr> <td colspan="2">1-1td> <td>1-2td> tr> <tr> <td rowspan="2">2-1td> <td>2-2td> <td>2-3td> tr> <tr> <td>3-1td> <td>3-2td> tr>table>
border：边框
colspan：跨列
rowspan：跨行
视频和音频
<video src="../video/1.mp4" controls autoplay>video><audio src="../audio/2.mp3" controls autoplay>audio>
controls：控制条
autoplay：自动播放
5，页面结构
6，iframe内联框架
<iframe src="path" name="mainFrame" >iframe>
src：地址
width,height：宽高
7，表单及表单应用
初识表单
<form method="post" action="result.html"> <p>名字：<input name="name" type="text">p> <p>密码：<input name="pass" type="password">p> <p> <input type="submit" name="button" value="提交"> <input type="reset" name="Reset" value="重填"> p>form>
action：表彰提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式提交：可以在url中看到提交的信息，不安全，但高效
post：比较安全，也可以传输大文件
表单元素
文本框:
input type="text"
value：单选框的值
单选框：
input type="radio"
value：单选框的值
name：表示组
多选框:
<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="chat" name="bobby">聊天
checkbox：多选框
按钮：
<input type="button" name="btn1" value="点击"><input type="image" src="../image/1.jpg"><input type="submit" value="提交"><input type="reset" value="重置">
button：普通按钮
image：图像按钮
submit：提交按钮
reset：重置
下拉框：
<p> <select name="列表名称"> <option value="china" selected>中国option> <option value="us">美国option> <option value="eth">瑞士iption> <option value="yingdu">印度option> select>p>
[object Object]
文本域：
<p> <textarea name="textarea" cols="50" rows="10">文本内容textarea> p>
文件域：
<p> <input type="file" name="files">p>
表单元素格式
8，表单初级验证
常用方式：
placeholder(提示)
required(非空判断)
pattern(正则表达式判断)
9，总结
