html网页设计总结.doc

资源ID：14922392 资源大小：102KB 全文页数：18页
资源格式： DOC 下载积分：4元

快捷下载

会员登录下载

微信登录下载

三方登录下载：

微信扫一扫登录

下载资源需要4元

邮箱/手机：
温馨提示：	用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）
支付方式：
验证码：	换一换

加入VIP免费专享

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

html网页设计总结.doc

目录1第一章31.1第一节31.1.1第一课认识HTML31.1.2第二课段落及超链接41.1.3第三课设置背景图及图片61.1.4第四课表格61.1.5第五课 hr属性、滚动字符、列表81.2第二节101.2.1第一课表单101.2.2第二课按钮及下拉框111.2.3第三课框架，标签iframe131.2.4第四课背景音乐，多媒体141.3第三节css151.3.1第一课了解css151.3.2第二课属性151.3.3第三课样式表的三类应用方式171 第一章1.1 第一节1.1.1 第一课认识HTML1. html：超文本标记语言网页又称WEB页面2. html：包括文字，表格，图片，声音，视频.以及各种功能按钮3. 首页：进入一个网站第一个显示的页面4. 网页的格式是国际标准组织定义的叫做W3C.具体标准是HTML，标记语言格式5. 标记的基本语法：<标记名称></标记名称>6. 新建一个网页：先新建文本文档，然后把后缀名改成“*.html”即可7. html文件的后缀名：*.html或*.htm用html语言编写的文档就是html文档，也常被称为“静态网页”文件8. html标记语言规定：（1）html标签必须是成对出现<html></html> （2）html标签不区分大小写9.常用标签 <b>加粗 <i>斜体<u>下划线<br>换行 <sup>下标<sub>上标<hr>水平线<hn>标题10.font字体标签<font color=“”>字体内容</font>Face:字体的风格 size：设置字体的大小11.当开始标签与结束标签中间有内容时使用<标签名>内容</标签名>当开始标签与结束标签中间没有内容时使用<标签名 />例：<br />1.1.2 第二课段落及超链接1.<p>段落标签多个段落之间会自动换行，并且每个段落中间会空一行。 <span>行级层标签：多个span之间没有换行。 <div>块级层标签：多个div之间会自动换行，但是没有空行。 <pre>预格式化段落标签：在代码写的内容，在显示时完全相同。2.特殊符号的处理：空格：   <: < >: >3.属性：对标签的描述称为属性。属性的说法: 属性的名称="值" 属性所写的位置：要写到开始标签的里面，每个属性之间用空格隔开。4.<body>标签的属性 bgcolor:设置背景色 text:设置文字的颜色5.超链接链接分类：外部链接：在多个页面之间使用的效果内部链接（锚链接）：只能在一个页面中的链接邮件链接：点击一个地址，可以快速的写邮件。6.链接的标签： <a>标签： <a href="跳转页面的地址">在点击的文字</a>7.绝对路径和相对路径绝对路径：在链接地址中带有盘符的路径称为绝对路径相对路径：相对于某一个文件夹的路径称为相对路径8.邮件链接 <a href="mailto:邮件地址">文字</a>9. 内部链接<a name=“标签a”>书签内容</a><a href=“#标签a”>单击此处使浏览器调到“标签a”</a>1.1.3 第三课设置背景图及图片1.dw的运行网页的快捷键：f122.设置网页的背景图片的属性：background<body background="图片路径">当路径中出现"./"时，代表是上一级的信息3.在网页中添加图片 <img src="图片路径" width="*px" height="*px" border="" alt="图片不存在时，显示的文字">解释：src:图片的路径width:宽度height:高度border:边框的大小(0代表无边框)alt:图片不存在时，显示的文字1.1.4 第四课表格1.表格标签： <table> 表格标签 <tr>代表行的标签 <td>代表列的标签 <th>使文字加粗并且居中解释： <tr>设置行的背景色：bgcolor <tr bgcolor="#112200"> <td>设置列的背景色：bgcolor <td bgcolor="#112200"> 设置行的边框颜色:bordercolor <tr bordercolor="#114400">2.表格的合并行合并：在不同行中单元格的合并称为行合并列合并：在同一行中单元格的合并称为列合并3.列合并单元格的属性：colspan行合并单元格的属性：rowspan4.表格中线的宽度属性：cellspacing这个属性必须写到table标签中<table cellspacing="值">表格中的文字到表格线的距离：cellpadding这个属性必须写到table标签中<table cellpadding="值">5.设置表格中文字的位置： (1)左（left），中（center），右（right）的属性align (2)上（top），中（middle），下（bottom）的属性valign6.表格镶嵌：在表格中添加一个表格1.1.5 第五课 hr属性、滚动字符、列表1. hr标签的属性 <hr color="#121212" width="100px" align"left" /> color:可以设置水平线的颜色 width:可以设置水平线的宽度 align:可以设置水平线的位置，左，中，右2.滚动字符：marquee <marquee bgcolor="#151515">要滚动的字体</marquee> 属性： bgcolor:滚动轨迹的颜色 direction:设置内容滚动的方向 Behavior：设置内容滚动的方式 Height：高度 Width:宽度 scrolldelay：设置二次滚动的时间间隔 Loop：滚动的次数3.列表无序列表:列表内容前面的符号是一样的有序列表:列表内容前面的符号是自动排列的自定义列表: 自己设置列表内容前面的符号无序列表的标签:<ul> 无序列表内容项的标签：<li> 在无序列表中有一个重要的属性：type <ul type="值"> <li>第一个</li> <li>第八个</li> </ul> type的值有：circle：空心圆 disc：实心圆 square：方块有序列表的标签:<ol> 有序列表内容项的标签：<li> 在有序列表中有一个重要的属性：type <ol type="a"> <li>童年</li> <li>老年</li> </ol> 自定义列表的标签：<dl> 设置自定义列表的图标标签：<dt> 自定义列表内容项的标签:<dd> <dl><dt>自定义图标内容</dt><dd>内容</dd> </dl>4.热点：把一张图片分为多个区域进行超链接1.2 第二节1.2.1 第一课表单1.表单标签：<form> <form id="" name=""> <form>标签的属性： id:编号 (不能重复) name:名称(可以重复) method:数据提交的方式，只有二个值 get:显示的提交数据 post:隐式的提交数据 action:提交的路径类似于<a href=""> 2.输入标签：<input> <input type="" id="" name="" /> 分类：文本框:<input type="text" id="" name="" maxlength="" value="" /> maxlength:在文本框中可输入的最大长度 value：文本框中的默认值密码框：<input type="password" id="" name="" maxlength="" value="" /> 单选框：<input type="radio" id="" name="" checked=""/> checked:代表默认选中的选项，值true false true :选中，false代表不选中。注意点：要想多个单选框成为一组，必须把name的值设置为相同。复选框：<input type="checkbox" id="" name="" checked="" > 1.2.2 第二课按钮及下拉框 1.type="button" 普通按钮 <input type="button" id="btnOk" name="btnOk" value="显示在按钮上面的文字" /> 2.type="submit" 提交按钮 <input type="submit" id="值" name="值" value="显示在按钮上面的文字" /> 注意点：当使用提交按钮时，需要把form表单标签中的action属性赋值。 3.type="image" 图片提交按钮 <input type="image" src="图片的路径" id="值" name="值" width="宽度" height="高度" /> 4.type="reset" 重置按钮 <input type="reset" id="值" name="值" value="显示在按钮上面的文字" /> 作用：把页面中所有用户输入的内容恢复到初始状态。 5.type="file" 上传文件标签（可以选择要上传的内容） <input type="file" id="值" name="值" /> 6.type="hidden" 隐藏内容标签 <input type="hidden" id="值" name="值" value="需要隐藏的内容" />7.下拉框标签：<select> <select> <option>值</option> <option>值</option> </select> <select>标签的属性： <select id="值" name="值"> <option>标签的属性： <select><option id="sxs" value="dym">陕西省</option> </select> 说明：id是option的编号 value：一般去保持编号如（张三的编号是：s10010） <option value="s10010">张三</option>8.多行文本框：<textarea>标签 <textarea>属性： <textarea id="值" name="值" cols="默认显示列的个数" rows="默认显示行的个数">默认值</textarea>1.2.3 第三课框架，标签iframe1.iframe的属性 <iframe>标签： <iframe>的属性： <iframe id="值" name="值" width="100%" height="100%" src="默认显示的页面的路径"></iframe>当使用<iframe>标签时，需要和<a>一起使用。在<a href="路径" target="iframe的name的值" ></a>Target:blank 显示一个新的窗口 self 显示在同一个窗口 parent 显示在iframe的前一份文件的窗口 top 显示整个浏览器2.框架（混合排列多个窗口）必须写在head里面<frameset rows=“30%，*”><frame src=“路径”><frameset cols=“20%，*”> <frame src=“路径”><frame src=“路径”></frameset></frameset><framesrt frameborder=“边框的设置” bordercolor=“边框的色彩” border=“边框的宽度” framespaing=“设置各窗口间的空白域”><frame scrouing=“滚动条” noresize=“设置不可变动的边框” marginwidht=“设置个窗口的上下左右边界宽度”>1.2.4 第四课背景音乐，多媒体1. 插入背景音乐<bgsound src=“路径” loop=“循环次数” autostart=“是否自动播放”>2. 插入多媒体<1>没有控制条的多媒体 <img dynsrc=“路径” loop=“循环次数” loopdelay=“循环延迟” start=“播放的方式”>Start：mouseover鼠标滑到文件时播放打开网页就播放<2>有控制条的多媒体 <embed src=“路径” autostart=“是否自动播放” loop=“循环次数”hidden=“是否隐藏” starttime“过多长时间开始播放” volume=“音量” with=“值” hight=“值”>1.3 第三节css1.3.1 第一课了解css1. css写在<head>中2. html样式<style type=“text/css”> P属性：值；属性：值;</style>3. 类样式以点开始后面随意起名字例如：.red1.3.2 第二课属性1. textalign 文本对齐 fontsize 字体大小fontfamily 字体类型fontstyle 字体样式 color设置或检索文本的颜色2. 背景的属性Backgroundcolor 设置背景颜色Backgroundimage 设置背景图片Backgroundrepeat 设置一个指定的图像如何被重复3. 方框属性 Paddingleft 设置内容与左边框之间的距离 Paddingright设置内容与右边框之间的距离 Paddingtop设置内容与上边框之间的距离 Paddingbottom设置内容与下边框之间的距离margin-top设置对象的上边距margin-bottom设置对象的下边距margin-left设置对象的左边距margin-right设置对象的右边距border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色4. 特殊样式 a：linkcolor：#ff0000 未被访问的链接红色 a：visitedcolor：#00ff00 已被访问的链接绿色 a：hovercolor：#ffcc00 鼠标悬浮在上的颜色橙色 a：activecolor：#0000ff 鼠标点中激活链接蓝色1.3.3 第三课样式表的三类应用方式1. 内嵌样式表<head> <style type=“text/css”>样式规则 </style> </head>2. 行内（嵌入）样式表<body> <p style=“属性：值；”>文字 </p></body>行内样式适用范围小，只适用于某一个标签，对其他标签不起作用3. 外部样式表文件需要在桌面新建一个css文件（1.新建文本文档2.该后缀名为css）1）标签link<head> <link href=“路径”rel=“stylesheet” type=“text/css”></head>2) import语句 <head> <style type=“text/css”> import 路径； </style> </head>18 / 18文档可自由编辑打印

注意事项

本文（html网页设计总结.doc）为本站会员（doc321）主动上传，三一文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三一文库（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。