c html的案例,这样学HTML基础，奉送专业案例教程

原标题：这样学HTML基础，奉送专业案例教程

HTML基础入门案例教程

HTML简介

1. 什么是HTML

a) HTML是用来设计网页的一门语言, 它不依赖于任何语言, 其最重要的特性就是可以包含超链接,图片,音频与视频等数据。

b) HTML是一种超文本标记语言。

i. 超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

ii. 标记语言：使用一组标签对内容进行描述的一门语言，不是编程语言！

2. HTML怎么使用

a) 所有的html文件后缀名都以.html或.htm结尾，建议使用.html结尾。

b) 整个html文件由头部分

和体部分组成。

c) html标签都是由开始标签和结束标签组成。

d) html标签忽略大小写，建议使用小写。

网站信息显示

1. 常用标签

a) 标题标签：标题标签使用,n从1到6逐渐变小，超过6的按6显示。特点：加粗加黑显示，单独占用一行，与其它行有一定行间距。

b) 水平线标签：

---

c) 段落标签：

d) 字体标签：，必须结合其属性才能具备一定的样式效果。

i. 设置颜色：color(可以是英文单词也可以是十六进制)

ii. 设置大小：size(从1到7逐渐变大，超过7的按7显示)

2. 案例

网站图片信息

1. 图片标签

a) 图片标签：

b) 图片位置属性：src

i. 绝对路径：带有盘符的

ii. 相对路径：

1. 如果是同级，直接写文件名或./文件名

2. 如果是上一级，写../文件名

3. 如果是下一级，写目录名/文件名

c) width：设置图片的宽度

d) height：设置图片的高度

e) alt：当图片无法正常显示时给出提示信息

2. 案例

网站友情链接

1. 列表标签

a) 有序列表：

。属性：type有5个值(1、A、a、I、i)，start(起始值)reversed(降序)

b) 无序列表：

2. 超链接标签

a) 点我

3. 案例

网站首页

1. 表格标签

a) 表格标签使用

，table中tr标签代表每行，tr中的td标签代表每列。

b) table属性:边框(border)、宽度(width)、高度(height)、背景颜色(bgcolor)、边框与边框的距离(cellspacing)、边框与内容的距离(cellpadding)、水平显示(align)

2. 案例

a) 步骤分析

i. 创建一个八行一列的表格

ii. 实现第一行(嵌套一个一行三列的表格，然后分别对单元格的内容进行填充)

iii. 实现第二行(使用字体标签结合超链接标签完成导航栏，需设置当前单元格背景色为黑色)

iv. 实现第三行(放置一张图片)

v. 实现第四行(嵌套一个三行七列的表格)

vi. 实现第五行(放置一张广告图片)

vii. 实现第六行(复制第四行代码)

viii. 实现第七行(放置一张广告图片)

ix. 实现第八行(使用字体标签和超链接标签完成友情链接和版权信息)

b) 编写实现

热门商品同最新商品

c) 效果展示

网站后台管理系统

1. 框架集标签

a)

标签将页面进行区域划分

i. cols属性：进行垂直切割划分(参数值相加等于100%，其中一块可以使用*表示)

ii. rows属性：进行水平切割划分(参数值相加等于100%，其中一块可以使用*表示)

b) 划分好区域后，对具体区域进行内容填充，需使用标签

i. src属性：指定该区域显示的文件(路径)

ii. name属性：通常会结合超链接的target属性使用，定义最终的显示位置

2. 案例

网站注册

1. 表单标签

a) 所有需要提交到服务器端的表单项使用

括起来

i. action属性：表单提交的位置(可以是一个页面，也可以是一个后台java代码)

ii. method属性：表单提交的方式(get/post/delete….等7种)

b) 表单项

i. 隐藏项

ii. 文本项

iii. 密码项

iv. 单选按钮

v. 多选按钮

vi. 下拉列表

a)

i. 北京

ii. 上海

b)

vii. 文件上传项

viii. 文本输入域

ix. 提交按钮

x. 普通按钮

xi. 重置按钮

2. 案例

a) 步骤分析

i. 创建一个五行一列的表格，然后分别对每一行进行实现

ii. 直接复制之前的代码(第一行、第二行、第四行、第五行)

iii. 第三行(放置一个表单，通过表格标签进行布局)

b) 编写实现

c) 效果展示

责任编辑：