html知识点

《html知识点》由会员分享，可在线阅读，更多相关《html知识点（8页珍藏版）》请在金锄头文库上搜索。

1、我是一个小菜鸟，从来没有接触 IT 这个行业。在以前听到 IT 俩字觉得这个行业离我好远。IT 工作者是个很神圣的群体，就像美国大片中的那些黑客似的。万万没想到现在我也开始了学习 IT 之旅。它一定是条很漫长的，充满“险阻”之路，在这场旅途中我会用我的努力一一跨过坎坷。而笔记的记录和积累是我在此迈出的第一步，也是之后走好每一步的有力支撑。起飞中的小菜鸟HTML1.1HTML 概念HTML 是 Hyper Text Markup Language 的第一个大写字母的组合，中文意思为超文本标记语言。(HTML)它是一个包含有 html 标记的文本文件，而 html 标记是用来告诉Web 浏览器如何

2、显示网页的（俗称 标示） 。一个 HTML 文件必须是一个 htm(超文本标记)或 htm 扩展名的文件。 （这里在保存的时候一定要看好是否保存的格式）1.1.1HTML 文件基本结构无论你打开任何一个 html 网页，查看源代码都会得到这四个关键字，（html ，head，title，body ）组合结构1.1.2HTML 元素元素是什么呢？元素是 HTML 语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记(如 )，也有一个结束的标记( 如)。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML 元素格式是： 元素内容 其中又称 HTML 标

3、记。HTML 标记又有很多，有文档标记，排版标记，字体标记，列表标记，表格标记，表单标记，框架标记等。由于标记数量繁多，这里我们把常用基本的标记简单的分为两类：1.格式控制类： ( 粗体标记，产生字体加粗的效果)； (斜体标记 字体出现斜体效果 )； (加上底线)； (字形标记、设定字形、大小、颜色)；(换行标记，令字、画、表格等显示于下一行)2.容器控制类： . (一到六级标题标记 变粗变大加宽) ； (段落标记，为字、画、表格等之间留一空白行)； (区隔标记，设定字、画、表格等的摆放位置； 功能与之相同)； (无序清单，清单项目将以远点排列，其中都含有 )；(顺序清单，清单项目将以数字、字

4、母顺序排列，其中都含有 )； (清单项目，每一标记标示一项清单项目)；1.1.3Head 元素元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是期间的元素有特殊重要的意义。介绍下元素中的元素。元素：定义 HTML 文档的标题， 与之间的内容将显示在浏览器窗口的标题栏。代码要放在与之间。例如： 标题内容1.1.4Body 元素元素表明是 HTML 文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML 文档的主体部分。元素中有下列元素属性：1.bgcolor（背景色）Bgcolor 属性标志 HTML 文档的背景颜色。如：bgcolor= “#cc

5、cccc”。例如： 标题内容改变 HTML 文件的背景颜色1.1.4.1HTML 对颜色的控制有三种方式：(1)使用 16 进制的 RGB 颜色值对颜色进行控制。16 进制的数码有：0，1，2，3，4，5，6，7，8，9，a，b，c ，d，e，f 。 （如：）(2)使用英文单词进行控制。 （如：）缺点是范围比较局限。(3)使用 RGB（红，绿，蓝）进行控制。 （如：）2.background（背景图片）注：这个属性不常用，简单了解。3.text（正文文字颜色）Text 属性标志 HTML 文档的正文文字颜色。如：text=“#336699” 。Text 元素定义的颜色将应用于整篇文档。例如：

6、标题内容改变 HTML 文件的文字颜色显示效果，黑色字体变成蓝色。4.leftmargin， rightmargin 和 topmargin，bottommargin设置网页主体内容距离网页左端，右端和上端，下端的距离。一般在网页制作中通常默认为“0” （如：leftmargin=“0” ）5.align（水平对齐）和 valign（竖直对齐）5.1 align（水平对齐）中含有 3 个值，既左（left）中（center）右（right） 。5.2 valign（竖直对齐）中也还有 3 个值，既上（top）中（middle）下（bottom） 。1.1.5HTML 超链接1.1.5.1 超级

7、链接是用锚元素定义的。在元素下，有元素属性“href”， “href”的属性值为一个 URL 地址。例如：去搜狐做完效果点击“去搜狐”后，就会到达 http：/ 。我们可以通过“锚”控制链接窗体，在新的窗体打开链接内容，使用到关键词“target” （目标）例如：超链接-新打开一个窗体做完点击后，在原创体的基础上出现新的窗体。从例子中我们可以发现基本结构没有变化，只是在开始标记里加上target=“_blank”，那么 target=“”就是打开目标窗体的基本结构，_blank就是打开新窗体的值。Target 还有“_self”和“_top ”这两个值。当页面过长到底部时，我们可以用锚点来实现

8、“返回页首” ，一点到了文章的开头。例如：在文章标题 后插入代码（）在文章结尾 插入代码（返回页首 ）1.1.5.2 图像标记的基本语法1.基本格式，img 是单词 imag 的简写（image 中文为图片）2.我们可以用 wdith 来设定图片的宽度，用 height 来设定图片的高度。他们的属性值一般使用像素（px） ，也可以是（%） 。3.alt 属性Alt（替换） 。如果图片打不开的时候，可以用文字 方式显示图片所要表达的内容。基本格式：4.我们可以用来为图片添加链接。例如：标题内容做完效果：点击图片就好链接到搜狐网站1.1.6HTML 表格Html 表格是由 table 元素（ 开始

9、标记，结束标记） ，行tr（）和列（）组成。基本格式：标题内容表格中的内容1.1.6.1 table 属性Table 基本属性有：width、border、cellspacing、cellpadding、align、bgcolor1.width：表格（table）的宽度。一般值为像素（ px） ，百分比（%） 。在表格中（table）中不需要设置 height（高）的值。因为表格（table）中会有很多单元格，单元格高度相加就会得到表格（table）的高。2.Border：表格（table）线的粗细。一般 border 的值设为 “0”。Border 小技巧：如何将（ table）中 bord

10、er 设置单线？解：(1)先将的 bgcolor（背景颜色）设为深颜色。(2)将行和列d 的 bgcolor（背景颜色）设为浅颜色。(3)最后将中的 cellspacing（间距）数值设为“1” 。3. Cellspacing（间距）和 cellpadding（边距）：用来可以设置单元格 border 与表格 border 直接的距离。一般情况 cellpadding 和cellspacing 值都设为 “0”4. Align（水平对齐）：该属性可以控制表格在页面的水平对齐方式。5. Bgcolor（背景颜色）：控制表格的背景颜色。颜色的选择方式与的 bgcolor 选择方式一样（ 3 种方式

11、）1.1.6.2 tr（行）属性1.bgcolor（背景颜色）是行（tr ）常用属性。也是三种颜色选择方式。2.Height（高）行中只需要设定 height 的值，width（宽）总是与table（表格）的 width 永远保持一致。3.Align（水平对齐）值有 left（左） 、center （中） 、right（右）4.Valign（竖直对齐）值有 top（顶） 、middle（中） 、bottom （底）1.1.6.3 td（列）属性1.bgcolor（背景颜色）也是三种颜色选择方式。2.Width（宽）和 height（高）在列（td）中都可以赋值。百分比（ %）和像素（px）3.

12、Align（水平对齐）值有 left（左） 、center （中） 、right（右）4.Valign（竖直对齐）值有 top（顶） 、middle（中） 、bottom （底）5.Colspan（合并列）例如： 合并列第 1 列第 2 列第 3 列做完效果：6.Rowspan（合并行）例如： 合并行第 1 行第 2 列第 3 列做完效果：1.1.7 表单（Form）表单（form ）也是一对 元素定义的。开始标记，结束标记组成。语法为： 元素常用的属性包括：（1）id：（id 的命名是不可以重复）（2）name（3）action：（action 是提交动作。来定义表单处理程序的位置）（4）m

13、ethod：（method 是提交方式。method 中含有两个值method=“get/post” get：保密性比较弱，传输文件大小也有限制；post：保密性强，而且传输文件大小没限制。通常我们都会用“post” ）在表单中又分为三类：（1）输入文本框类（2）按钮类（3）选择文本框类输入文本框包括三类：（1）要放在 之间，是单个出现。（2）文本域（textarea）要放在之间，要成对出现。rows 表示初始有几行，cols 表示字符宽度。（3）隐藏文本域(hidden)隐藏文本域 hidden 主要应用在参数的传递，不会在页面上显示。语法为：按钮类包括四类：（1）提交（submit）语法为

14、：“value 的值是可以根据自己需要而改变”（2）重置（reset）语法为：“value 的值是可以根据自己需求而改变”（3）按钮（button）可以制作出一个按钮的图形，要想实现功能还需要添加其他属性。语法为：（4）图片按钮（image）可以将按钮做的更漂亮。语法为：选择类包括四种：（1）复选框（checkbox ）例如网页中常出现的兴趣爱好的调查就是用复选框（checkbox）做的。语法为：音乐美术体育注意：这里 name 的值一定要不相同！（2）单选框（radiobox）例如网页中常出现的只能选择一个答案的问卷就是用单选框（radiobox）做的。语法为：音乐美术体育注意：这里 nam

15、e 的值一定要相同！（3）下拉列表（select）下拉列表是又一对元素 和多个子元素组成的。语法为：xxxxxx /selected（默认选择）xxx注意：当 select 属性 “size”值 等于一时，做出来的是下拉列表框；当”size”值大于一时，做出来的则是列表框。再 select 中加入 ”multiple”属性时，可以实现多选的效果。（4）文件上传（file） “简单了解 ”语法为：1.1.8HTML 框架框架由一对定义，必须在范围中。注：定义了 就不用定义。中有两个属性：rows 和 colsrows 定义上下分割的框架的大小cols 定义左右分割的框架的大小rows 和 cols 值可以用像素（px）和百分比框架的基本语法： Frame 的属性为：Src=” ”表示在本框架里显示网页的地址（url）Name：定义该框架的名字。Target：三个值 “_blank”(新打开一个页面)；”_self”(自身上开个一个页面)；”_top”（全部打开）Scrolling（滚动条的设置）：三个值” yes”(动作条永远存在)；” no”（动作条永远不存在） ；” auto”(自动)与一样的还有。注： 必须放在 中的。小菜鸟，加油！