01第一讲HTML编程技术汇编

第一讲HTML编程技术***本讲要点***HTML编程技术HTML文件执行过程HTML文件结构HTML常用标记本地磁盘2.1HTML文件执行过程浏览器从服务器提取HTML文件1请求HTML文件Web服务器浏览器4解释HTML文件3返回HTML文件2查找HTML文件2.2HTML文件结构html/html是HTML文件的根标记头head/head对当前网页进行说明和声明的信息title/title标题体body/body决定网页显示效果2.3HTML常用标记HTML：HyperTextMarkupLanguage超文本标记语言HTML文档是由标记组成的文档HTML标记大部分开始标记与结束标记成对出现，也有个别标记没有结束标志。很多标记是有参数的，参数只能出现在开始标记中。HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=greenH1欢迎来到HTML世界/H1/BODY/HTML标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容HTML常用标记结构化标记:描述Web页的整体结构html/htmlhead/headtitle/titlebody/body文本标记：编排文本内容的布局和格式列表标记：以列表的形式显示文本表格标记：将要显示的内容以表格的形式组织表单标记：创建数据条目表2.3.1图像标记imgIMG标签用于在HTML文档中插入图像，常用属性src：src属性用于指定要插入的图像位置。align：属性用于指定图像相对于文本的对齐方式。boder：指定图片边宽height：图片高，width：图片宽图像标记实例HTMLHEADTITLE动物世界/TITLE/HEADH1FONTSIZE=3COLOR=FORESTGREENB让我们看看这些可爱的动物/B/FONT/H1BODYPIMGalign=bottomSRC=Animal.jpg底部对齐/PPIMGalign=topSRC=Animal.jpg顶部对齐/PPIMGalign=middleSRC=Animal.jpg居中对齐/P/BODY/HTML2.3.2超链接a/aHTMLHEADTITLE可爱宝贝/TITLE/HEADBODYH1会弹琴的狗狗/H1AHREF=dog.htmltarget=_blank单击此处查看/A/BODY/HTMLa有两个重要属性href：目标网页target：显示目标网页内容的窗口2.3.3换行br、分段p、字体font只要在文本中放入BR标签，就会强制换行HTMLHEADTITLE诗词学习/TITLE/HEADBODYBR我是第一行BR我是第二行P我是第一段/PP我是第二段/P/BODY/HTMLBR段落标签HTMLHEADTITLE诗词学习/TITLE/HEADBODYP我是第一段/PP我是第二段/PPalign=left左对齐显示PPalign=center居中显示PPalign=right右对齐显示P/BODY/HTMLP…/P标签用于标记段落使用字体和属性HTMLHEADTITLE动物世界/TITLE/HEADBODYH1了解有关动物的更多信息/H1PFONTsize=5color=blueface=Arial斑马的特性/FONTP没有任何两匹斑马FONTcolor=redsize=3的斑纹是完全一样的，/FONT因此每匹斑马都是独一无二的/BODY/HTMLFONTSIZE=5COLOR=blueFACE=Arial可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一系列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本FONT元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示标题h1…h6HTMLHEADTITLE动物世界/TITLE/HEADBODYH1从大自然获得灵感/H1H2从大自然获得灵感/H2H3从大自然获得灵感/H3H4从大自然获得灵感/H4H5从大自然获得灵感/H5H6从大自然获得灵感/H6/BODY/HTMLH1到H6标签用于指定不同级别的标题2.4HTML中的表格tablethtrtd行tr列列标题th在HTML文档中，广泛使用表格来存放网页上的文本和图像单元格td表格标题caption表格的基本结构HTMLHEADTITLE使用表格/TITLE/HEADBODYTABLEBORDER=2TRTD姓名/TDTD性别/TDTD分数/TD/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLE/BODY/HTML表格实例TABLE代表表格的开始，border=2表示边框尺寸为2TR表示行，这是表格的第一行，有三列数据，TD代表列表格的第二行，有三列数据BODYTABLEBORDER=2CAPTIONalign=top学员档案信息/CAPTIONTRTH姓名/THTH性别/THTH分数/TH/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLE/BODY/HTML表格的标题CAPTION表示表格标题TH表示行或列标题，粗体显示表格的第二行，有三列数据特殊表格的构造在实际应用时，经常用到特殊的表格，如图所示td标记的rowspan属性与colspan属性可以解决问题。tableborder=1trtdrowspan=2图片/tdtd信息一/td/trtrtd信息一/td/tr/tabletableborder=1trtd信息一/tdtd信息一/td/trtrtdcolspan=2图片/td/tr/table2.5HTML表单表单的用途在用户注册某种服务或活动时收集姓名、地址、电话号码、电子邮件地址和其他信息在用户购买商品时收集信息METHOD=post或getACTIONMETHOD指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全ACTION=URLFORMaction==post表单FORM表单的用途：接收客户填写的数据表单FORMget和post的区别1.get是从服务器上获取数据，post是向服务器传送数据。2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。3.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。4.get安全性非常低，post安全性较高。默认方法是get表单输入元素-1Type此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认选择为TEXT。Name此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称TEXT1、TEXT2或选择的任何名称来标识它们。Name属性的作用域是在FORM元素内。Value此属性是可选属性，它指定控件的初始值。但是，如果TYPE为RADIO，则必须指定一个值。Size此属性指定控件的初始宽度。如果TYPE为TEXT或PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。Maxlength此属性用于指定可在TEXT或PASSWORD元素中输入的最大字符数。Checked此属性是Boolean属性，指定按钮是否是打开的。当输入类型为RADIO或CHECKBOX时，使用此属性。文本框、按钮、单选按钮、复选框等都是输入元素。INPUTtype=?name=?size=?value=?maxlength=?checked=?表单输入元素-2INPUTname=button1type=submitvalue=提交INPUTname=button2type=resetvalue=重置INPUTname=button3type=buttonvalue=普通按钮•BUTTON（按钮）Type属性：submit：提交按钮，可以触发事件，提交数据reset：重置按钮button：普通按钮，不能触发事件表单输入元素-3身份证号inputtype=Textname=PIDsize=20maxlength=18•TEXT（文本）密码：INPUTtype=passwordvalue=name=“passsize=15TEXTAREAname=jianlicols=20rows=5请填写您的工作经历/TEXTAREA表单输入元素-4性别：INPUTTYPE=radioNAME=sexVALUE=male男性INPUTTYPE=radioNAME=sexVALUE=female女性•单选按钮和复选框你喜欢以下哪些明星：brinputtype=Checkboxname=id1value=SHES.H.Einputtype=Checkboxname=id2value=RainRaininputtype=Checkboxname=id3value=JayChouchecked周杰伦表单输入元素-6•下拉列表B谁是2002年世界杯冠军？/BSELECTNAME=myselectOPTIONvalue=SpainSELECTED西班牙/OPTIONOPTIONvalue=France法国/OPTIONOPTIONvalue=Brazil巴西/OPTIONOPTIONvalue=German德国/OPTION/SELECT列表选项小结HTML常用标签图像img，超级链接ahref=…/a分行、分段、字体列表：有序、无序、标题表格表单作业请编写HTML代码