《HTML与CSS》PPT课件

1网络编程第2章HTML技术介绍第3章CSS技术基础2主题•章节内容•本章小结•课后习题3章节内容•2.0引言•2.1HTML网页文档结构•2.2常用HTML标签•2.3CSS（CascadingStyleSheet）42.0引言•HTML是制作网页的基础，在现实中的各种网页都是建立在HTML基础之上的。通过HTML，可以实现对页面元素的显示处理。本章简单介绍HTML网页文档的基本知识，整体结构，常用的HTML标签和超链接。•CSS技术是网页技术中的核心内容之一，通过CSS不但可以控制页面某个元素的显示样式，而且可以整体控制整个站点内某元素的样式。在本章将简要绍CSS技术的基本知识。•理解HTML、CSS基本原理，是开发静态Web页面的基础。5章节内容•2.0引言•2.1HTML网页文档结构•2.2常用HTML标签•2.3CSS（CascadingStyleSheet）2.1HTML网页文档结构一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素，HTML使用标记来分隔并描述这些元素。实际上整个HTML文件就是由元素与标记组成的。html文件开始标记head文件头开始的标记……文件头的内容/head文件头结束的标记body文件主体开始的标记……文件主体的内容/body文件主体结束的标记/html文件结束标记7章节内容•2.0引言•2.1HTML网页文档结构•2.2常用HTML标签•2.3CSS（CascadingStyleSheet）HTML标签可以划分为如下四种格式：〈标记名称〉：单一型，无设置值。例如，〈br〉〈标记名称属性＝”属性值”〉：单一型，有设置值。例如，〈hrwidth=”80%”〉〈标记名称〉---〈/标记名称〉：对称型，无设置值。例如，〈title〉---〈/title〉〈标记名称属性＝”属性值”〉---〈/标记名称〉：对称型，有设置值。例如，〈bodybgcolor=”red”〉---〈/body〉2.2常用HTML标签9类型HTML元素描述主窗体元素HTML、/HTML超文本的开始和结束HEAD、/HEAD超文本头部信息的开始和结束TITLE、/TITLE超文本窗口标题的开始和结束，它被显示在浏览器的标题栏中META用来描述HTML文档的元信息，即文档自身的信息BODY、/BODY网页主体部分，是HTML语言的核心部分HTML标题HTML标题（Heading）是通过h1-h6等标签进行定义的，此标签只能在head标签内出现。实例h1最大字号标题/h1h2中字号标题/h2h6最小字号标题/h611类型HTML元素描述字符风格控制元素H1、/H1~H6、/H6定义字体的大小B、/B字体加粗I、/I字体变斜体U、/U字体加下划线S、/S字体加中划线SUP、/SUP字体为上标SUB、/SUB字体为下标FONT、/FONT定义字体属性HTML段落HTML段落是通过p标签进行定义的。实例pHTML的英文全称是HyperTextMarkupLanguage，它是超文本标记语言的缩写，是Internet上用于编写网页的主要语言。/ppHTML中每个用来作为标记的符号都可以看作是一条命令，它告诉浏览器应该如何显示文件的内容。/pHTML图像HTML图像是通过img标签进行定义的。imgsrc=image01.jpgwidth=100height=150/14类型HTML元素描述版面控制元素PRE、/PRE空格、回车有效P、/P段落的开始和结束HR加水平线IMGSRC=“uri”…插入图片框架元素FRAMESET设置框架页显示FRAME表示每一个框架中显示的页面15类型HTML元素描述标题元素UL和OL标题分级方式：UL表示无序;OL表示有序LI子标题链接AHREF=“链接地址”、/A超链接表格元素TABLE、/TABLE显示表格TR、/TR表格的行显示TD、/TD表格的列显示TH、/TH设定表格每行的字段抬头HTML链接HTML链接是通过a标签进行定义的。实例ahref=内蒙古大学/a17超链接标签ahref=“目标网页和文件”链接文字/a•超链接target属性属性值说明_blank将连结内容显示在新窗口中。_self将连接内容显示在原本的窗口中。_top将连结内容显示在原本的窗口中，并取消框架的限制。_parent将内容显示在上一层的框架中。表格表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。tableborder=1trtdrow1,column1/tdtdrow1,column2/td/trtrtdrow2,column1/tdtdrow2,column2/td/tr/table19设置表格的边框与大小•这几个属性用来定义表格的边框线条粗细及其高度和宽度。•绝对位置表示法：使用像素来做为设定单位，不论窗口如何调整，占用固定的像素。•相对位置表示法：使用百分比做为设定单位，占用某一固定的比例大小。属性说明border改变表格边框厚度。width改变表格的宽度。height改变表格的高度。20表格中数据的对齐方式属性可设定的属性值说明alignleft、center、right靠左、置中、靠右对齐，默认为靠左对齐valigntop、center、bottom向上、置中、向下对齐，默认为置中对齐表格中数据的对齐方式分为水平对齐与垂直对齐两种。若这两个属性用在tr标签中，则可设置整行的对齐方式，若用在td标签中，则是设置个别单元格中数据的对齐方式。表单表单是一个包含表单元素的区域。表单元素允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，然后服务器端可以获得用户输入的数据。表单标签（form）定义。form姓名:inputtype=textname=name/br/年龄:inputtype=textname=age//form22类型HTML元素描述表单元素FORMNAME=“”ACTION=“URL”METHOD=“GET|POST”、/FORM显示表单INPUTTYPE=“TEXT”普通输入文本INPUTTYPE=“PASSWORD”密码输入框INPUTTYPE=“CHECKBOX”复选框INPUTTYPE=“RADIO”单选按钮INPUTTYPE=“IMAGE”将图片设置为提交按钮23类型HTML元素描述表单元素SELECT、/SELECT下拉列表框OPTION、/OPTION设置下拉选项TEXTAREACOLS=“N”ROWS=“N”、/TEXTAREA多行文本域INPUTTYPE=“SUBMIT”提交按钮INPUTTYPE=“RESET”重置按钮INPUTTYPE=“HIDDEN”隐藏域INPUTTYPE=“FILE”文本选择框24表单与交互式网页结构送出网页至浏览器用户输入数据返回给服务器接收数据导向指定网页送出结果网页至浏览器浏览器端处理数据的指定网页Hello.jsp显示处理结果Hello.htm表单提示表单提交按钮服务器25JSP借由标签FORM所构成的表单区块中，取得用户在其中特定字段输入的数据內容。HTMLHTML表单1HTML表单2%...JSP程序代码...%文件內容/HTMLxxx.jspxxx.jsp客户端浏览器服务器端Tomcat网站送出JSP网页用户在HTML表单中输入信息yyy.jspxxxxyyyy返回表单信息JSP程序代码处用户输入的表单信息发送包含运算結果的JSP网页JSP运算结果展示表单1表单2表单1表单226创建表单form/form标签在网页创建一块特定区域作为一种标签容器，形成收集用户数据功能的网页表单。属性method、action和name，配合form标签，形成创建表单的完整语法。formmethod=POST/GETaction=responsePathname=formName表单内容…/form其中method指定网页以何种模式传送表单的属性数据，可能的两种模式分别是Post和Get。action代表这一份表单网页传送出去之后，服务器对其响应所返回的网页路径地址，若是这个属性没有设定，网页本身会被当作action属性值。name代表表单的名称，JSP利用这个名称，辨识网页中的特定表单区域。27文本框是用来取得用户在网页所输入的姓名、地址之类等相关数据内容。inputtype=textname=txtNamesize=20文本框外观密码输入属性主要用在取得用户输入的密码，且会出现密码符号代替用户所输入的数据以避免密码被其它人看见。28文本框属性属性说明typetext/password。name指定文字输入栏的名称。如name=usrname，则在JSP程序中可利用此名称来取得其中所输入的数据。value设定文字属性的默认值。size设定文字属性的长度。maxlength设定文字属性可接受的字符上限，中文字也算一个字符。29多行文本输入区域多行文本输入区域常用于输入大量的文字数据textarearows=2name=txtareaNamecols=20/textarea30textarea属性属性说明name设定文本区域的名称rows设定文本区域显示的行数cols设定文本区域显示的列数value设定文本区域的默认值31单选按钮单选按钮使用于多选一的情况，input标签的type属性设定为radio：•inputtype=radio•具有相同name属性的单选钮，被归纳为同一个选项群组，因此只能选择其中某一个选项，若name属性不同则为各自独立的选择群组，一个以上的单选按钮組合，提供用户在网页上选择所需的特定选项。32•单选按钮属性属性说明name设定该单选钮的名称value设定单选钮返回给JSP程序的值checked设定单选钮是否为预设选取33复选框复选框用来复选多个选项，其INPUT标签的type属性设为checkbox。inputtype=checkbox复选框通常代表一种布尔类型的数据，若是符合其提示说明则选择。一组复选框并不会特别限定只允许选择其中一个选项。34•复选框属性属性说明name设定复选框的名称value设定复选框返回给JSP程序的值checked设定复选框是否为预设选取，若值为true则表示默认选取35下拉列表框下拉列表框的主体由select、/select标签所组成，而其内容选项则是使用option标签来设定。selectoption选项1option选项2/select36下拉列表框属性selectoption属性说明name设定下拉列表框的名称size设定下拉列表框显示的项目个数multiple设定下拉列表框内的数据是否能够复选属性说明value设定数据选项所返回给JSP的值selected设定数据选项为默认选取。37提交按钮与重置按钮发送按钮：当用户单击按钮后可将数据传送給程序处理。inputtype=“submit”value=“发送数据”重设按钮：将输入与选择的数据清除。inputtype=“reset”val