功能强大的HTML_html/css_WEB-ITnose
时间：2021-07-01 10:21:17
帮助过：17人阅读
HTML基本标签(一)
1.什么是HTML
html：Hyper TextMakeup language：超文本标记语言
html：网页的“源码”
浏览器：“解释和执行”html源码的工具
2.网页的摘要信息
网页摘要信息利于浏览器解析和搜索引擎搜索：
2.1使用
标签</p> <p><head></p> <p><tlite>搜狐-中国最大的门户网站 2.2使用标签
(1)描述文档类型和字符编码
(2)描述搜索关键字和描述
3.HTML页面中的块和行
HTML标签分类(方便后续的布局设计)
块级标签：显示为”块”状，前后隔一行
行级标签：按行逐一显示
强调：块级和行级标签的区别：
块级：前后换行
行级：一行内显示
块级标签分为：基本块级标签，常用于布局的块级标签
基本块级标签：
001.标题标签
标题
......
标题
h1最大，h6最小
002.段落标签
...
003.水平线标签
常用于布局的块级标签：
001.有序列表标签
- 列表项1
002.无序列表标签
003.定义描述标签(常用于图文混编)
- 标题
- 描述1
004.用定义描述标签实现图文混编的效果
005.表格
006.表单
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,图像标签
为了浏览器之间的兼容，推荐使用title属性，确保能显示提示文字
alt:当图片不显示时，显示在图片上的文字
title:鼠标停留在图片上显示的文字
002.行级标签:显示某行内的独特样式
文本等行级内容
003.换行标签
06.为什么需要w3c标准
w3c:World Wide Web Consortium,万维网联盟
W3C的职能：负责制定和维护web行业标准
W3C提倡的web结构：
1、内容（结构）和表现（样式）分离
2、HTML内容结构要求语义化
07.XHTML1.0基本规范
001.标签名和属性名必须小写
002.html标签必须关闭
003.属性值必须用引号括起来
004.标签必须正确嵌套
005.必须添加文档类型声明
文档声明必须位于文档的最前面，级别有三种：Strict(严格类型),Transitional(过渡类型)，Frameset(框架类型)
HTML基本标签(二)
01.超链接--实现页面间的导航
语法：链接热点文本或图像
例如：
02.相对路径：相对于当前目录的地址，常用
登录
绝对路径：指向目标地址的完整描述，少用
登录
搜狐
重要：如果要访问当前路径的上一级路径可以使用../
03.超链接的三种应用场合
001.页面间链接
002.锚链接
003.功能性链接
001.页面间链接
[登录]
适用场合：常用于网站导航
002.实现锚链接（分为同页面锚链接和页面间锚链接）
同页面锚链接：
1，定义标记(锚)：目标位置
2，设置链接到标记位置：当前位置
适用场合：适用于页面内容较多，超过一屏的场合
跨页面链接：
1.标记所在页：[明星专区]
锚链接可以用于同页也可以跨页链接
2.设置链接到标记位置：明星专区
003.功能性链接
邮箱、QQ链接等
待写…
04.注释
被注释的行用于增加代码的可读性，不显示
05.特殊符号
空格：
大于：>
小于：<
引号("):"
版权号():©
因为<、>等符号在HTML中已使用，所以必须用其他符号来代替，都以;号结束
06.常见的表单元素
单行文本框(text)
密码框(password)
文本域(textarea)
单选按钮(radio)
复选框(checkbox)
提交按钮(submit)
下拉列表(select)
重置按钮(reset)
07.表单的基本语法
action：指定提交后，由服务器上哪个处理程序处理
method：指定向服务器提交的方法：一般为post或get方法，post方法比较安全。
08.表单的执行原理
客户端：请求登录，通过表单填写账户信息
客户端和服务器类似两个人沟通一样，从而建立交互活动
服务器端：验证发来的账号信息，然后给出反馈！
09.表单元素的基本格式
10.表单元素的逐一介绍
文本框
name用于服务器端获取数据，例如：request.getParameter("userName")
密码框
按钮
普通按钮：button
提交按钮：submit
重置(清空)按钮：reset
图片按钮：image
单选按钮
名字name相同表明属于同一组
特点：单选
复选框
特点:多选
文件域
例子：
作用：提供固定选项，避免用户输入错误
多行文本框
隐藏域
方便服务器端"记住"客户端的信息，但又不希望客户看到的数据
只读和禁用属性
readonly:希望某个框内的内容只允许用户看，不能修改
disabled:因没达到使用的条件，限制用户使用
同意以上协议
表格应用和布局
1.为什么使用表格？
表格常见应用场合：
01论坛
02.购物网站
03.门户网站应用表格
2.表格的基本结构
行、列和单元格
特点：通常情况下，同行的高度一致，同列的宽度一致
3.表格的基本语法
如何创建表格？
代表表格的开始，border=“2”表示边框宽度为2
4.表格的跨行跨列（重点，重点！！！）
如何跨列
其中，colspan属性表示跨多少列
该行其他单元格的内容就省略不写了
rowspan属性表示跨多少行
5.表格高级标签
表格标题：
表头：
页眉： 数据主体： | 页脚：
6.表格布局
如何实现图文布局？
实现步骤：
01.确定行列数：5行2列
02,写出5行2列表格
03，确定跨行跨列的单元格：
1行1列单元格跨2列
2行1列单元格跨4行
04.增加rowspan和colspan删除多余单元格、
![公告栏](https://www.gxlcms.com/“…") |
|
大学要求老师开网店 |
安全锤网上大热销 |
……
7.如何实现表单布局？
使用表格进行布局对显示数据有什么要求？实现思路是什么？
使用场合：数据显示要求为规整，符合表格布局的特点
布局的实现思路：
01，需要几行几列的表格？
02，那些单元格有跨行或跨列？
03，编写表格代码实现
注意：1，同列单元格宽度由该列宽度最大的单元格决定
2，同行单元格宽度由该行高度最高的单元格决定
8. 嵌套布局
嵌套表格布局的缺点：
01，代码量大
02，层次结构也相对复杂
03，不利于Google等搜索引擎搜索查找数据
9.表格布局适用场合：
01，规则的数据显示
02，表单页面
提示：表格布局不适合不规则的复杂页面，这种场合
需使用DIV+CSS布局
框架
1、为什么使用框架？
框架的两类用途：
01.显示多窗口页面--使用
