第1章_HTML基础

第1章HTML基础第1章HTML基础1HTML文档结构2HTML基本标记的使用3超链接标记4HTML表格5HTML表单1HTML文档结构在互联网中传送的文档，绝大部分使用超文本标记语言编写，这些文档称为HTML文档。在基本HTML文档中，只允许两种元素存在：一种是HTML标记，另一种则是普通文本。1HTML文档结构HTML文档的组成结构如下：1HTML文档结构一个完整的HTML文档通常由以下三部分组成：1．HTML标记格式：html…/html2．头部信息格式：head…/head3．文本主体格式：body…/body1HTML文档结构1．HTML标记html…/html这是定义HTML文档开始与结束的标记，也是HTML文档中最先出现的标识，表明这个文件的内容是用HTML语言来实现的。它必须成对出现，分别表示HTML文件的起始和结束。在html容器标记中又包括以下head和body两个部分。1HTML文档结构2．头部信息head…/head这一部分用来说明文档标题以及该页面的其他信息，它构成HTML文档的开头部分，在此标记对之间可以使用meta、title等标记，这些标记都是描述HTML文档相关信息的标志，标志对之间的内容是不会在浏览器的框内显示出来的，但是其内容应该尽量简短。1HTML文档结构3．文本主体body…/body这部分说明HTML文件的主体内容，在浏览器的客户区中显示，这是页面开发者的编写HTML文档的主要部分。1HTML文档结构对于HTML标记的约定：超文本标记是用一对尖括号“”括起来的文本串，例如第一行的html。超文本标记一般成对出现，用带“/”的标记结束，如/html。成对出现的超文本标记也称容器元素。有些标记只有起始标记而没有结束标记称空元素，如br/。超文本标记可以忽略字母的大小写。构成容器元素的一对标记可以写在不同行，标记属性的相对位置不受限制，但属性必须出现在起始标记里。标记名属性1=“值1”属性2=“值2”…属性n=“值n”……/标记名编写HTML文档的方法:HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存。例：新建一个html文件2HTML基本标记的使用2.1head容器的标记2.2body容器的标记2.1head容器的标记head标记主要用来提供网页文件的整体信息。包括标题栏名称、文件的网址、所采用的文档编码等。head标记用来告知浏览器这是文件标题的开头，最后使用/head标记告知浏览器这是文件标题的结束点。2.1head容器的标记HTML文档的head是一个容器元素，在head容器元素中允许出现以下元素：1．title元素2．link元素3．meta元素4．base元素5．script元素2.1head容器的标记1.title元素格式：title标题文字/titletitle元素包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（title）和结束标志(/title)间，可以放入简述文档内容的标题。如果没有title元素，浏览器的标题栏将显示网页的文件名。2.1head容器的标记2．link元素格式：linkhref=URLrel=texttype=MIME_type“/link元素在当前文档和另一文档之间建立链接关系。href属性指向相关的文档;rel属性描述了当前文档与被连接文档的关系;type属性描述被连接文档的类型。表示链接一个外部CSS文件default.css如下:linkhref=default.cssrel=stylesheettype=text/css“/2.1head容器的标记3．meta元素格式：metaname=texthttp-equiv=textcontent=text“/meta元素用来描述当前网页的元信息。通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面的自动刷新时间间隔（秒）等。一些有关metal元素的例子1.设置搜索引擎关键字metaname=“keywords”content=“关键词”/2.设置网页编码metahttp-equiv=“content-type”content=“text/html;charset=GB2312”/3.刷新页面metahttp-equiv=“refresh”content=“second;URL=targetURL”/2.1head容器的标记4．base元素格式：basehref=URLtarget=text/base元素指定一个显式URL用于解析对于外部源的链接和引用，如图像和样式表。当用户使用相对URL请求文档时，超链接也会正确地执行。Target指定文档中所有链接的默认窗口，该属性主要用在使用框架结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页，同时在若干不同的框架窗口中显示。2.1head容器的标记5．script元素格式：scripttype=“text/javascript”脚本语言代码段/scriptscript元素在文档中放置一个脚本。这个元素可以在HTML文档的head或body中出现。脚本可以在script元素中或外部文件中被定义。2.2body容器的标记body标记是HTML文件最重要的部分，它是一个容器元素，包含在其中的内容将显示在浏览器的主窗口中。body容器元素中可以包含下表中的常用元素:hntext/hn定义标题,其中:n=1,…,6。h1定义了最大字号的标题,h6定义了最小字号的标题ptext/p段落标记，文档主体中两个段落之间插入换行imgsrc=“URL”/把图像插入到文档中，其中src属性给出图像地址ahref=URLtext/a定义超文本链接属性，并将结果返回给用户浏览器hr/放置一个横穿浏览器窗口的水平线br/在文本中强制换行!--text--!--注释开始,--注释结束。注释中不能包含注释div…div区块容器元素，可容纳段落、标题、表格、图片等各种HTML元素2.2body容器的标记在HTML中，需要使用body元素的属性对页面进行一个整体的规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。例如在百度搜索引擎的主页中，其body元素的定义如下：bodytext=“#000000”vLink=“#0000cc”aLink=“#ff6600”link=“#0000cc”bgColor=“#ffffff”body元素本身的属性可以分为3类，如下表所示:背景属性bgColor背景色background背景图案文字属性text正文文字颜色link链接文字颜色alink活动链接文字颜色vlink已访问链接文字颜色边距属性leftmargin页面左侧的左边距topmargin页面顶部的上边距html!--程序2-2.html，我的第一个html程序--headtitle2-2.html/title/headbodydivalign=centerwidth=250height=50这是我的第一个html程序，我很高兴哦。hrsize=2color=bluewidth=250//divdiv这个程序简单了点．学习嘛，要一步一步地来，不着急。/div/body/html3超链接标记HTML用a来表示超链接，英文叫anchor，一个链接的基本格式如下：ahref=URL链接文字/aa表示一个链接的开始;/a表示链接的结束；a可指向任何一个文件源：网页、图片、影视文件等;href属性则表示这个链接文件的路径；链接分为本地链接、URL链接和目录链接。3超链接标记超链接标记的几个常用属性：1．target属性：ahref=“”target=“_blank”网易首页/a2．title属性：ahref=“”title=“网易中文网”网易首页/a3．name属性：aname=“c1”第一章/aaname=“c2”第二章/a4．链接到email地址：ahref=“mailto:[e-mail]”联系网易/a3.1本地链接对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。（1）以绝对路径表示：ahref=/c:\study\HTML教程\link01.htm文件的链接/a（2）以相对路径表示：ahref=link01.htm文件的链接/a（3）链接上一目录中的文件：ahref=../../Internet/IP地址IP地址/a3.2URL链接URL是英文UniformResourceLocators（统一资源定位器）的缩写，是专为标识Internet网上资源位置而设的一种编址方式，通过它可以以多种通讯协议与外界沟通来存取信息。URL地址一般由三部分组成，例如：协议名主机名路径及文件名Internet上的通讯协议通常包括以下几种：协议名功能说明file本地系统文件http目录链接目录链接可以直接指到某一个文件的上部、下部或中央部分。其制作方法是：在各种链接的各个要素中，首先把某段落设置为链接位置，使用name属性，它可以跳转到一个文件的指定位置。格式1：aname=链接位置名称/a然后，设定一个href指向此链接部分的文件；格式2：ahref=文件名＃链接位置名称链接文字/aHTMLHEADTITLE使用本地链接/TITLE/HEADBODYAHREF=“#Internet”互联网/ABR/BR/AHREF=“#HTML”HTML简介/ABR/BR/AHREF=“#Consistency”多样化和统一性/ABR/BR/Aname=“Internet”互联网/ABR/P互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。/PAname=“HTML”HTML简介/ABR/P超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。/PAname=“Consistency”多样性和统一性/ABR/P万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。/PAHREF=关于我们/AAhref=mailto:[e-mail]联系我们/ABR//BODY/HTML4HTML表格表格中所有行和列及单元格中的内容必须被包含在一对table和/table标记中，其基本结构如下：table