一、介绍
1、超文本:普通文本只能表示文字，超文本可以表示文字、图片、视频、声音、动画、交互等等。
2、标记:所有网站都是用<>标记构成。
3、统一资源定位符URL:用来在Internet上统一定位网络资源的一种格式。
格式说明:
协议://网址或IP地址:端口号/URI
协议://
-- http:// web服务
-- https:// web安全服务
--ftp://
URI 统一资源标识符:找到服务器根目录，下面的子目录及文件名
二、html文档基本结构1.文档类型:告诉浏览器按照哪一个标准解释当前文档
说明:如果没有文档类型--怪异模式--会有大量的兼容性问题，浏览器会照最老标准就行解释
<!doctype html>
doctype document type
2.文档类型分类:
--主流的文档类型:html5文档类型声明
<!doctype html>
--旧版本的文档类型:
--xhtml1.0过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--xhtml1.0严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.html文档结构:
<!doctype html>
<html>
<head>
<title>整个文档的标题</title>
</head>
<body>
正文
</body>
</html>
4.html所有标记，要么放到<head></head>，要么放到<body></body>之间。
放到<head></head>之间的标记，一般用做一些文档的配置工作，例如，设置当前文档的字符集，
放到<body></body>之间的一般用来显示（渲染）
5、元信息标记：设置整篇文档相关信息的
<script></script> 嵌入脚本的
<style></style>嵌入css
<link>引入css文件
.先学习放到<head></head>之间的标记
<title></title> 整个文档的标记（浏览器的标题栏）
<meta>
6.html基本语法
<标记名 属性="值"属性="属性"></标记名>
<代表标记开始
标记名:表示标记是干什么用的（功能）
属性="值":具体如何显示（怎么用）
7.html标记的分类:
(1)单标记
<br> <hr> <img> <input><frame>
(2)双标记
<font></font>
<p></p>
<b></b>
8.html注释:浏览器解释到注释，直接跳过
注释是给自己，或团队其他成员，增加程序可读性
<!--
注释内容
-->
9.注意事项
--html不区分大小写--建议用全部小写
--浏览器会忽略所有空格
--养成加注释的习惯
--双标记一定关闭
三、标记1.标题
<h1-6 align="水平对齐方式left默认值/center/right"></h1-6>
2.特殊字符
空格?浏览会忽略空格成一个空格
< <
> >
版权符号 © ©
3.文字标记
<font face="字体" size="1-7" color="文字颜色"></font>
4. 标记嵌套原则:
a.如果标记的属性没有发生冲突，那么全都生效
b.如果标记属性发生冲突，那么采用就近原则，谁近谁生效
5.文字修饰
<b></b> 加粗 <strong></strong>
<i></i> 倾斜 <em></em>
<u></u> 下划线
<address></address>地址
<del></del> 删除线
6.段落标记
<p align="left默认/center/right"></p>
7.居中标记
<center></center>
8.水平分割线
<hr width="值/%" size="粗细" color="" align="left/center默认/right" noshade>
9.与格式化标记
<pre></pre>
10.忽略html标记
<xmp></xmp>
11、
移动标记
<marquee bgcolor="背景颜色" direction="left默认/right/up/down" width="" height="" behavior="scroll循环/slide只一次/alternate来回动" scrollamount="速度" scrolldelay="延迟"></marquee>
四、列表1.列表的功能:
--导航菜单
--二级菜单
--罗列一下行式内容
2.无序列表
<ul type="项目符号disc/circle/square">
<li type=""></li>
<li type=""></li>
<li type=""></li>
<li type=""></li>
</ul>
3.有序列表
<ol type="1默认值/a/A/i/I" start="从第几项开始">
<li></li>
<li></li>
<li></li>
</ol>
4.定义列表
<dl>
<dt>定义</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
<dt>定义</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
</dl>
5.超链接:网站组织资源的主要方式
6.超链接标记
<a href="访问的资源url#name" target="_self本窗口覆盖显示/_blank新窗口显示/框架名 指定框架内显示" title="输入划入的提示"></a>
7.超链接分类:根据用户访问资源不同
(1).外部链接:访问资源是其他网站的页面
<a href="http://www.taobao.com/">外部链接</a>
(2).内部链接:访问资源是本网站其他页面
<a href="test.html">内部链接</a>
(3).图片链接:单击图片访问指定资源
<a href="">
<img src="">
</a>
(4).邮件链接:点击链接，自动打开本地邮件发送客户端软件，将收件人地址自动填充，防止用户写错
<a href="mailto:asdfas@asdfa.com">邮件链接</a>
(5).锚链接:相当于书签(网站很多屏)
定义锚点<a name="锚名"></a>
定位锚点<a href="#锚名"></a>
8.无序列表例子
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无序列表</title>
</head>
<body>
<ul type="circle">
<li>西瓜</li>
<li>西红柿</li>
<li>葡萄</li>
<li>香瓜</li>
</ul>
</body>
</html>
五、多媒体1.多媒体
-图片
--声音
--视频
--flash
2.插入图像 .jpg .png .gif
<img src="图像的路径/文件名" width="" height="" alt="替换文本" align="left默认/right图片的对齐方式 top middle bottom后面文字的对齐方式">
3.插入音频/视频.mp3 .avi
<embed src="音乐路径/文件名" autostart="true" loop="true" hidden="true面板是否隐藏">
4.插入flash视频.flv .f4v
--支持流媒体播放
--压缩比高
缺点:浏览器必须得有flashplay播放器
5.插入flash动画.swf
6.图像映射
--创建热区
六、布局1.什么是布局（排版）?
答:什么地方，放什么内容
2.常用的布局版式？
答:企业网 (广字型)
电商（国字型）
上中下
混合型
3.在html中，布局的标记
--table表格2
4.在网站中，表格的功能？
--显示行列式 数据（各种表格：课程表、成绩表、工资表等）
--布局
5.表格标记
<table border="边框" width="" height="" bgcolor="背景颜色" background="背景图片" cellspacing="单元格之间的间距" cellpadding="内容距离单元格边框的内边距" align="left默认/center/right">
<tr align="水平对齐方式left默认/center/right" valign="垂直对齐方式top/middle默认/bottom">
<td align="水平对齐方式left默认/center/right" valign="垂直对齐方式top/middle默认/bottom" bgcolor="背景色" background="背景图片" rowspan="跨行合并" colspan="跨列合并"></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
6.行
7.单元格标记
8.表格嵌套
9.如何实现布局？
企业网站
布局原则:能用表格不用表格嵌套
七、框架1.框架--
--前端--浮动框架，将一个网页嵌入当前网页中
--后台--网页进行分区--框架
<iframe src=””></iframe>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动框架</title>
</head>
<body>
<p>哈哈</p>
<iframe src="移动标记.html" name="a1" width="400" height="200"></iframe>
<iframe src="http://www.baidu.com" name="a2"></iframe>
</body>
</html>
2.框架和框架集--将一个浏览器窗口分割成若干个独立的小窗口，每个小窗口，可以放置一个独立的文件
例子<frameset src=”” rows=”” /cols=””>
<frame src=”
<!doctype html>
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>框架嵌套</title> |
|
</head> |
|
<frameset rows="150,*"> |
|
<frame name="top" src="top.html"> |
|
<frameset cols="200,*"> |
|
<frame name="left" src="left.html"> |
|
<frame name="right" src="right.html"> |
|
</frameset> |
|
</frameset> |
|
</html> |
1.表单:网站获取用户信息的主要途径
2.表单标记
<form name="名称" action="数据提交到的页面或脚本" method="get默认/post">
method:表单提交数据方法
get：
--原理:表单数据和HTML文档头部<head></head>一起提交
--特点:数据大小受到文档头部大小限制，一般不超过90字符
--地址栏能够明文看到数据
--什么情况下用get方法:一般搜索引擎，对外提供服务
post：
--原理:表单数据和HTML正文<body></body>一起以IP包形式传送
--特点:地址栏看不到
数据大小无限制
--什么情况下用:传送大数据或文件
</form>
3.表单项
(1)<input type="text" 输入文本框
"password" 密码框
"radio"单选按钮
"checkbox" 复选框
"button" 按钮
"image" 图像域:和提交按钮一样
"file" 文件域
"hidden" 隐藏域
"reset" 重置按钮
"submit" 提交按钮
(2)单选下拉菜单/多选列表size大小multiple多选
<select name="" size="大小" multiple>
<option value=""></option>
</select>
(3)文本域:
<textarea name="" cols="宽度" rows="高度"></textarea>