轻松学HTML+CSS之表格

合集下载

table标签聚焦函数

table标签聚焦函数1.引言1.1 概述HTML中的table标签是一种用于创建和显示表格数据的标签，它是网页设计中常用的元素之一。

通过table标签，我们可以将数据以表格的形式展示出来，使得数据的呈现更加结构化和易于理解。

表格在网页设计中扮演着重要的角色，它可以用于展示各种类型的数据，包括文本、数字、图像等等。

表格的结构性和整齐性使得我们可以更加清晰地组织和呈现数据，使得数据的比较和分析更加容易。

在table标签中，我们可以定义表格的行（row）和列（column），并在每个单元格中放置内容。

我们可以设置表格的外观样式，如边框、背景颜色等，以及表格的布局方式，如表头、表身、表尾等。

同时，我们还可以使用一些属性来控制表格的行为，比如合并单元格、固定表头等。

在本文中，我们将主要讨论table标签的聚焦函数，也就是将焦点集中在表格中特定的行或单元格上。

聚焦函数可以改变表格的外观和行为，使得特定的行或单元格脱颖而出，更加突出和易于操作。

通过对table标签的聚焦函数的介绍和分析，我们将深入了解其基本用法和属性，并以实例演示如何使用和优化表格的聚焦效果。

除此之外，我们还将探讨table标签的优点和应用场景，以及其局限性和改进方向，以期为读者提供更加全面的了解和应用表格标签的指导。

1.2 文章结构文章将分为引言、正文和结论三个部分。

引言部分主要介绍本文的背景和目的。

首先，概述table标签聚焦函数的作用和意义。

随着互联网的发展，表格在网页设计中扮演着重要的角色。

在设计网页时，经常需要使用table标签来创建表格和布局。

而table 标签聚焦函数则能够提供更多的功能和样式来增强表格的显示效果。

接着，介绍文章的结构，包括正文和结论两部分的内容。

正文部分将详细讲解table标签的基本介绍和属性用法。

首先，对table标签的基本概念进行介绍，包括如何定义一个表格及其基本结构。

其次，详细解释table标签的各种属性和用法，包括常用的属性如width、height、border等，以及一些特殊的属性和用法如colspan、rowspan、caption等。

网页制作css

CSS是Cascading Style Sheet 的缩写。

译作”层叠样式表单“。

是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

使用CSS样式可以控制许多仅使用HTML无法控制的属性。

HTML是一种标记性语言。

当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网页元素呈现出来。

css（层叠样式表）决定浏览器将如何描述html元素的表现形式。

换而言之，CSS就是描述HTML元素的规则。

编辑摘要CSS - 基本简介CSSCSS层叠样式表是一系列格式设置的规则，它们控制网页内容的外观。

使用CSS设置页面格式时，可以将内容与表现形式分开。

网页内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。

使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。

CSS允许控制HTML无法独自控制的许多属性。

例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。

通过CSS可以用像素为单位来设置字体大小，从而可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

除设置文本格式外，还可以使用C SS控制网页中块级别元素的格式和定位。

例如，可以设置块级别元素的边距和边框，其他文本周围的浮动文本等。

CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。

CSS的主要优点是提供了便利的更新功能。

设计网站时，可以创建一个CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样很容易为Web站点内的所有网页提供一致的外观和风格。

当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。

CSS - 样式表格CSS可以用以下三种方式将样式表加入您的网页。

网页设计与制作(HTML+CSS)授课计划教案教学进度

引导教学法
学时（分钟）
2
网页效果浏览
创建“北京大学”站点并浏览网页
项目教学法任务驱动教学法
3
方法引导与操作示范
站点的创建与管理网页的相关概念、术语与网页的主要构
成元素
案例教学法
4
模仿训练
Dreamweaver 的界面布局与工作环境学生分组浏览指定的网站，分析网页的
结构、色彩和组成元素
计表的项目的制作，允许一定的自由发挥教师巡视答疑教师指出学生模仿过程中可能出错和已经出错的知识点，并进行重点评析，加深印象，强化记忆
拓展训练
“绿色食品”销售情况统计表的制作
拓展训练训练考核评价
课堂小结新课提示
组长：根据考核标准对本组学生完成的项目进行评价
教师：抽评学生完成的项目，并对错误操作给予及时纠正和提示
分组教学法案例教学法
组长：根据考核标准对本组学生完成的项目
进行评价教师：抽评学生完成的项目，并对错误操作
给予及时纠正和提示
分组教学法
归纳制作图文混排网页的相关知识指出学生操作过程中容易出现的错误
讲授法
预习表格与表格布局网页制作的相关知识讲授法
学时（分钟）
教学单元 4 表格与表格布局网页Байду номын сангаас制作
的
● 培养网页设计与制作的整体思想； ● 培养网页布局的综合能力；
和
● 提高手写代码的能力；
要
● 培养独立学习、吸取他人的经验、探讨技术的习惯；
求
● 培养创意、团队协作能力。
教教学重点：
学
网站首页的设计与制作
重
网站列表页的设计与制作
点

简单布局代码的编写2

官方论坛：简单布局代码的编写2大家好，我是蓝色天空，这节课我们先来把那导航条给解决了，由于以前讲解代码的时候，一句一句的，没有效率可言，现在，我把代码直接粘贴出来吧，再来一句一句讲解，这样，是不是会更好呢？那我把导航条代码直接就复制出来了，如下：<html><head><title>测试文档</title></head><body><table border="0" cellpadding="0" background="/wysc/bj.jpg"><tr><td width="120" height="35"></td><td width="120"></td><td width="120"></td><td width="120"></td><td width="120"></td><td width="120"></td><td width="120"></td><td width="120"></td></tr></table></body></html>复制代码本帖隐藏的内容将此代码放到记事本，此段代码在浏览器中如图：如上图所示，border="0" 这个属性让表格失去边框，注意了，表格的边框最低也要2像素，你设置1就是2，所以一般被弃而不用，cellpadding="0" 这个属性可以让表格中的单元格失去空隙，连在一块。

html文档

1.1 HTML文档的基本概念下面我们先来了解一下HTML文档中的一些基本概念。

1.1.1 标记（标签）HTML文件是以各种功能的元素所组成的，用于描述这些功能元素的符号称为“标记”，或者称为“标签”。

如<HTML>、<BODY>、<TABLE>等。

标签在使用时必须用尖括号“< >”括起来，而且大部分是成对出现，无斜杠的标签表示该标签的作用开始，有斜杠的标签表示该标签的作用结束。

如<TABLE>表示一个表格的开始，</TABLE>表示一个表格的结束。

在HTML中，标签的大小写作用相同，如<TABLE>和<table>都是表示一个表格的开始。

其实，这些标签名称大都为相应的英文单词首字母和缩写，非常容易记忆。

1.1.2 特殊字符由于尖括号和英文双引号被用来提示HTML的标签及参数值，那么在网页中要显示尖括号和英文引号只能用其他符号来代替，下面是常见特殊字符所代表的正常字符。

表1-1 HTML特殊字符书写内容对应字符<<>>""&& 空格1.1.3 语法一个标签，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定就是所谓的语法。

基本的语法格式为：<标签名称属性名="属性值" ……>例如：<p align="left" class="type”>1.1.4 元素元素是HTML文件中的一种基本结构单位，一对起始标签和终止标签以及它们之间的所有内容称为一个元素，元素能独立体现一种页面效果或者实现一种功能。

从这个定义可以看出，上面的<p>即是一个元素，它定义了后面段落的基本格式。

我们可以把元素看作是一个功能模块。

第3章样式与模板

第3章样式与模板本章要点什么是HTML样式和CSS样式创建和应用HTML样式、CSS样式创建和链接外部CSS样式表什么是模板模板的创建制作基于模板的页面本章难点创建和链接外部CSS样式表。

模板的创建和用模板更新页面上一章咱们已经学习了表格和层和框架页面的利用，本章咱们将介绍样式与模板的利用方式和技术。

在实际的网站开发进程中，为了提高工作效率，简化工作流程，常常需要利用一些自动化功能，样式和模板是最经常使用的两种工具。

利用样式除能够在单独网页中应用一致的格式之外，关于较大网站的格式设置和保护更具有重要意义。

利用模板能够大幅度提高网页制作效率，并能简化网页的编辑和保护工作。

3．1 HTML 样式样式确实是格式的组合。

在Dreamweaver中能够利用两类样式：HTML样式和CSS样式。

本节咱们先学习HTML样式，CSS样式将在下一节介绍。

3.1.1 利用 HTML 样式设置文本格式1．什么是HTML样式HTML样式是一种格式化文本的有力工具，它能够快速一致地将字体魄式应用于文档中的文本，HTML 样式可由单个或多个HTML字体标签属性（如颜色、字体、大小）和其他格式属性（如粗体或斜体）组成。

正因为HTML样式只包括字体标签，因此可利用不支持层叠样式表 (CSS) 的阅读器（如及更早版本的阅读器）查看，因此，HTML样式相较CSS样式而言具有更好的兼容性，能够被更低版本的阅读器识别。

HTML 样式的一个缺点是对 HTML 样式所做的更改不自动在文档中更新。

若是应用了一个样式，后来又更改了它，那么必需对文本从头应用该样式才能更新格式设置。

与 CSS 样式不同，HTML 样式格式只阻碍应用它的文本或利用所选 HTML 样式创建的文本。

若是希望能够更改格式并自动更新该格式的所有实例，则利用 CSS 样式。

2．利用HTML样式设置文本格式要利用HTML样式设置文本格式，通常包括两个进程：第一在网页中创建样式，然后将该样式应用于网页中的文本。

CSS菜鸟教程

什么是CSS?
CSS是CascadingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
学习CSS的基础
学习CSS之前您应该已经了解了HTML或者XHTML。
学习CSS需要什么特殊的软件吗？
注意：类名和id名不可以用数字开头。
不指定标签的类或id
在网页设计的过程中，你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签<p>。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。看看我们修改之后的网页，“新闻的内容”也应用了xinwen类的样式。
没有加入CSS时的页面，加入CSS之后的页面。它们的源代码如下，红色字体的是我们本节将要学习的部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
h2,h4 {
font-size: 12px;
display:inline;
}
注意1：现在讲解上面代码的最后一行，在<h3style="display:none">中，我们没有看到选择器，这是因为插入CSS的位置不同，它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效率。

html教学大纲

html教学大纲HTML教学大纲HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。

它被广泛应用于网页设计和开发领域。

对于想要学习HTML的人来说，一个清晰而全面的教学大纲是非常重要的。

本文将提供一个适用于初学者的HTML教学大纲，帮助他们系统地学习HTML的基础知识和技能。

第一部分：HTML基础1. 什么是HTML- HTML的定义和作用- HTML的发展历史2. HTML文档结构- HTML文档的基本结构- HTML标签和元素的概念- HTML文档的头部和主体3. 常用HTML标签- 标题标签（h1-h6）- 段落标签（p）- 链接标签（a）- 图像标签（img）- 列表标签（ul、ol、li）- 表格标签（table、tr、td）4. HTML属性- 属性的概念和用法- 常用属性（class、id、src、href等）5. HTML表单- 表单的作用和结构- 常用表单元素（输入框、复选框、单选框、下拉列表等） - 表单的提交和处理第二部分：CSS基础1. 什么是CSS- CSS的定义和作用- CSS与HTML的关系2. CSS样式- 内联样式- 内部样式表- 外部样式表3. CSS选择器- 元素选择器- 类选择器- ID选择器- 层级选择器- 伪类选择器4. CSS盒模型- 盒模型的概念和组成部分- 盒模型的属性（宽度、高度、边距、填充等）5. CSS布局- 流动布局- 定位布局- 弹性布局第三部分：HTML5和CSS31. HTML5新特性- 语义化标签- 视频和音频- 画布和绘图- 地理定位2. CSS3新特性- 边框和背景- 过渡和动画- 阴影和渐变- 媒体查询3. 响应式设计- 媒体查询的应用- 移动优先设计原则- 弹性网格布局第四部分：实战项目1. 构建个人网页- 设计网页结构和布局- 添加内容和样式- 优化网页性能2. 响应式网页设计- 设计适应不同屏幕尺寸的布局- 使用媒体查询和弹性网格布局- 优化用户体验3. 制作简单的网页动画- 使用CSS3动画效果- 添加过渡效果和关键帧动画- 提高网页的交互性和吸引力结语：本教学大纲涵盖了HTML和CSS的基础知识和技能，以及HTML5和CSS3的一些新特性。

第10章使用CSS样式表美化网页

第10章使用CSS样式表美化网页CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。

在如今的网页制作中，几乎所有精美的网页都用到了CSS。

有了CSS控制，网页便会给人一种尝新悦目的感觉。

CSS虽然只是一些代码，得到的效果却不同凡响。

Dreamweaver 8在CSS功能设计上做了很大的改进。

这一章我们就来学习如何在Dreamweaver 8中利用CSS美化网页，提高网页制作的品质。

10.1 CSS快速入门CSS是Cascading Style Sheet的缩写，可以翻译为层叠样式表或级联样式表。

CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。

使用CSS可以在设置文本之前，制定整个文本的属性，比如颜色、字体和大小等，即可获得统一的外观。

让我们先来了解一下在Dreamweaver 8中CSS的基本功能吧。

10.1.1 CSS新功能如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。

正是因为Dreamweaver 8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。

Dreamweaver 8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。

下面我们分别讲述：1. 【属性】面板在Dreamweaver 8【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜色、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。

在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。

如图10-1-1所示。

图10-1- 1 【属性】面板中的【样式】选项如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CSS。

在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2”样式。

韩顺平_轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全)

韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font></br><!-2-><font size=7 color=blue>hello world1</font></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><a href="">超链接</a> </br> <a href=""target= "-blank">在新窗口打开</a></br><a href=""target= "-self">在本页面打开</a> </br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><img src ="a.jpg" width="100" > <a href=""><img src ="a.jpg" width="100" ></a>  <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> </body></html>Table表格：案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> </table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><frame src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密  码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区*********</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font></br><!-2-><font size=7 color=blue>hello world1</font></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><a href="">超链接</a> </br> <a href=""target= "-blank">在新窗口打开</a></br><a href=""target= "-self">在本页面打开</a> </br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><img src ="a.jpg" width="100" > <a href=""><img src ="a.jpg" width="100" ></a>  <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> </body></html>Table表格：案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> </table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><fram e src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密  码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区*********</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>DIV+CSS部分笔记当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。