11HTML教程(最全的图文并茂教程)

HTML网页制作1：HTML简介2：HTML常用标签介绍3：表单布局4：表格布局5：框架布局6：CSS样式表7：使用Dreamweaver制作网页HTML简介HTML：HyperTextMarkupLanguage超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具HTML文档的基本结构HTML文档的结构htmlheadtitle我的第一个网页/title/headbodyHelloWorld!/body/htmlHTML网页head头部部分body主体部分html…/html标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包括标题和其他说明信息，包括在head…/head标签内这部分包含文本、图像和链接，它包括在body…/body标签内网页的摘要信息网页摘要信息利于浏览器解析和搜索引擎搜索：使用title标签headtitle搜狐-中国最大的门户网站/title/headheadmetaname=keywordscontent=淘宝,网上购物,在线交易,交易市场/metaname=descriptioncontent=淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……//headheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312//head使用meta标签（1）描述文档类型和字符编码（2）描述搜索关键字和描述提供搜索关键字和内容描述信息，方便搜索引擎的搜索HTML页面中的块和行HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行行级标签：按行逐一显示分类好处：方便后续的布局设计块级：块内包含多行行级：包括文字、图片等块级标签根据使用场合，块级标签又细分为：基本块级标签常用于布局的块级标签标题标签……bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body……h1最大h6最小前后隔行h1标题/h1……h6标题/h6基本块级标签—段落段落标签……bodyh1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p/body……前后换行，类似教材中的段落p……/p基本块级标签—水平线水平线标签……bodyh1北京欢迎你/h1hr/p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p/body……横线用于内容分割单个标签的闭合形式hr/常用于布局的块级标签—有序列表有序列表标签……bodyh3注册步骤：/h3olli填写信息/lili收电子邮件/lili注册成功/li/ol/body……有序列表olli列表项1/li……/ol常用于布局的块级标签—无序列表无序列表标签bodyh3新人上路指南/h3ulli如何激活会员名？/lili如何注册贵美会员？/lili注册时密码设置有什么要求？/lili贵美认证/li/ul/body无序列表ulli列表项1/li……/ul常用于布局的块级标签—描述标签定义描述标签……bodydldt咖啡/dtdd一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。/dddd可以提神，刺激神经。/dddl/body……这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合dldt标题/dtdd描述1/dd……/dl常用于布局的块级标签—描述标签……bodydldt图片的HTML代码（后续讲解）……dtdd商品名称：灿坤蒸气电熨斗/dddd商品价格：388元/dddd商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计/dd/dl/body……用定义描述标签实现图文混编的效果文字有一定的缩进常用于布局的块级标签—表格表格tabletrtd百度/tdtd新浪/td/tr……/tabletable--表格tr--行td--列（单元格）常用于布局的块级标签—表单表单一般和table使用：formtabletrtd.../tdtd.../td/tr...../table/formform……/form常用于布局的块级标签—div层分区标签divdiv标签可内嵌到p等标签内，作为普通块状元素使用一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用……divstyle=width:400px;height:300px;background:#9FFp……/ph3新人上路/h3ul……/uldiv其实就是一个....../div……小结请说出实际开发常用的4种块状结构是什么？1、div-ul(ol)-li：常用于分类导航或菜单等2、div-dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单行级标签—图像标签图像标签……imgsrc=images/drink.jpgalt=精品热卖：高清晰，30寸等离子电视title=精品热卖：高清晰，30寸等离子电视/……为了不同浏览器之间的兼容，推荐使用title属性，确保能显示提示文字imgsrc=图片地址alt=提示文字title=提示文字/行级标签—范围标签范围标签span：显示某行内的独特样式……p商品价格:仅售spanstyle=color:red;font-size:70px;10/span元/p……span文本等行级内容/span设置红色、大号字突出显示行级标签—换行标签换行标签br/……p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/流动中的魅力充满朝气。br/北京欢迎你，在太阳下分享呼吸br/在黄土地刷新成绩。br/北京欢迎你，像音乐感动你br/让我们都加油去超越自己。br//p……和p的区别：前后不换行为什么需要W3C标准W3C：WorldWideWebConsortium，万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：OM页面交互方面：ECMAScript……制定统一的web标准W3CNetscape的图标W3C提倡的Web结构不规范的示例fontsize=7一级主题/Fontbr/一级主题阐述文字br/Br/fontsize=5二级主题/fontbr/二级主题相关文字P项目列表1p项目列表2p项目列表3存在问题：1、内容和表现没分离，后期很难维护和修改2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索W3C提倡的Web结构规范的示例h1一级主题1/h1p一级主题阐述文字/ph2二级主题/h2p二级主题阐述文字/pulli项目列表1/lili项目列表2/lili项目列表3/li/ulW3C提倡的Web结构：1、内容（结构）和表现（样式）分离2、HTML内容结构要求语义化XHTML1.0基本规范!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN……/head……body部分内容……/html标签名和属性名称必须小写HTML标签必须关闭属性值必须用引号括起来标签必须正确嵌套必须添加文档类型声明1、声明必须位于文档的最前面2、三种级别：Strict（严格类型）、Trasitional（过度类型）、Frameset（框架类型）练习1需求说明：实现简单的商品购买页练习2注意HTML结构的语义化，遵守XHTML1.0基本规范需求说明：实现商品促销页超链接超链接---实现页面间的导航链接文本或图像链接地址（目标）超链接……ahref=span.htmltarget=_blank灿坤蒸气电熨斗/a……链接在新窗口中打开ahref=链接地址target=目标窗口位置链接热点文本或图像/a链接路径……ahref=../web1.htm上级目录/aahref=../../web2.htm上上级目录/a……相对地址：相对于当前目录的地址，常用绝对地址：指向目标地址的完整描述，少用上级目录：../上上级目录：../../ahref=/memAdmin/login/login.htm登录/aahref=搜狐/aahref=login/login.htm登录/a超链接的三类应用场合……ahref=register/register.html[免费注册]/aahref=login/login.htm[登录]/a……页面间链接锚链接功能性链接常用于网站导航相对路径超链接的三类应用场合实现锚链接1、定义标记（锚）：aname=标记名目标位置/a2、设置链接到标记位置：ahref=#标记名当前位置/a……ahref=#star[明星专区]/a……aname=“star”明显专区内容/a……定义标记设置链接到标记位置A.页面内的锚链接适用于页面内容较多，超过一屏的场合超链接的三类应用场合实现锚链接……标记所在页….ahref=#star[明星专区]/a……B.页面间的锚链接……链接页….明星体验：ahref=anchor.html#star明星专区/a……超链接的三类应用场合功能性链接邮箱、QQ链接等……ahref=mailto:[e-mail]站长信箱/a……注释……!--li被注释掉的行将不显示/li--li正常显示行1/lili正常显示行2/li……!--注释内容--用于增加代码的可读性，不显示注释特殊符号特殊符号空格： 大于()：>小于(）:<引号（”）："版权号：©……COPYRIGHT©  2003-2010  ahref=“index.htm”北京市贵美商城有限公司……1、因为、等符号在HTML中已使用，所以必须用其他符号来代替2、都以分号结束（；）表单的应用表单的典型应用用户登录/注册收集用户反馈信息提供搜索工具常见的表单元素单行文本框(text)单选按钮(radio)复选框(checkbox)下拉列表(select)重置按钮(reset)提交按钮(submit)密码框(password)文本域(textarea)表单基本语法formaction=表单提交地址method=提交方法…文本框、按钮等表单元素…/