|
学习资料：网易云课堂-Web前端开发｜Html/CSS/Javascript 地址：http://study.163.com/course/courseMain.htm?courseId=1002905013#/courseDetail?tab=1 第一课 结构<!doctype html> --------------------------------------------------第二课 常用块级标签标题标签 <h1></h1> ... <h6></h6> #共6级每一级字体大小不同，按级划分内容层级。 段落标签 <p></p> #每个段落标签会使用一行来显示。 水平线标签 <hr/> #在改行显示一条水平线。 有序列表标签 <ol><li>...</li></ol> #按序列排序每一个<li></li>内容。 无序列表标签 <ul><li>...</li></ul> #按相同图标排序每一个<li></li>内容。 定义列表标签 <dl><dt><dd>...</dd></dt></dl> #<dt>中添加标题<dd>中添加该标题形容，可描述多行。 分区标签 <div></div> #对网页进行整体分块，用id=''可给该区块命名。 --------------------------------------------------第三课 常用的行级标签<b> #粗体 <i> #斜体 <em> #强调，效果与斜体相同 <strong> #粗体，与b标签效果相同 <small> #小号字体 <sub> #定义下标 <sup> #定义上标 <bdo> #定义文本显示方向，内有dir=''属性，取值ltr或rtl 超链接标签 <a href='地址' target='目标窗口'>链接文本、地址、图片等</a> # href 指定超链接所关联的资源 # target 指定指定框架集张总哪个框架来装在关联资源，该属性可以是_self（自身）、_blank（新窗口）、_top（顶层框架）、_parent（父框架）。 图像标签 <img src='图片地址' alt='提示文字'> #src为图片路径，alt当图片无法显示时添加备注。 <span>标签 <span>...</span> #对文本内行中指定元素进行定义。 换行标签 <br/> #行距比<p>标签要小。 常用特殊符合 空格 -- 大于号 -- > 小于号 -- < 引号 -- " 版本号 -- © --------------------------------------------------第四课 frameset框架集<frameset cols='20%,50%,*' rows='50%,*' border='5' noresize='noresize'> #cols纵向（列）分割，rows横向（行）分割，border边框厚度，noresize可拒绝浏览器中框架的滑动。 <frame src='top.html' name='该页面名字'/> #以上面cols分割为例此处应该分为三个页面。 ... </frameset> #该标签不能与<body>标签同时出现，除非将<body>中添加至<noframes></noframes>标签中，用于显示当浏览器不支持<frameset>框架集的文字注释。 --------------------------------------------------第五课 iframe内嵌框架<iframe>标签常用属性frameborder='0' # 规定是否显示框架边框。（0或1） name='frame_name' # 指定该页面名称。 scrolling='yes' # 规定是否显示滚动条。（yes,no,auto） src='url' # 指定显示文档的url。 width='100%' # 框架高度比例。（也可使用px像素） height='400px' # 框架宽度像素。（也可使用%。） <iframe>语法<body> <iframe src='url' name='名称' frameborder='是否显示边框' scrolling='是否显示滚动条'> </iframe> </body> --------------------------------------------------第六课 表格标签表格相关元素<table>...</table> #定义表格。 # 表格的一些属性：width（宽）,height（高）,border（边框厚度）,bgcolor（背景颜色）,cellspacing（外边框间隔长度）,cellpadding（内边框间隔长度）,align（对其方式，left，right，center）等，不推荐在这里设置属性，大多用CSS设定。 <caption>...</caption> #定义表格标题。 <tr>...</tr> #定义表格行，该元素只能包含<td><th>两种元素。 <td>...</td> #定义单元格，两个主要属性：colspan=''（指定跨多少列）rowspan=''（指定跨多少行）。 <th>...</th> #定义表格页眉单元格。 <tbody>...</tbody> #定义表格主体。 <thead>...</thead> #定义表格头。 <tfoot>...</tfoot> #定义表格脚。 --------------------------------------------------第七课 form标签及常见表单元素语法： <form action='表单提交的地址' method='提交方式'> ...文本框，按钮等表单元素... </form> 常用属性： action # 指定表单提交后服务器哪个处理程序进行表单处理。 enctpye # 用于指定表单数据编码方式 · application/x-ww-form-urlencoded:默认编码方式，将表单控件中值处理成URL编码方式。 · mutipart/form-data:以二进制流方式处理表单数据。 · text/plain:当表单的action属性为mailto:URL的形式时使用。（多用于发邮件） method # 指定向服务器提交的方式一般为get和post两种方式。 · get方式请求会将请求参数的名和值转化成字符串附加在原URL之后，因此可在地址栏中看到请求参数的名和值。切get船速的数据量较小，一般不能大于2KB。（地址栏会出现用户名或密码，不安全，一般表单不用get请求。） · post方式的请求传送数据量较大，通常可认为不受限制，往往取决于服务器的限制。post方式请求参数是房在HTML的HEADER中传输，用户在地址栏看不到请求参数，安全性高。 --------------------------------------------------第八课 常见表单元素input 元素<input.../> # type类型 · 单行文本框： text · 密码输入框： password · 隐藏域： hidden · 单选框： radio · 复选框： checkbox · 图像域： image 如指定此类型即可指定width和height属性。 · 文件上传域： file · 提交、重置、普通按钮： submit、reset、button。 input 常用属性name 为该属性命名，同一属性内命名相同，如单选复选按钮。 id 为该属性指定唯一的id名，可与该属性name命名相同。 cheacked='checked' 设置单选、复选框初始状态是否处于选中状态，当type属性为checkbox或radio时可指定。 disabled='disabled' 设置首次 加载时禁用此元素。 maxlength 该属性是一个数字，指定文本框允许输入的最大字符数。 readonly='readonly' 指定该文本框内不润徐修改（可以用JavaScript脚本修改）。 size 该属性是一个数字，指定该元素长度（如文本框长度）。 src 指定图像域所显示的图像URL，type为image时可使用。 value · 当type选项为复选CheckBox时，该值被提交至服务器，如用1,2,3区分复选内容或输入id相同内容。 · 当type选项为按钮submit、reset、button时，该值为按钮上显示的内容。 button 元素<button type='类型'> 普通文本、格式化文本、图像 </button> button 常用属性type 指定该按钮类型，有button、reset、submit。 name 为该属性命名，同一属性内命名相同，如单选复选按钮。 disabled='disabled' 设置首次 加载时禁用此元素。 总结：button按钮与input按钮相比，提供了更强大和丰富的内容。 <label for='需关联元素的ID'>...</label> # 可通过for属性绑定另一元素，通过鼠标点击将焦点转移至相关联的表单控件上，增强用户体验。 列表框和下拉菜单 表单元素<select name='指定列表名称' size='行数'> <option> value='选项值' selected='selected'>...</option> ... </select> 注释：下拉菜单和列表菜单区别在于没有size选项。 列表框和下拉菜单 常用属性disabled 指定是否禁用此元素，该属性只能为disabled或空。 multiple='multiple' 设置该列表可是否允许多选。 size 指定该列表框内同时显示多少列表项。 <select>...</select>中包含如下两个子元素： <option>...<option> 定义每个列表框或菜单项，属性如下： · disabled 禁用该选项。 · selected 指定初始状态是否被选中。 · value 指定该选项对应的请求参数值。 <optgroup>...</optgroup> 定义列表项分组或菜单项分组，属性如下： · lable 指定该选项组的标签，必填。 · disabled 禁用该选项组所有选项。 多行文本框 表单元素<textarea name='...' cols='列宽' rows='行宽'> 文本内容... </textarea> 多行文本框 属性cols：指定文本框宽度，必填。 rows：指定文本框高度，必填。 readonly：是否为只读模式。 第九课 多媒体<embed>播放音频 <embed src='xxx.mp3' width='200' height='200' autostart='true' loop='true'> </embed> <embed>播放flash视频 <embed sr='xxx.swf' width='200' height='200' loop='true' quality='high' PLUGINSPAGE='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'> </embed> 属性 · src 指定播放文件 · width、height 设置播放器宽和高 · autostart 是否自动播放 · loop 是否循环 · quality 播放质量 · PLUGINSPAGE 如浏览器没有播放插件会自动从该属性指定的地址下载插件。 <object>标签 作用：可使用该标签给浏览器加载插件，来实现播放音频和视频。（该标签兼容性不好，微软发明IE支持） <objcet>播放音频 <object data='xxx.mp3'> <param name='src' value='xxx.mp3'> <param name='autoplay' value='true'> </object> <object>播放视频 <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' codebase='http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0'> <param name='movie' value='xxx.swf'> <param name='play' value='true'> <param name='loop' value='true'> <param name='quality' value='high'> </object> 属性 · data 指定播放文件 · classid 设置浏览器activeX控件的ID号 · codebase 类似<embed>中的PLUGINSPAGE，无插件会从此位置下载。 备注：因为<object>兼容差，所以如需实现可将<embed>嵌入到<object>中来实现。 |
|
|
