知通团队html

1、HTML基础学习 知通团队知通团队20162016下半下半学期招新学期招新 3 3月月2626日日HTML概念HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作简单标记语言。HTML 文件是包含一些超文本文档的标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建，使用可视化编辑工具 如Dreamweaver 、 Frontpage 等。 想不想尝试一下？打开记事本，在其中输入以下文本： 知通团队 这是第一个html页面 文件扩展名W

2、in7 系统 我的电脑 -工具-文件夹及系统选项-查看-点掉隐藏文件扩展名Html标签HTML标签用来组成HTML元素。HTML标签两端有两个包括字符：“”,这两个包括字符被称为角括号。HTML标签通常成对出现，比如和。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，跟表示的意思是一样的。例子解释HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在和标签之间的文本是文档标题

3、，它被显示在浏览器窗口的标题栏。在和标签之间的文本是正文，会被显示在浏览器中。从头head分析1.用来标记文档的作者给开发者看（浏览器中不做任何显示） 2.用来标记页面的解码方式（告诉浏览器解码方式，以防出现乱码问题，浏览器中不做任何显示）Body中的基本标签（掌握显示效果）标题格式化段落预先格式化的文本引用的文本, 有序列表，定义列表，无编号列表 文本居中 水平横线标题元素由标签到定义。定义了最大的标题元素，定义了最小的这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题段落这是一个段落这是一个段落这是一个段落HTML自动在一个段落前后各添加一个空行块引用这部分内容是bl

4、ockquote标签解析出的文本这部分内容是blockquote标签解析出的文本这部分内容是blockquote标签解析出的文本这部分内容是blockquote标签解析出的文本这部分内容是blockquote标签解析出的文本这部分是q标签所解析出的文本标签界定引用的文本块，将段落缩进。blockquote标签界定引用的文本块，将段落缩进，q标签多了双引号。换行，线条标签（换行）标签（绘制水平线）当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。标签是一个空标签，它没有结束标记。居中居中效果用align属性，align并不是一个标签，它是标签的一个属性，放在头

5、标签里，格式如下例子。align的属性值有left center right，分别能使标签所解析的文本靠左，居中靠右显示。（支持align属性的标签很多，以下就写其中两种标签）balababala balababala字符标记粗体斜体大号字体小号字体强调字体加粗文本大小，颜色HTML列表有序列表(数字编号)： 无序列表(圆点编号)： 定义列表(列表项目)： 列表项 项目定义有序列表：第一个选项第二个选项第三个选项有序列表有序列表：有序的列表:CoffeeTeaMilk无序列表示例一个无序列表：一个无序的列表:CoffeeTeaMilk自定义列表自定义列表自定义列表不是一个项目的序列，它是一系列

6、条目和它们的解释。 计算机 用来计算的仪器 . . 显示器 以视觉方式显示信息的装置 . .注释标签标签（这个标签是给代码阅读者用的，例如有人看你的代码看不懂某段代码什么意思，你可以在代码后面写上一个注释标签，在注释标签里写上一些解释，是代码阅读者更加容易理解代码，类似于给句子写批注，注释标签里的内容不会被解析显示给用户）背景颜色标签里面有个属性叫bgcolor，用来显示网页的背景颜色。例如下面例子：Look: 背景是黄的 Background!基本注意点有用的技巧HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理

7、。你也许注意到了段落可以不写结束标记。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签，务必规范。HTML格式文字从右向左显示文字从左向右显示 删除文字文字加下划线（插入文字）标签This is preformatted text.It preserves both spaces and line breaks.This is preformatted text.It preserves both spaces and line breaks.标签所解释的文本，在代码编辑器中怎么显示，在浏览器中就这么显示给用户，这是个好东西！滚动文字啦啦啦，我会移动耶！ 我从左向右移我来回反弹移动方

8、向 #=left, right,up,down方式 #=scroll(一圈一圈的走), slide(只走一次), alternate(来回走)只走 3 趟哟！我走好快我走一步，停一停！ 循环 #=次数，若未指定则循环不止(infinite)速度 延时 面积 我会移动耶！Height width的值单位是像素，或者是直接写想要占用水平或竖直宽度的百分比Html实体有些字符，比如说“”字符，在HTML中有特殊的含义，因此不能在文本中使用。想要在HTML中显示一个小于号“”，需要用到字符实体。（规范要求）想要在HTML文档中显示一个小于号，我们必须这样写：<或者<注意：

9、实体名是大小写敏感的。最常用的字符实体显示结果显示结果描述描述实体名实体名实体号实体号不可拆分的空格  大于&gt>&and符号&&引号""单引号'其他字符实体显示结果 描述 实体名 实体号 分¢¢英镑££人民币元¥¥章节§§版权©©注册®&#1

10、74;乘号××除号÷÷HTML表格 表格是用标签定义的。表格被划分为行（使用标签），每行又被划分为数据单元格（使用标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等cellspacing=0表格例子课程表上午下午星期一语文数学英语物理化学生物自习星期二语文数学英语物理化学生物星期三语文数学英语物理化学生物行列演示每一个表格从&lttable&gt标签开始每一行从&lttr&gt标签开始每一列从&am

11、p;lttd&gt标签开始One column 一行一列:100One row and three columns 一行三列:100200300Two rows and three columns两行三列:100200300400500600边框演示一个普通的边框 border:FirstRow 一个稍微大的边框:FirstRowborder属性表格和border属性如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。想要显示一个有边框的表格，需要使用border属性。Row 1, cell 1Row 1, cell 2 跨行显示跨两列:Name

12、TelephoneBill Gates555 77 854555 77 855跨两行:First Name:Bill GatesTelephone:555 77 854555 77 855给单元格内容设置对齐方式给单元格内容设置对齐方式：Money spent on.JanuaryFebruaryClothes$241.10$50.20Make-Up$30.00$44.45Food$730.40$650.00Sum$1001.50$744.65表单HTML表单中在用户代理屏幕上面放置一些用户输入数据的GUI控件简单标签：文本输入框用来输入小段文本名称、地址、搜索关键字Size指的是文本框的长度

13、Maxlength表示输入最多文字的个数单选按钮一组小的圆形按钮，只能选择一个单选题A单选题B复选按钮小的方框，彼此之间互不排斥的选项多选题A多选题B多选题C多选题D列表框从列表中选择一个或多个文本项目123456789密码输入框与文本框相似，只是输入时，显示“*”按钮提交按钮：重置按钮：HTML图像示例插入图像：Img标签和src属性在HTML里面，图像是由标签定义的。是空标签，意思是说，它只拥有属性，而没有结束标签。想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。插入图像的语法： URL指的图像存储的地址。用”子目录“im

14、ages”中的图像“boat.gif”的URL如下： “http:/ “alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。插入声音 添加背景音乐解释：width=100 height=40 分别表示播放器的宽度和高度，都选择0将隐藏播放器（隐藏时一定要选择自动播放）autostart=true中true或1表示自动播放，false或0表示手动播放loop=true 中的true或1表示重复播放，false或0表示只播放一次volume设置音量的大

15、小(0100)Html链接HTML使用超级链接来连接到网络上的其他页面。示例：连接到本地的页面 链接到百度图片作为链接你可以用图片作为一个链接: 这个例子说明了在html中如何用图片作为连接Html框架（难点）垂直分栏水平分栏标签frameset标签 frame标签混合框架导航框架使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。 看示例使用框架的不利因素有：网站开发者需要关心更多HTML文档的情况。 打印整个页面变得困难垂直分栏使用框架可以在一个浏览器中显示不止一个页面示例 ：垂直分栏这个例子说明了如何创建一个有三个页面的垂直分栏。

16、水平分栏这个例子说明了如何创建一个有三个页面的水平分栏。frameset标签 frame标签frameset标签标签定义了如何将窗口拆分成框架。 每个frameset标签定义了一组行/列。 行/列的值指明了每个行/列在屏幕上所占的大小。 frame标签标签定义了每个框架中放入什么文件。 下面这个例子中，有一个两列的分栏。第一个被设置成窗口宽度的25，第二个被设置成窗口宽度的75。页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。 基本注意点有用的技巧假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在标签中加入：n

17、oresize=“noresize”。frameborder：指明框架是否有边框（0没有，1有）scrolling：控制框是否显示滚动条，以滚动显示框架内的内容noresize:在frame上面设置后不允许用户修改框架的大小混合框架导航框架这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接，它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接，链接的代码如下：Frame aFrame bFrame c 第二个框架将显示链接到的页面。target属性name属性（难点）使用target属性，你可以定义从什么地方打开链接地址。下面这段代码打开一个新的浏览器窗口来打开链接：Visit W3Schools!target的值：_blank:在新窗口打开_self:在同一个框架中打开_parent:在父框架打开_top:在主窗口打开锚标签(难点)name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。下面是命名锚的语法：Text to be displayed你可以为锚随意指定名字，只要你愿意。下面这行代码定义了一个命名锚：Useful Tips Section你应该注意到了：命名锚的显示方式并没有什么与众不同的。