搜索
技术部新人培训HTML培训教程基础篇一、HTML培训教程基础篇HTML简介文件结构的格式标记文字格式与页面超链接、列表和表格4123外媒体5表单和框架61.1HTML是什么HTML(HyperTextMarkupLanguage，超文本标记语言)是用来描述网页的一种语言。是Web最基本的构成元素。用HTML的语法规则建立的文档可以在不同操作系统的平台上运行。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页1.HTML简介1.2HTML标签HTML文档和HTML元素是通过HTML标签进行标记的HTML标签由开始标签和结束标签组成开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名某些HTML元素没有结束标签，比如br/注释：开始标签的英文翻译是starttag或openingtag，结束标签的英文翻译是endtag或closingtag。1.HTML简介1.3HTML能做什么格式化文本：如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。建立超链接。只需用鼠标单击，就可达任何一处。创建列表。把信息用一种易读的方式表现出来。插入图像。使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。建立表格。表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。加入多媒体。可在网页中加入音频、视频、动画，还能设定播放的时间和次数。交互式表单、计数器等。1.HTML简介1.HTML简介1.4HTML编辑环境任何文本编辑器都可用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。专业设计人员会有专业的网页编辑器，如：dreamweaver、frontpage等。完成以后用.htm或.html为文件扩展名保存。若要看到用户自己设计的网页效果，就需要安装一个浏览器，如InternetExplorer，NetscapeNavigator等2.HTML基本结构•一个HTML文件应具有下面的结构–HTML文件以html开头，以/html结尾。–HTML文件包括头部head和主体body，用来说明文件命名和与文件本身的相关信息，主体定义浏览器中显示的网页内容。htmlheadtitle网页标题/title/headbody网页内容/body/html2.HTML基本结构–HTML文件是由标记和文本组成。•标记（Tag）能够产生所需的各种效果。就像一个排版程序，可将网页排成理想的效果。•格式：标记收标记影响的文本/标记•单一标记：只要一个标记就能完成所要表示的功能，如hr可以显示一条水平的分隔线。•成对标记：需要两个标记组合才能完成所需功能，如title及/title、html及/html。–HTML的元素有以下三种表达方式•标记对象/标记•标记属性1=参数1属性2=参数2……对象/标记标记需要通过属性制作各种效果。•标记2.HTML基本结构•注意：–使用时属性之间没有顺序。对同一段文本，可以用多个标记来共同作用，产生一定的效果。–HTML也有注释标记。“!--”和“--”之间的部分为注释内容,可以插入文本的任何地方。–标记和属性不区分大小写。2.HTML基本结构•【例2-1】简单的HTML文件htmlheadtitle网页设计/title/headbody我的第一个网页！/body/html2.2.1文件结构的格式标记1、HTML文档标记HTML文档标记的格式为:htmlHTML文档内容/html–html处于文档的最前面，表示HTML文档的开始，即浏览器从html开始解释，直到遇到/html为止。每个HTML文件均以html开始，以/html结束。2.2.1文件结构的格式标记2、HTML文件头标记head…/headHTML文件头标记的格式为：head头部内容/head–文件头部在文件标记html之后，其内容可以是标题名，文本文件地址、创作信息等网页信息说明，对应于相应的标记。如标题标记title…/title。–本标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。2.2.1文件结构的格式标记3、HTML文件标题标记title…/titleHTML文件标题标记的格式为：title标题名/title–标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。–为什么要给网页加上标题呢？•标题概括了网页的内容，能够迅速了解网页的大意；•如果浏览者喜欢该网页，将它加入书签或保存到磁盘上，标题就作为改页面的标志和文件名；•使用搜索引擎时显示的结果也是页面的标题。2.2.1文件结构的格式标记【例2-2】如果没有使用head标记，而单独使用title，/title标记仍可设定标题。htmltitle网页设计/titlebody无<head>时，<title>标记仍起作用/body/html显示效果2.2.1文件结构的格式标记4、HTML文件主体标记格式为：bodybackground=“文件名”bgcolor=“颜色”text=“颜色”link=“颜色值”vlink=“颜色值”alink=“颜色值”/body–background设置网页的背景图像：–bgcolor设置网页的背景色；–text设置文本的颜色：–link设置未被访问过的超文本链接的颜色，默认为蓝色；–vlink设置已被访问过的超文本链接的颜色，默认为红色或紫色–alink设置超文本链接在被访问瞬间的颜色，默认为蓝色2.3HTML文字格式与页面2.3.1设置标题格式设置标题格式的格式为：hnalign=对齐方式标题/hn–属性align用来设置标题在页面中的对齐方式：left(左对齐)、center(居中)或right(右对齐)。–属性n用来指定标题文字的大小。n可以取1—6的整数值，取1时文字最大，6时文字最小，默认时为h1。–hn…/hn这些标记显示宋体字。hn…/hn标记会自动插入一个空行，不必用p标记再加空行。在一个标题行中无法使用不同大小的字体。2.3HTML文字格式与页面【例2-3】用hn设置标题的大小。htmlheadtitle使用标题/title/headbodyh1一级标题/hlh2二级标题/h2h3三级标题/h3h4align=left四级标题/h4h5align=center五级标题/h5h6align=right六级标题/h6h默认标题h/body/html显示效果2.3HTML文字格式与页面2.3.2设置强制换行标记–浏览器忽视超文本文件中的回车符（除非用户指定用pre标记元素限制按源文件文本格式展示文本内容），而是用专门的标记符号br表示回车。–br放在一行的末尾，可使后面的文字换到下一行，而又不会在行与行之间留下空行。–强制换行标记的格式为：文字br换行标记单独使用，可使页面清晰、整齐。2.3HTML文字格式与页面【例2-4】强制换行标记的使用，htmlheadtitle强制换行标记的使用/title/headbody欢迎进入牡丹园!brbr新闻br 影视p聊天室br/body/html显示效果2.3HTML文字格式与页面•小技巧：在中文的段落中，往往在段首空两个的空格符号，可是HTML语言忽略多余的空格，最多只能空一个空格.可用4个连续的“ ；”或者输入两个全角中文空格。“ ；”为非换行的空格符号，用它可以在文本中加入任意多个空格。2.3HTML文字格式与页面2.3.3设置文字格式格式为：fontsize=数字face=字体名color=颜色被设置的文字/font–font标记可设定文字的字体、字号和颜色。–size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。–face用来设置字体。如黑体、宋体、楷体—GB2312、仿宋—GB2312、隶书、TimesNewRoman等。–color用来设置文字颜色。2.3HTML文字格式与页面1、设置文字的字号font与hn的区别注：font和hn标记都可以设置文字的大小，当font中的size取7时的文字比h1要大。标记对象用法文字大小n的取值font一段文字、语言、短语等fontsize=n文字/fontn=1~7,取1时最小，7时最大hn标题hn文字/hnn=1~6,取6时最小,取1时最大2.3HTML文字格式与页面【例2-5】用font设置文字的大小。htmlheadtitle用font设置文字的大小/title/headbodyh1文字的大小!/h1fontsize=1文字的大小size=1/fontbrfontsize=2文字的大小size=2/fontbrfontsize=3文字的大小size=3/fontbrfontsize=4文字的大小size=4/fontbrfontsize=5文字的大小size=5/fontbrfontsize=6文字的大小size=6/fontbrfontsize=7文字的大小size=7/fontbr/body/html2.3HTML文字格式与页面2、设置字体当文字是汉字时，格式中的“字体名”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。2.3HTML文字格式与页面【例2-6】设置字体htmlheadtitle设置字体/title/headbodyfontsize=4fontface=幼圆幼圆/fontbrfontface=隶书隶书/fontbrfontface=黑体黑体/fontbrfontface=楷体_GB2312楷体_GB2312/fontbrfontface=仿宋_GB2312仿宋_GB2312/fontbrfont/body/html显示效果2.3HTML文字格式与页面3、设置字型字形就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表标记格式字体结果b…/b黑体i…/i斜体u…/u带下划线strike…/strike带删除线sub…/sub下标sup…/sup上标big…/big大字体small…/small小字体cite…/cite或em…/em字体倾斜code…/code缩小字体（适用于程序代码和指令）address…/address缩小字体+斜体（适用于电子邮件和网址）strong/strong粗体tt…/tt标准打印机字体2.3HTML文字格式与页面【例2-7】设置字型htmlheadtitle设置字型/title/headbody设置字体b黑体/bbr设置字体i斜体/ibr设置字体u带下划线/ubr设置字体strike带删除线/strikebr设置字体sup上