HTML基础教程分析

第2章HTML基础本课教学内容静态网页制作HTML的常见标签（文字布局、文字设计标签）表格标签链接和图片标签表单标签（文本框、密码框、下拉列表）框架网页实景图2.1静态网页制作一个网站，由许许多多的网页组成，通过地址向服务器发出请求后，接收到可以被浏览器运行解释的文件，由浏览器显示出来。（思考题：请大家回忆第一节课当中讲的：从在浏览器地址栏输入URL到显示出网页界面，中间有哪些过程？）HTML（超文本标记语言），是构成网页文档的主要语言。一般情况下，网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是由HTML语言描述的。思考题参考答案1.客户端（比如：IE、FireFox、360）接受用户的输入，如用户名、密码、查询字符串等；2.通过域名服务器DNS获得域名指向的IP地址；3.浏览器得到域名指向的IP后，浏览器会把我们输入的域名转化为HTTP的服务请求，通过这种方式浏览器向服务器发出了请求，应用服务器接收到请求后，使用某种脚本语言访问数据库，查询数据，并获得查询结果；4.数据库向应用服务器中的程序返回结果；5.应用服务器向客户端发送响应信息，返回的一般是动态生成的HTML页面，包括文字信息，图片，flash等(每个文件都要有一个唯一的网址).6.由用户浏览器负责解析HTML代码，显现用户界面。给HTML语言打的广告一种进行网页设计的语言一种标签式的程序设计语言一种纯文本式的语言一种简单易学的语言一种可以使用文本编辑器进行编辑的语言编辑的文件名后缀是”.html”。2.1静态网页制作（续）HTML语言的基本组成部分是各种标签，一张生动的网页往往含有大量的标签。使用标签，实际上就是采用一系列指令符号来控制输出的效果，如：BR，是最常使用的控制格式的标签，它表示在网页上换行。2.1静态网页制作（续）HTML有两种类型的标签，一类是单标签，BR就是一种单标签，它只需要单独一组符号就可以表示完整的功能。另一种是双标签，形如B内容/B，表示将“内容”显示为粗体，这种标签所围绕的内容就是标签作用的作用域。2.1静态网页制作（续）HTML语言对于大小写不敏感，比如马上将要学习的表示HTML文档的标签：html/html，也可写做HTML/HTML，甚至可以写为HtmL/htMl，但是一般推荐，自始至终使用同一种书写方式。HTML文件基本结构htmlheadtitle标题/title（浏览器标题）/headbody内容主体（网页具体内容）/body/html（头部信息：用于设置网页相关属性，比如网页标题、缓存等，可以省略）HTML文件基本结构（续）2.2HTML中的常见标签：标题HTMLHEADTITLEHTML简介/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML一般形式为hn内容/hn，即H1到H6，H1为最大，H6为最小运行结果2.2HTML中的常见标签：换行标签HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYBGCOLOR=lavender这会是一种很有趣的BR体验BR另一个段落元素/BODY/HTML运行结果2.2HTML中的常见标签：段落标签HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的体验/PP另一个段落元素/P/BODY/HTML运行结果2.2HTML中的常见标签：段落标签p为段落标签，一个段落开始由p来标记，结束用/p表示。p有一个常用属性align，它用来指明内容显示时的对齐方式，较为常用的有left、center、right，分别表示左对齐、居中对齐和右对齐。2.2HTML中的常见标签：段落标签（续）HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderPalign=right这会是一种很有趣的体验/P/BODY/HTML运行结果右对齐Left：左对齐Center：居中Right：右对齐2.2HTML中的常见标签：水平线段标签HR水平标尺标签用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标签，没有结束标签，且不包含任何内容，size:水平线的宽度，单位为像素。width：水平线的长，如不设置则默认为页面长度，单位默认为像素，但也可以使用百分制，如width=50℅表示长度为页面长度的50℅.align:水平线的对齐方式，常用的有left、center、right.noshade:线段无阴影属性，无属性值，若设置，则线段为实心线段。color:线段内部的颜色。2.2HTML中的常见标签：水平线段标签(续）HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3HRnoshadesize=5align=centerwidth=50%HRsize=15align=leftwidth=80%HRP这将会是一种很有趣的体验/P/BODY/HTML2.2HTML中的常见标签:文字设计标签文字设计标签face：用来设置字体类型，默认为宋体。如fontface=“楷体_GB2312”，即设置该内容的输出的字体为楷体但是需要注意的是，只有电脑中安装的字体才可以在浏览器中出现相应风格，如果用户没有安装该字体，则会显示默认字体的风格。color：用于设置字体颜色2.2HTML中的常见标签:文字设计标签（续）文字设计标签常见的设置文字风格的标签有：b内容/b：将内容设置为粗体。u内容/u：将内容设置下划线。i内容/i：将内容设置为斜体。sup内容/sup：将内容设置为上标。sub内容/sub：将内容设置为下标字体颜色标签示例HTMLHEADTITLE字符级标签示例/TITLE/HEADBODYFONTCOLOR=BlackBlack/FONT，FONTCOLOR=OliveOlive/FONT，FONTCOLOR=TealTeal/FONT，FONTCOLOR=RedRed/FONT，FONTCOLOR=BlueBlue/FONT，FONTCOLOR=MaroonMaroon/FONT，FONTCOLOR=NavyNavy/FONT，FONTCOLOR=GrayGray/FONT，FONTCOLOR=LimeLime/FONT，FONTCOLOR=WhiteWhite/FONT，FONTCOLOR=GreenGreen/FONT，FONTCOLOR=PurplePurple/FONT，FONTCOLOR=SilverSilver/FONT，FONTCOLOR=YellowYellow/FONT，/BODY/HTML2.2.2列表标签列表标签分为两种，一种是有序的，一种是无序的。ul内容/ul，表示它所包围的内容是无序列表标签，即列表中每一项目前不会加上序号，而是会加上●、○、■等符号。ol内容/ol表示有序标签，意义与使用方法和无序列表标签大致相同，不同点为它会在每个列表项前加上数字其中列表的每一项用li列表项/li标示。无序列表HTMLHEADTITLE学习HTML/TITLE/HEADBODYULLI星期一LI星期二LI星期三LI星期四LI星期五/UL/BODY/HTML无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列表标签ul../ul内。列表中的每个项目都使用li列表项/li进行标签，关闭标签/li是可选的。列表的项目符号LITYPE=SQUARE方形项目符号LITYPE=DISC实心圆项目符号LITYPE=CIRCLE空心圆项目符号有序列表HTMLHEADTITLE学习HTML/TITLE/HEADBODYOLLI星期一LI星期二LI星期三LI星期四LI星期五/OL/BODY/HTML有序列表包含在OL../OL标签内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。无序和有序的嵌套大写罗马数字LITYPE=I小写罗马数字LITYPE=i大写字母LITYPE=A小写字母LITYPE=a从第n个值开始编号OLSTART=nHTMLHEADTITLE学习HTML/TITLE/HEADBODYULLI星期一OLLITYPE=i简介HTMLLITYPE=ii创建列表/OLLI星期二OLLITYPE=a创建表LITYPE=b插入图像/OLLI星期三LI星期四LI星期五/UL/BODY/HTML2.3表格标签编写表格所用到的标签如下：table/table：定义表格，表格的所有内容都写在这个标签之内caption/caption：定义标题，标题会自动出现在整张表格的上方tr/tr：定义表行th/th：定义表头，包含在tr/tr之间，表头中的文字会自动变成粗体td/td：定义表元(表格的具体数据)，包含在tr/tr之间表格标签以下为制作表格的标签中大多拥有的公共属性：align：水平布局方式，常用属性值有left，right，center，表示左对齐，右对齐和居中对齐，table的该属性表示表格在页面的布局方式，tr、td的该属性表示该行和该表元内的内容的布局方式。默认布局方式为左对齐bgcolor：设置背景颜色border：设置边框的宽度，属性值为整数，为0时表格没有边框，默认值为0width：宽度，默认单位为像素，也可以使用百分制单位height：高度，默认单位为像素；也可以使用百分制单位表格标签对于整张表格，table标签常用的属性有以下几个：bordercolor：表格边框的颜色，默认为黑色cellpadding：表元边框的宽度cellspacing：表元的边框与表格边框之间的宽度合并单元格合并单元格必须对td标签中的rowspan、colspan进行设置，属性值都为整数，默认为1，表示没有合并。这两个属性的意思分别为：从该表元起，该表元在行或者列上占有的单元格数，比如设置某个td标签rowspan=2，表示该表元及其下面的表元合并成一个表格标签2.4链接和图片标签链接标签可以使用户链接到另一个页面，它的写法是a内容/a，标签内的内容为链接所显示的内容，可以是文字、空格占位符、图片等，此标签的一个重要属性是：href，它的值表示链接所指向的资源地址。2.4链接和图片标签图片标签比较重要和常用的标签有以下几个：src：表示图片储存的位置width，height，border，align：作用与前文所提到属性相同alt：当图片未载入或者载入失败时提供的替代性的文字说明2.4链接和图片标签HTMLHEADTITLE使用链接/TITLE/HEAD