HTML5基础知识.doc
《HTML5基础知识.doc》由会员分享,可在线阅读,更多相关《HTML5基础知识.doc(31页珍藏版)》请在咨信网上搜索。
1、Html5JS基础Html5是超文本标记语言,不属于编程语言。Html5不考虑对IE9及以下版本的支持。1. html5基础div布局中设置浮动:float: right;清除浮动:clear: both;表格布局中合并2个单元格:colspan=2要在网页上显示预留关键字可以直接百度HTML实体。XHTML的语法和书写格式更加严格规范。1.1. html基础格式 /声明:html各版本的声明方式不同,这里是html5版本 /en表示英文,zh表示中文 /编码格式 叉叉学院 大叉叉家族 hello /这里的两排文字是没有格式的,不会分两排显示,可使用换行符 大狗狗 /html标题 大豚豚 he
2、llo dachacha /html段落 hello /这里的两排文字是有格式的,会分两排显示 a href= /html链接 /html图片换行符:hello dachacha hello dagou1.2. html标签属性1) 通用属性:class:规定元素的类名id:规定元素唯一IDstyle:规定元素样式title:规定元素的额外信息2) 键/值属性:打开本地点击打开本地,进入href_file.html。href=#表示点击链接后跳转到自身3) 常用属性::align对齐方式,有right,left,centertitle:bgcolor背景颜色,颜色是十六进制符号来定义的 bac
3、kground背景,如background=image01.jpg:target规定在何处打开链接。_blank:在新页面打开(浏览器的新页面)_self:在当前页面打开(当前框架页面) _top:在顶级页面打开(相当于浏览器当前页面) _parent:在父级页面打开(承载当前框架的框架内打开)打开本地1.3. html格式化定义粗体文本定义删除字定义着重字定义斜体字定义小号字定义加重语气定义下标字定义上标字定义插入字欢迎来到叉叉学院1.4. html样式1) 外部样式表创建外部样式文件mystyle.css然后在head中引用该样式:2) 内部样式表直接将外部样式文件的内容写到head中,p
4、标签装的是需要改变样式的文本 p color: aqua; 3) 内联样式表直接在标签内定义格式叉叉学院1.5. html链接文本链接:a href=图片链接:点击图片进入链接a href= img中若添加属性alt=chachalogo则当image01不存在时,会显示alt里面的内容name标签:在页面内部跳转,点击跳转到,则跳转到hellohello跳转到1.6. html表格定义表格定义表格标题定义表格的表头定义表格的行定义表格的单元定义表格的页眉定义表格的主体定义表格的页脚定义表格的列属性 /表格边框2,单元格边距9 大叉叉学院成员表 /标题 /定义行 组号 /定义表头 成员 001
5、 /单元格 /定义列表 大叉叉 /列表项 大狗狗 单元格图片背景:background=image01.jpg单元格颜色背景:bgcolor=aqua单元格间距:cellspacing1.7. html列表1) 有序列表有序列表,即有编号列表。默认数字编号,可设置start编号起始,也可设置A、a、l、i编号 大叉叉2) 无序列表无序列表,没有编号。默认实心圆disc,可设为空心圆circle或实心方块square 大叉叉列表项3) 嵌套列表:有序列表和无序列表的嵌套4) 自定义列表:自定义列表列表项对列表项的描述 大狗狗 大狗狗是大叉叉的1.8. html块1) 块元素块元素显示时通常以新行
6、开始,如,组合html元素的容器,通常结合css使用 hello,dachacha hello,dagougouCss中指定p标签效果:#hid p color: aqua;2) 内联元素内联元素通常不会以新行开始,如,Span可作为文本的容器, hello,hellodachacha可以在head中对span更改格式: span color: antiquewhite; 1.9. html表单1) 表单基础表单用于获取不同类型的用户输入。表单输入域文本域控制标签定义域域的标题选择列表选项组下拉列表中的选项按钮 用户名: /用户名输入 密码: /密码输入 大叉叉的换习惯: 打游戏 /复选框输入
7、 看小说 请选择大叉叉的性别; 男 /单选框输入 女 请找出大叉叉的爱犬: /下拉框选项 大狗狗 大豚豚 /添加按钮 /提交内容大叉叉个人简介:我叫大叉叉 /文本框输入2) 表单与PHP交互post:不会将用户名密码等信息显示在地址栏get:会将用户名密码等信息显示在地址栏,一般用于资源定位 用户名: 密码: Service.php文件:注意编码问题,保存的时候要选择utf-8,否则乱码?phpecho 用户名:.$_GETname.密码:.$_GETpassword;?1.10. html框架内联框架不需要写在body里面,直接写在html里面就行。如果framea里面的内容太多,超过框架尺
8、寸,其内容会以进度条的形式展示。iframe经常和a标签配合使用。1.11. 拖放可以拖放图片到网页的指定位置,还可以拖放本地资源到网页中。ondragstart:调用了一个函数drag(even),它规定了被拖放的数据setData():设置被拖放数据的数据类型和值ondragover:规定在何处放置被拖动的数据ondrop:当放置被拖数据时,会发生drop事件,即屏蔽掉默认事件的发生2. CSS基础css是层叠样式表。2.1. 常用操作尺寸操作:height:设置元素高度line-height:设置行高max-height:设置元素最大高度min-height:设置元素最小高度max-wi
9、dth:设置元素最大宽度min-width:设置元素最小宽度width:设置元素宽度分类操作:clear:设置一个元素的侧面是否允许其他的元素浮动cursor:规定当指向某元素之上时显示的指针类型display:设置是否及如何显示元素,如:display:inline可将多个列表项显示在一行,block以块显示float:定义元素在哪个方向浮动position:把元素放置到一个相对的、绝对的、固定的或静态的位置visibility:设置元素是否可见或不可见图片操作:img margin: 5px; /图片在容器中的内边距 opacity: 0.5; /透明度,1是不透明,0是完全透明2.2.
10、CSS语法1) 基础语法属性之间用分号隔开,属性值大于1个单词,需要加上双引号。body中定义标签:叉叉学院head中引用css:css中设置样式:h1color: darkblue;font-size: 40px;2) 高级语法选择器分组:多个标签使用同一个样式h1,a,h2color: darkblue;font-size: 40px;继承:除了h1等单独更改颜色的标签,其余body标签均使用yellow样式h1,a,h2color: darkblue;font-size: 40px;bodycolor: yellow;2.3. 选择器2.3.1. 派生选择器通过依据元素在其位置的上下文关
11、系来定义样式。hello da cha cha hello xiao cha chacss中指定样式:li strong color:palevioletred;strong color: aqua;2.3.2. id选择器可以为标有id的HTML元素指定特定样式,以#来定义。dachachaa href=css中指定样式:只改变a标签颜色#pid a color: aqua;2.3.3. 类选择器类选择器以一个点显示,class也可作为派生选择器。dachachaa href=css中指定样式:只改变a标签颜色.pclass a color: aqua;注意:id是唯一的,不可重复的,cla
12、ssa是可以重复的。2.3.4. 属性选择器对带有指定属性的HTML元素设置样式。属性选择器属性和值选择器head中指定样式: title color: aqua; title=te color: red; 2.4. CSS背景和轮廓background-attachment:背景图像是否固定,或随着页面其余部分滚动background-color:设置元素背景颜色background-image:将图片设置为背景background-position:设置背景图片起始位置background-repeat:设置背景图片是否及如何重复background-origin:规定背景图片的定位区域b
13、ackground-clip:规定背景的绘制区域background-size:规定背景图片尺寸bodywidth: 140px; /设置内容显示宽度 background-image: url(image01.jpg); /设置图像背景 background-size: 100px,100px; /设置背景图尺寸background-repeat: no-repeat; /禁止背景图重复 background-position: right top; /在屏幕右边显示背景图,从图像顶部开始显示,也可设置数值 background-attachment: fixed; /禁止背景图随着页面滚动
14、而滚动CSS轮廓用于突出元素outline:设置轮廓属性outline-color:设置轮廓颜色outline-style:设置轮廓样式outline-width:设置轮廓宽度2.5. CSS文本和字体color:文本颜色direction:文本方向line-height:行高letter-spacing:字符间距text-align:对齐元素中的文本text-decoration:向文本添加修饰text-indent:缩进元素中文本的首行text-transform:元素中的字母处理unicode-bidi:设置文本方向white-space:元素中空白的处理方式word-spacing:字
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 基础知识
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【丰****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【丰****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。