一、B/S结构 WEB网站
1.开发语言：HTML+CSS+JS
2.运行环境：浏览器（IE浏览器、新版本浏览器）
3.访问网页：网址（DNS域名解析器）
二、浏览器
浏览器通过网址请求到指定的HTML页面，WEB服务器将HTML页面代码响应回浏览器，浏览器得到这些文件后，进行解析展示。
浏览器————下载、解析HTML页面
三、HTML标签语言
1.HTML：超文本标记语言（不止文本）
2.W3C标准：对WEB语言的一种标准、官方权威。
3.HTML的结构
<html>
<head>头部</head>
<body>身体部分</body>
</html>
4.头文件的申明：HTML5规范 <!DOCTYPE html>
5.网页标题：<title>网页标题</title>
6.网页设置：编码、媒体查询器 <meta>
7.HTML标签的构成：标签名、属性、内容
<标签名 属性="属性值">内容</标签名>
8.HTML注意事项：
1.HTML标签对大小写不敏感，推荐小写
2.HTML标签不正确，不会报错，按照默认值进行设置
3.多个空格和多个换行都当成一个空格
4.常规标签由开始标签和结束标签构成，而空标记没有内容<br><hr><img>
四、HTML常用标签
1.段落标签
1.标题：h1~h6 依次减小
2.分割符号：<hr/> 分割一条水平线
3.段落：<p>
4.换行符：<br>
5.转义字符：空格
< <
> >
@ ©
6.字体格式化：加粗 <b>
斜体 <i>
删除体 <del>
2.图片
<img src="图片地址" alt="加载失败" title="鼠标悬停提示" width="宽度" height="高度">
1.绝对路径：从盘符开始的文件路径
2.相对路径：从HTML页面出发，找相对的文件路径
3.网络路径：http://www.baidu.com
3.超链接
<a href="打开的路径" target="打开方式">文字</a>
1.跳转其他页面，当前窗口 target="_self"
2.跳转其他页面，新窗口 target="_blank"
3.锚点链接， href="#id" href="#name"
4.功能跳转：邮箱、QQ、MSN
4.行内标签与块级标签
行级标签：<a> <i> <b> <img> 可以同时放在一行
块级标签：<h1><h6> <p><hr><br> 单独占满一行
五、列表
1.无序列表 <ul type="">
<li></li>
<li></li>
</ul>
2.有序列表
<ol type="">
<li></li>
<li></li>
</ol>
3.定义列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
六、表格
常用标签和属性
<table bgcolor="背景颜色" border="边框的宽度" cellspacing="单元格之间的距离" cellpadding="内容与单元格之间的距离" align="表格自身对齐" width="整个表格的宽度">
<caption>表格的标题</caption>
<tr>
<th>列的表头信息</th>
</tr>
<tr align="整行的对齐">
<td align="整列的对齐" width="这个单元格的宽度"></td>
</tr>
<tr>
<td colspan="跨列"></td>
<td rowspan="跨行"></td>
</tr>
</table>
七、媒体
video 视频 mp4、webm、avi
audio 音频 mp3
autoplay 自动播放
controls 控制台
loop 循环播放
preload = "auto" 预加载
兼容浏览器版本
<source src="vedio/vedio.mp4" type="video/mp4">
<source src="vedio/video.webm" type="video/webm">
八、页面结构语义化标签
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容
常见布局：
<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
九、内联框架
作用： 将多个页面融合成一个页面
<iframe src="页面地址" scrolling="是否出现滚动条" frameborder="是否出现边框" width="宽度" height="高度" name="配合a标签target打开页面">
<a href="页面" target="iframe的name"></a>
十、表单
1.表单：收集用户的信息，提交到后台
<form>
action="数据提交到哪里" method="默认get"
get:1.地址栏上可以看见数据，不安全
2.数据量小，有限
post:
1.地址栏看不见数据，安全
2.数据量大，可支持大文件
提交按钮：
1.<input type="submit">，需要写在form中
2.<button>提交</button>
2.输入框:接受用户输入的信息
<input>
maxlength 字符最大长度
size 输入框宽度
name 输入框的名字、分组
value 输入框的值
checked 选中
type
文本 text
密码 password
单选 radio
多选 checkbox
日历 date
滑块 range
数字 number
文件 file
颜色 color
隐藏 hidden
重置 reset
提交 submit
普通按钮 button
图片按钮 image
3.下拉列表：
<select name>
<option value selected>子选项</option>
multiple 多对玄
4.大文本域
<textarea name rows="行数" cols="列数" >
不翻译标签、对特殊字符直接翻译、对空格、回车敏感
</textarea>
5.元素状态
选中状态 checked 单选、多选
selected 下拉列表
只读状态 readonly
禁用状态 disabled
可用状态 enabled
隐藏状态 hidden
6.验证
1.提示 placeholder
2.必填 required
3.正则验证格式 pattern