HTML基本标签(一)
1.什么是HTML
html：Hyper TextMakeup language：超文本标记语言
html：网页的“源码”
浏览器：“解释和执行”html源码的工具
2.网页的摘要信息
网页摘要信息利于浏览器解析和搜索引擎搜索：
2.1使用<title>标签
<head>
<tlite>搜狐-中国最大的门户网站</title>
</head>
2.2使用<meta>标签
(1)描述文档类型和字符编码
(2)描述搜索关键字和描述
3.HTML页面中的块和行
HTML标签分类(方便后续的布局设计)
块级标签：显示为”块”状，前后隔一行
行级标签：按行逐一显示
强调：块级和行级标签的区别：
块级：前后换行
行级：一行内显示
块级标签分为：基本块级标签，常用于布局的块级标签
基本块级标签：
001.标题标签
<h1>标题</h1>
......
<h6>标题</h6>
h1最大，h6最小
002.段落标签
<p>...</p>
003.水平线标签
<hr/>
常用于布局的块级标签：
001.有序列表标签
<ol>
<li>列表项1</li>
</ol>
002.无序列表标签
<ul>
<li>列表项1</li>
</ul>
003.定义描述标签(常用于图文混编)
<dl>
<dt>标题</dt>
<dd>描述1</dd>
</dl>
004.用定义描述标签实现图文混编的效果
005.表格
<table>
<tr>
<td>百度</td>
<td>新浪</td>
</tr>
</table>
006.表单
<formmethod=”post/get”action=”#”>
...
</form>
007.分区标签div
重点： 一般当做结构化块状元素使用，作为逻辑分区(分块)即容器来使用。
04.请说出实际开发常用的4种块状结构是什么？
01.div-ul(ol)-li:常用于分类导航或菜单等。
02.div-dl-dt-dd：常用语图文混编的场合
03.table-tr-td常用于图文布局或数据显示
04.form-table-tr-td:常用于布局表单
05.行级标签
001,图像标签
<imgsrc="图片地址"alt="提示文字"title="提示文字">
为了浏览器之间的兼容，推荐使用title属性，确保能显示提示文字
alt:当图片不显示时，显示在图片上的文字
title:鼠标停留在图片上显示的文字
002.行级标签<span>:显示某行内的独特样式
<span>文本等行级内容</span>
003.换行标签<br/>
06.为什么需要w3c标准
w3c:WorldWideWebConsortium,万维网联盟
W3C的职能：负责制定和维护web行业标准
W3C提倡的web结构：
1、内容（结构）和表现（样式）分离
2、HTML内容结构要求语义化
07.XHTML1.0基本规范
001.标签名和属性名必须小写
002.html标签必须关闭
003.属性值必须用引号括起来
004.标签必须正确嵌套
005.必须添加文档类型声明
文档声明必须位于文档的最前面，级别有三种：Strict(严格类型),Transitional(过渡类型)，Frameset(框架类型)
HTML基本标签(二)
01.超链接--实现页面间的导航
语法：<ahref="链接地址"target="目标窗口位置">链接热点文本或图像</a>
例如：
02.相对路径：相对于当前目录的地址，常用
<ahref="login/login.htm">登录</a>
绝对路径：指向目标地址的完整描述，少用
<ahref="memAdmin/login/login.htm">登录</a>
<ahref="http://www.sohu.com">搜狐</a>
重要：如果要访问当前路径的上一级路径可以使用../
03.超链接的三种应用场合
001.页面间链接
002.锚链接
003.功能性链接
001.页面间链接
<ahref="login/login.htm">[登录]</a>
适用场合：常用于网站导航
002.实现锚链接（分为同页面锚链接和页面间锚链接）
同页面锚链接：
1，定义标记(锚)：<aname="标记名">目标位置</a>
2，设置链接到标记位置：<ahref="#标记名">当前位置</a>
适用场合：适用于页面内容较多，超过一屏的场合
跨页面链接：
1.标记所在页：<aname="标记名">[明星专区]</a>
锚链接可以用于同页也可以跨页链接
2.设置链接到标记位置：<ahref="anchor.html#star">明星专区</a>
003.功能性链接
邮箱、QQ链接等
待写…
04.注释
<!--注释内容--!>
被注释的行用于增加代码的可读性，不显示
05.特殊符号
空格：
大于：>
小于：<
引号("):"
版权号():©
因为<、>等符号在HTML中已使用，所以必须用其他符号来代替，都以;号结束
06.常见的表单元素
单行文本框(text)
密码框(passWord)
文本域(textarea)
<textarea></textarea>
单选按钮(radio)
复选框(checkbox)
提交按钮(submit)
下拉列表(select)
<select>
<optionvlalue=”1”>一月</option>
</select>
重置按钮(reset)
07.表单的基本语法
<formaction="表单提交地址"method="提交方法">:提交方法只有post和get两种
文本框、按钮等表单元素
</form>
action：指定提交后，由服务器上哪个处理程序处理
method：指定向服务器提交的方法：一般为post或get方法，post方法比较安全。
08.表单的执行原理
客户端：请求登录，通过表单填写账户信息
客户端和服务器类似两个人沟通一样，从而建立交互活动
服务器端：验证发来的账号信息，然后给出反馈！
09.表单元素的基本格式
<inputname="表单元素名称"type="类型"value="值"size="显示宽度"maxlength="最大长度"checked="是否选中"/>
10.表单元素的逐一介绍
文本框
<inputname="名称"type="text"value="初值"size="数字">
name用于服务器端获取数据，例如：request.getParameter("userName")
密码框
<inputname="名称"type="password"value="初值"size="数字">
按钮
<inputname="名称"type="按钮类型"value="按钮文字"src="图片按钮的图片url">
普通按钮：button
提交按钮：submit
重置(清空)按钮：reset
图片按钮：image
单选按钮
<inputname="组名"type="radio"value="文本"checked="...">
名字name相同表明属于同一组
特点：单选
复选框
<inttype="checkbox"name=""value=""checked="">
特点:多选
文件域
<inputtype="file"name="">
例子：<p><inputtype="file"name="files"/><br/>
<inputtype="submit"name="upload"value="上传"/></p>
<selectname="指定列表名称"size="行数">
<optionvalue="选项值"selected="selected">...</option>
</select>
作用：提供固定选项，避免用户输入错误
多行文本框
<textareaname=""cols="列宽"rows="行宽">
文本内容</textarea>
隐藏域
方便服务器端"记住"客户端的信息，但又不希望客户看到的数据
<inputtype="hidden"name=""value="">
只读和禁用属性
readonly:希望某个框内的内容只允许用户看，不能修改
disabled:因没达到使用的条件，限制用户使用
<textareaname="content"cols="60"rows="8"readonly="readonly">
欢迎阅读服务条款协议，贵美的权利和义务
</textarea><br/><br/>
同意以上协议<inputname="agree"type="checkbox"/>
<inputname="btn"type="submit"value="注册"disabled="disabled"/>
表格应用和布局
1.为什么使用表格？
表格常见应用场合：
01论坛
02.购物网站
03.门户网站应用表格
2.表格的基本结构
行、列和单元格
特点：通常情况下，同行的高度一致，同列的宽度一致
3.表格的基本语法
<table>
<tr>
<td>百度</td>
<td>新浪</td>
</tr>
<tr>
<td>谷歌</td>
<td>56网</td>
</tr>
</table>
如何创建表格？
<table>代表表格的开始，border=“2”表示边框宽度为2
4.表格的跨行跨列（重点，重点！！！）
如何跨列
<tablewidth="200"border="1">
<tr>
<tdcolspan="3">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
其中，colspan属性表示跨多少列
该行其他单元格的内容就省略不写了
rowspan属性表示跨多少行
5.表格高级标签
表格标题：<caption>
表头：<th>
页眉：<thead>
数据主体：<tbody>
页脚：<tfoot>
6.表格布局
如何实现图文布局？
实现步骤：
01.确定行列数：5行2列
02,写出5行2列表格
03，确定跨行跨列的单元格：
1行1列单元格跨2列
2行1列单元格跨4行
04.增加rowspan和colspan删除多余单元格、
<tableborder="1px">
<tr>
<tdcolspan="2"><imgsrc=“…"alt="公告栏"/></td>
</tr>
<tr>
<tdrowspan="4"><imgsrc=“…"alt="公告左侧图"/></td>
<td>大学要求老师开网店</td>
</tr>
<tr>
<td>安全锤网上大热销</td>
</tr>
……
</tr>
</table>
7.如何实现表单布局？
使用表格进行布局对显示数据有什么要求？实现思路是什么？
使用场合：数据显示要求为规整，符合表格布局的特点
布局的实现思路：
01，需要几行几列的表格？
02，那些单元格有跨行或跨列？
03，编写表格代码实现
注意：1，同列单元格宽度由该列宽度最大的单元格决定
2，同行单元格宽度由该行高度最高的单元格决定
8.嵌套布局
嵌套表格布局的缺点：
01，代码量大
02，层次结构也相对复杂
03，不利于Google等搜索引擎搜索查找数据
9.表格布局适用场合：
01，规则的数据显示
02，表单页面
提示：表格布局不适合不规则的复杂页面，这种场合
需使用DIV+CSS布局
框架
1、为什么使用框架？
框架的两类用途：
01.显示多窗口页面--使用<frameset>框架集
02.页面复用--使用<iframe/&g
新闻热点
疑难解答
