轻松学习HTML+CSS 学习笔记

合集下载

html-css上课笔记

html-css上课笔记

HTML语言剖析Html简介-目录全写: HyperText Mark-up Language译名:超文本标识语言简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件达到预期的显示效果。

由文字(字母,数字、标点符号)及标签组合而成。

任何文字编辑器都可以,这里推荐用:Dreamweaver。

1. Html特点:►描述性语言,结构语言,用于决定网页内容以什么样的形式显示;►通过标签来控制网页的文档、字符和段落等的格式,以及对脚本语言等的调用;►纯文本文件,可以使用各种文本编辑器编写; (Dreamweaver是首选)►文件扩展名: .htm 或 .html;►html文件必须在Web浏览器上运行;(运行环境)►具有跨平台性。

2.HTML语法结构:►HTML文件是由一系列的元素和标签(tag)组成的;►元素:网页中的内容;►标签:用于规定元素的属性和它在文件中的位置;►格式:<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...> ►不区分大小写。

3.HTML文件结构:►起始标记:<html> </html> 表示HTML网页的起始;►文件头部:<head> </head> 设置初始化文档信息和文档管理标注;►文件主体:<body> </body> 设置格式化的浏览器显示的文档(内容);►注释部分:<!-- --> 可以放在任何位置;►<! >※例:<html><head><title>Html简介</title><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head><body bgcolor="#FFFFFF" text="#000000"><!--网页内容--></body></html>⏹标签写法:►任何标签皆由"<>"所包含,如 <b>►标签名与小于号之间不能留有空白字符。

手把手教你学习HTML和CSS的基础知识

手把手教你学习HTML和CSS的基础知识

手把手教你学习HTML和CSS的基础知识第一章:HTML基础知识HTML,全名为超文本标记语言(HyperText Markup Language),是用于创建网页的标准标记语言。

学习HTML是学习网页开发的第一步。

本章将介绍HTML的基础知识。

1.1 HTML的起源与发展HTML最早由蒂姆·伯纳斯-李(Tim Berners-Lee)于1990年创造,并在1993年发布了HTML 2.0的第一个正式规范。

随着时间的推移,HTML不断发展,现在最新的版本是HTML5。

1.2 HTML文档的结构HTML文档由HTML标签组成,标签用于定义文档的结构和呈现内容。

一个HTML文档通常包含<head>、<body>和</html>等标签。

1.3 HTML标签的基本语法HTML标签由尖括号包围,并以起始标签和结束标签的形式出现。

例如,<p>是一个起始标签,</p>是一个结束标签。

还有一些标签是没有结束标签的,如<br>标签。

1.4 HTML元素与属性元素是指由起始标签、内容和结束标签组成的整体。

属性提供了关于元素的额外信息,如元素的样式、链接地址等。

HTML元素和属性中的内容是由标签和值组成的。

1.5 常用的HTML标签HTML有很多常用的标签,本章只介绍一些基础的标签。

如<h1>到<h6>标签用于定义标题;<p>标签用于定义段落;<a>标签用于创建超链接等。

第二章:CSS基础知识CSS,全名为层叠样式表(Cascading Style Sheets),是用于网页设计的样式表语言。

学习CSS可以为HTML文档添加样式和布局。

本章将介绍CSS的基础知识。

2.1 CSS的起源与发展CSS最早由赖耶斯博士(Håkon Wium Lie)和贝尔纳斯·卡尔(Bert Bos)于1996年创造,并在1997年发布了CSS1的第一个正式规范。

Html+css基础教程

Html+css基础教程

H t m l+c s s基础教程(适合新手)在这里我把h t m l和c s s放在一起了,适合新手和在学习的人当成笔记用。

希望对大家有所帮助。

HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。

一、HTML的组成结构HTML分为单标识语句和双标识语句。

<标识>内容如:<br><标识>内容</标识> 如:<a href=””>搜狐</a>标识中存在标识属性用来定义各标识属性的值。

<font size=5> 中心内容</font>二、HTML全局结构1、头部。

(标题栏)只要你学过英语,你应该知道头怎么用英文写吧!yes,HEAD就是了;所以,头部的HTML写法就是<head>头部的内容</head>,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。

类似这样的以后会经常用到。

2、眼睛。

(标题内容)就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?title,yes!大家知道眼睛是长在头上的,所以啦:<title>标题</title>这些应放在<head>和</head>之间。

也就是<head><title>标题</title></head>3、身体。

(主体)身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:<body>页面内容</body>最后,别忘了把这些部分组成一体----网页,所以咱们就用<html></html>把他们给包起来。

CSS超全笔记(适合新手入门)

CSS超全笔记(适合新手入门)

CSS超全笔记(适合新⼿⼊门)CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表(级联样式表),主要⽤于设置HTML页⾯中的⽂本内容(字体、⼤⼩、对齐⽅式等)、图⽚的外形(宽⾼、边框样式、边距等)以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜⾊、背景的控制及整体排版等,⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表(书写位置)CSS可以写到那个位置?是不是⼀定写到html⽂件⾥⾯呢?内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中,并且⽤style标签定义,其基本语法格式如下:<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中,style标签⼀般位于head标签中title标签之后,也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略,写上也⽐较符合规范,所以这个地⽅可以写也可以省略。

⾏内式(内联样式)内联样式,⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式,其基本语法格式如下:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性,实际上任何HTML标签都拥有style属性,⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同,⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表(外链式)链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中,通过link标签将外部样式表⽂件链接到HTML⽂档中,其基本语法格式如下:<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意: link 是个单标签哦该语法中,link标签需要放在的三个属性head头部标签中,并且必须指定link标签,具体如下:href:定义所链接外部样式表⽂件的URL,可以是相对路径,也可以是绝对路径。

html,css学习实践总结

html,css学习实践总结

html,css学习实践总结⽹页的布局⽅式1.什么是⽹页的布局⽅式?⽹页的布局⽅式其实就是指浏览器是如何对⽹页中的元素进⾏排版的1.标准流(⽂档流/普通流)排版⽅式1.1其实浏览器默认的排版⽅式就是标准流的排版⽅式1.2在CSS中将元素分为三类, 分别是块级元素/⾏内元素/⾏内块级元素1.3 在标准流中有两种排版⽅式, ⼀种是垂直排版, ⼀种是⽔平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版⽔平排版, 如果元素是⾏内元素/⾏内块级元素, 那么就会⽔平排版2.浮动流排版⽅式2.1浮动流是⼀种"半脱离标准流"的排版⽅式2.2浮动流只有⼀种排版⽅式, 就是⽔平排版. 它只能设置某个元素左对齐或者右对齐注意点:1.浮动流中没有居中对齐, 也就是没有center这个取值2.在浮动流中是不可以使⽤margin: 0 auto;特点:1.在浮动流中是不区分块级元素/⾏内元素/⾏内块级元素的⽆论是级元素/⾏内元素/⾏内块级元素都可以⽔平排版2.在浮动流中⽆论是块级元素/⾏内元素/⾏内块级元素都可以设置宽⾼3.综上所述, 浮动流中的元素和标准流中的⾏内块级元素很像3.定位流排版⽅式浮动元素的脱标1.什么是浮动元素的脱标?脱标: 脱离标准流当某⼀个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了⼀样, 这个就是浮动元素的脱标2.浮动元素脱标之后会有什么影响?如果前⾯⼀个元素浮动了, ⽽后⾯⼀个元素没有浮动 , 那么这个时候前⾯⼀个元就会盖住后⾯⼀个元素浮动元素的排序规则1.浮动元素排序规则1.1相同⽅向上的浮动元素, 先浮动的元素会显⽰在前⾯, 后浮动的元素会显⽰在后⾯1.2不同⽅向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定浮动元素贴靠现象1.什么是浮动元素贴靠现象?1.如果⽗元素的宽度能够显⽰所有浮动元素, 那么浮动的元素会并排显⽰2.如果⽗元素的宽度不能显⽰所有浮动元素, 那么会从最后⼀个元开始往前贴靠3.如果贴靠了前⾯所有浮动元素之后都不能显⽰, 最终会贴靠到⽗元素的左边或者右边浮动元素字围现象1.什么是浮动元素字围现象?浮动元素不会挡住没有浮动元素中的⽂字, 没有浮动的⽂字会⾃动给浮动的元素让位置,这个就是浮动元素字围现象1.企业开发中什么时候使⽤标准流什么时候使⽤浮动流?垂直⽅向使⽤标准流, ⽔平⽅向使⽤浮动流2.拿到⼀个很复杂的界⾯如何⼊⼿?2.1从上⾄下布局2.2从外向内布局2.3⽔平⽅向可以先划分为⼀左⼀右再对左边或者右边进⾏进⼀步布局浮动元素⾼度问题1.在标准流中内容的⾼度可以撑起⽗元素的⾼度2.在浮动流中浮动的元素是不可以撑起⽗元素的⾼度的清除浮动定义⼀个类.clear:after{display: block;content: '';clear: both;}1.清除浮动的第⼀种⽅式给前⾯⼀个⽗元素设置⾼度注意点:在企业开发中, 我们能不写⾼度就不写⾼度, 所以这种⽅式⽤得很少1.清除浮动的第⼆种⽅式给后⾯的盒⼦添加clear属性clear属性取值:none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)left: 不要找前⾯的左浮动元素right: 不要找前⾯的右浮动元素both: 不要找前⾯的左浮动元素和右浮动元素注意点:当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效1.清除浮动的第三种⽅式隔墙法2.外墙法2.1在两个盒⼦中间添加⼀个额外的块级元素2.2给这个额外添加的块级元素设置clear: both;属性注意点:外墙法它可以让第⼆个盒⼦使⽤margin-top属性外墙法不可以让第⼀个盒⼦使⽤margin-bottom属性3.内墙法3.1在第⼀个盒⼦中所有⼦元素最后添加⼀个额外的块级元素3.2给这个额外添加的块级元素设置clear: both;属性注意点:内墙法它可以让第⼆个盒⼦使⽤margin-top属性内墙法它可以让第⼀个盒⼦使⽤margin-bottom属性4.外墙法和内墙法区别?外墙法不能撑起第⼀个盒⼦的⾼度, ⽽内墙法可以撑起第⼀个盒⼦的⾼度5.在企业开发中不常⽤隔墙法来清除浮动伪元素选择器1.什么是伪元素选择器?伪元素选择器作⽤就是给指定标签的内容前⾯添加⼀个⼦元素或者给指定标签的内容后⾯添加⼀个⼦元素2.格式:标签名称::before{属性名称:值;}给指定标签的内容前⾯添加⼀个⼦元素标签名称::after{属性名称:值;}给指定标签的内容后⾯添加⼀个⼦元素1.清除浮动的第四种⽅式利⽤伪元素选择器清除浮动本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都⼀样注意点:IE6中不⽀持这种⽅式, 为了兼容IE6必须给前⾯的盒⼦添加*zoom:1;属性清除浮动⽅式五1.overflow: hidden;作⽤1.1可以将超出标签范围的内容裁剪掉1.2清除浮动1.3可以通过overflow: hidden;让⾥⾯的盒⼦设置margin-top之后, 外⾯的盒⼦不被顶下来定位流定位流1.定位流分类1.1相对定位1.2绝对定位1.3固定定位1.4静态定位2.什么是相对定位?相对定位就是相对于⾃⼰以前在标准流中的位置来移动3.相对定位注意点3.1相对定位是不脱离标准流的, 会继续在标准流中占⽤⼀份空间3.2在相对定位中同⼀个⽅向上的定位属性只能使⽤⼀个3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/⾏内元素/⾏内块级元素3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占⽤标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局4.相对定位应⽤场景4.1⽤于对元素进⾏微调4.2配合后⾯学习的绝对定位来使⽤定位流-绝对定位1.什么是绝对定位?绝对定位就是相对于body来定位2.绝对定位注意点2.1绝对定位的元素是脱离标准流的2.2绝对定位的元素是不区分块级元素/⾏内元素/⾏内块级元素绝对定位-参考点1.规律1.默认情况下所有的绝对定位的元素, ⽆论有没有祖先元素, 都会以body作为参考点2.如果⼀个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点2.1只要是这个绝对定位元素的祖先元素都可以2.2指的定位流是指绝对定位/相对定位/固定定位2.3定位流中只有静态定位不⾏3.如果⼀个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, ⽽且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点绝对定位-注意点1.如果⼀个绝对定位的元素是以body作为参考点, 那么其实是以⽹页⾸屏的宽度和⾼度作为参考点, ⽽不是以整个⽹页的宽度和⾼度作为参考点2.⼀个绝对定位的元素会忽略祖先元素的padding绝对定位-⼦绝⽗相相对定位弊端:相对定位不会脱离标准流, 会继续在标准流中占⽤⼀份空间, 所以不利于布局界⾯绝对定位弊端:默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度⾼度的变化⽽变化⼦绝⽗相⼦元素⽤绝对定位, ⽗元素⽤相对定位绝对定位-⽔平居中1.如何让绝对定位的元素⽔平居中只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的 margin-left: -元素宽度的⼀半px;定位流-固定定位1.什么是固定定位?固定定位和前⾯学习的背景关联⽅式很像, 背景定位可以让背景图⽚不随着滚动条的滚动⽽滚动, ⽽固定定位可以让某个盒⼦不随着滚动条的滚动⽽滚动注意点:1.固定定位的元素是脱离标准流的, 不会占⽤标准流中的空间2.固定定位和绝对定位⼀样不区分⾏内/块级/⾏内块级3.IE6不⽀持固定定位定位流-z-index属性1.什么是z-index属性?默认情况下所有的元素都有⼀个默认的z-index属性, 取值是0.z-index属性的作⽤是专门⽤于控制定位流元素的覆盖关系的1.默认情况下定位流的元素会盖住标准流的元素2.默认情况下定位流的元素后⾯编写的会盖住前⾯编写的3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性⽐较⼤, 谁就会显⽰在上⾯注意点:1.从⽗现象1.1如果两个元素的⽗元素都没有设置z-index属性, 那么谁的z-index属性⽐较⼤谁就显⽰在上⾯1.2如果两个元素的⽗元素设置了z-index属性, 那么⼦元素的z-index属性就会失效, 也就是说谁的⽗元素的z-index属性⽐较⼤谁就会显⽰在上⾯。

学习HTML和CSS的基本知识和语法规则

学习HTML和CSS的基本知识和语法规则

学习HTML和CSS的基本知识和语法规则第一章:HTML基本知识和语法规则1.1 HTML的定义和作用HTML是一种用于创建结构化文档的标记语言,用于描述网页的结构和内容。

它通过标签来对文本、图像、链接等进行分类和定义,使网页的结构清晰可读。

1.2 HTML文档的结构一个HTML文档通常由DOCTYPE声明、html标签、head标签和body标签组成。

其中,DOCTYPE声明用于告诉浏览器使用哪个版本的HTML解析文档,html标签定义了整个文档的根元素,head标签包含了关于文档的元信息,而body标签则包含了网页的实际内容。

1.3 HTML元素和标签HTML中的元素由一个起始标签和一个结束标签包围,起始标签和结束标签之间是元素的内容。

例如,<p>这是一个段落。

</p>中的<p>标签用于定义一个段落,而</p>标签用于结束该段落。

1.4 HTML属性HTML元素可以具有属性,属性为元素提供了额外的信息。

属性通常包含了名称和值,中间以等号连接。

例如,<imgsrc="image.jpg" alt="Image">中的src和alt就是img元素的属性,分别指定了图片的路径和替代文本。

第二章:CSS基本知识和语法规则2.1 CSS的定义和作用CSS(层叠样式表)是一种用于定义HTML文档中元素的样式的标记语言。

它通过选择器和声明来选择特定的HTML元素,并为其指定样式。

CSS的作用是提供了更好的可读性和可维护性,使得网页设计更加灵活和丰富。

2.2 CSS的引入方式在HTML文档中使用CSS有三种方式:内联样式、内部样式表和外部样式表。

内联样式通过在HTML元素的style属性中直接指定样式来引入,内部样式表则通过在HTML的head标签内使用<style>标签定义样式,外部样式表则是将CSS代码存放在独立的.css文件中,然后在HTML中使用<link>标签引入。

一步一步教你掌握HTML与CSS网页布局技巧

一步一步教你掌握HTML与CSS网页布局技巧

一步一步教你掌握HTML与CSS网页布局技巧第一章:HTML网页布局基础HTML(HyperText Markup Language)是一种用于创建网页的标记语言。

在网页布局中,HTML起到了决定网页结构和组织的作用。

本章将介绍HTML的基础知识,包括标签的使用、元素的嵌套以及常用的布局标签。

1.1 标签的使用HTML中的标签用于定义网页的结构和内容。

常用的标签有<html>、<head>、<body>等。

例如,使用<html>标签来定义HTML文档的开始和结束。

1.2 元素的嵌套HTML元素是由开始标签和结束标签组成的。

开始标签用于定义元素的开始,结束标签用于定义元素的结束。

元素可以被嵌套在其他元素中,形成层级结构。

例如,<body>元素可以包含多个<p>元素。

1.3 常用的布局标签HTML提供了一些常用的布局标签,用于实现网页的基本布局。

例如,<header>标签用于定义网页的页眉部分,<nav>标签用于定义网页的导航部分。

这些布局标签可以有效地划分网页的结构,使得网页布局更加清晰明了。

第二章:CSS网页布局技巧CSS(Cascading Style Sheets)是一种用于描述网页样式和布局的样式表语言。

在网页布局中,CSS起到了控制网页样式和布局的作用。

本章将介绍CSS的基础知识,包括选择器的使用、样式的设置以及常用的布局技巧。

2.1 选择器的使用CSS中的选择器用于选择指定的元素,并为其设置样式。

常用的选择器有标签选择器、类选择器和ID选择器等。

例如,使用类选择器可以选择具有相同类名的元素来设置样式。

2.2 样式的设置CSS可以为网页元素设置各种样式,包括颜色、字体、大小等。

可以使用CSS的属性和值来设置样式。

例如,使用color属性可以设置元素的文本颜色。

2.3 常用的布局技巧CSS提供了一些常用的布局技巧,用于实现网页的各种布局效果。

css总结笔记

css总结笔记

css总结笔记
CSS 是层叠样式表的缩写,是一种用于设计和布局网页的编程语言。

以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页,可以让网页变得更加生动、美观和易读。

CSS 可以用于网页的头部、主体和底部,以及用于网页的各个部分。

二、CSS 的语法
CSS 的语法包括选择器、属性和值等。

选择器用于选择网页中的元素,属性和值用于设置元素的样式。

三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。

通过设置这些样式,可以让网页变得更加美观。

四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。

通过使用 CSS,可以让网页变得更加生动、美观和易读。

五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。

为了解决这个问题,可以使用CSS 的媒体查询和伪元素等方法。

六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。

可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。

七、CSS 的拓展
CSS 还有很多拓展功能,如响应式设计、动画效果、Web 组件等。

通过使用CSS,可以让网页变得更加生动、美观和易读。

八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。

通过使用 CSS,可以让网页变得更加生动、美观和易读。

在学习 CSS 时,需要熟练掌握语法、样式和应用场景,并了解 CSS 的兼容性和拓展功能。

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

Html第一天1、什么是HTML?计算机,高手-—黑客2、最好的学习HTML方法,就是参考别人的网页源代码。

查看网页源代码的方法:打开网页---鼠标右键---查看源文件。

3、通过小案例,体验html,制作一个html网页HTML的简介:Hyper Text Mark-up Language 超文本标记语言的缩写,标记就是用来描述网页内容的一些特定字符.HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的现实方式。

4、HTML标记的语法,书写规则。

Html最基本的语法是:<标记符>内容</标记符>标记分为:单标记和双标记总结1、单标记和双标记2、标记的属性3、标记与属性要用空格隔开,4、属性不区分先后顺序,且属性不是必须的5、在html中标记不区分大小写,但在xhtml中所有标记都必须是小写,所以从现在开始,所有标记都采用小写。

HTML文档结构<html><head><title>标题</title></head><body>正文</body></html><meta>标记1、设置关键字<meta name=”keywords” content=”value”/>2、设置描述<meta name=”decription” content=”value” />3、设置作者<meta name=”author” content=”作者名” />4、设置字符集<metahttp-equiv="content-type" content="text/html;charset=gb2312"> 5、设置页面定时跳转<meta http-equiv="refresh" content="2;URL="/>在editplus中html代码是有颜色区别的Html标记=蓝色标记属性=红色标记属性值=粉色注释=绿色有些html元素有默认值例如:leftmargin自定义列表:<dl><dt>笔记本</dt><dd>DELL</dd><dd>lenovo</dd><dd>tosiba</dd><dt>手机</dt><dd>诺基亚</dd><dd>三星</dd><dd>小米</dd></dl>表格标题<table border="1px"width="50%"bordercolor="blue"cellspacing="0px"alig n="center"><caption align="left">成绩表<caption><tr align="center"><td>1.11</td><td>1.22</td><td>1.33</td></tr><tr align="center"><td>2.11</td><td>2.22</td><td>2.33</td></tr><tr align="center"><td>3.11</td><td>3.22</td><td>3.33</td></tr> <table>表格的结构格式化<thead>, <tbody>和<tfoot><table><thead></thead><!—表头--><tbody></tbody><!—表体--><tfoot></tfoot><!—表尾--></table>一般表格格式:<table border="1px"width="50%"bordercolor="blue"cellspacing="0px"align=" center"><caption>学生成绩表</caption><tr><th>姓名</th><th>语文</th><th>英语</th><th>数学</th></tr><tr><td>李三</td><td>99</td><td>87</td><td>67</td></tr><tr><td>张三</td><td>98</td><td>89</td><td>67</td></tr><tr><td>王五</td><td>97</td><td>98</td><td>55</td></tr><tr><td>王麻子</td><td>96</td><td>97</td><td>77</td></tr><tr><td>总分</td><td>155</td><td>343</td><td>345</td></tr><table>表格格式化:<table border="1px"width="50%"bordercolor="blue"cellspacing="0px"align=" center"><caption>学生成绩表</caption><tfoot><tr><td>总分</td><td>155</td><td>343</td><td>345</td></tr></tfoot><tbody><tr><td>李三</td><td>99</td><td>87</td><td>67</td></tr><tr><td>张三</td><td>98</td><td>89</td><td>67</td></tr><tr><td>王五</td><td>97</td><td>98</td><td>55</td></tr><tr><td>王麻子</td><td>96</td><td>97</td><td>77</td></tr></tbody><thead><tr><th>姓名</th><th>语文</th><th>英语</th><th>数学</th></tr></thead><table>表格直列化代码:<table border="1px"width="50%"bordercolor="blue"cellspacing="0px"align=" center"><colgroup bgcolor="red"span="2"></colgroup><caption align="left">成绩表<caption><tr align="center"><td>1.11</td><td>1.22</td><td>1.33</td></tr><tr align="center"><td>2.11</td><td>2.22</td><td>2.33</td></tr><tr align="center"><td>3.11</td><td>3.22</td><td>3.33</td></tr> <table>要实现第三列为红色:<table border="1px"width="50%"bordercolor="blue"cellspacing="0px"align="cent er"><colgroup span="2"></colgroup><colgroup bgcolor="red"span="1"></colgroup><caption align="left">成绩表<caption><tr align="center"><td>1.11</td><td>1.22</td><td>1.33</td><td>1.44</td>< /tr><tr align="center"><td>2.11</td><td>2.22</td><td>2.33</td><td>1.44</td>< /tr><tr align="center"><td>3.11</td><td>3.22</td><td>3.33</td><td>1.44</td>< /tr><table>超级链接<a herf=”#” title=”” target=”_blank”></a>锚点链接-就是可以跳转到某个页面的某个位置<a name=”锚点名称”>显示内容</a><a href=”#锚点名称”>显示内容</a>锚点在其它页面:<a href=”网页名称#锚点名称”>显示内容</a>空链接:<a href=”#”>显示的内容</a>例如:设为首页和添加收藏设为首页:<a href=”#”onClick=”this.style.behavior=’url(#default#homepage)’;this.sethomepag e(‘’)”>设为首页</a>添加收藏:<a href=”#”onClick=”javascript:window.external.addfavorite(‘’,’搜狐’)”>添加收藏</a>脚本连接:是一种特殊的链接,当点击设置脚本连接的文本和图像时,可以运行相应的javascript语句,常用的脚本链接有:<a href=”javascript:window.open(‘’)”>网易</a>打开窗口:输入:javascript:window.open(‘文件名’)关闭窗口:输入;javascript:window.close()表单标记●Form 标记用于创建一个表单,定义表单的开始与结束,它是一个容器,用于包含其它表单元素,例如文本框,单选框。

相关文档
最新文档