HTML5基础知识.doc

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标题 大豚豚 hello 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背景颜色，颜色是十六进制符号来定义的 background背景，如background=image01.jpg:target规定在何处打开链接。_blank：在新页面打开（浏览器的新页面）_self：在当前页面打开（当前框架页面） _top:在顶级页面打开（相当于浏览器当前页面） _parent:在父级页面打开（承载当前框架的框架内打开）打开本地1.3. html格式化定义粗体文本定义删除字定义着重字定义斜体字定义小号字定义加重语气定义下标字定义上标字定义插入字欢迎来到叉叉学院1.4. html样式1) 外部样式表创建外部样式文件mystyle.css然后在head中引用该样式：2) 内部样式表直接将外部样式文件的内容写到head中，p标签装的是需要改变样式的文本 p color: aqua; 3) 内联样式表直接在标签内定义格式叉叉学院1.5. html链接文本链接：a href=图片链接：点击图片进入链接a href= img中若添加属性alt=chachalogo则当image01不存在时，会显示alt里面的内容name标签：在页面内部跳转，点击跳转到，则跳转到hellohello跳转到1.6. html表格定义表格定义表格标题定义表格的表头定义表格的行定义表格的单元定义表格的页眉定义表格的主体定义表格的页脚定义表格的列属性 /表格边框2，单元格边距9 大叉叉学院成员表 /标题 /定义行 组号 /定义表头 成员 001 /单元格 /定义列表 大叉叉 /列表项 大狗狗 单元格图片背景：background=image01.jpg单元格颜色背景：bgcolor=aqua单元格间距：cellspacing1.7. html列表1) 有序列表有序列表，即有编号列表。默认数字编号，可设置start编号起始，也可设置A、a、l、i编号 大叉叉2) 无序列表无序列表，没有编号。默认实心圆disc，可设为空心圆circle或实心方块square 大叉叉列表项3) 嵌套列表：有序列表和无序列表的嵌套4) 自定义列表：自定义列表列表项对列表项的描述 大狗狗 大狗狗是大叉叉的1.8. html块1) 块元素块元素显示时通常以新行开始，如，组合html元素的容器，通常结合css使用 hello,dachacha hello,dagougouCss中指定p标签效果：#hid p color: aqua;2) 内联元素内联元素通常不会以新行开始，如，Span可作为文本的容器， hello,hellodachacha可以在head中对span更改格式： span color: antiquewhite; 1.9. html表单1) 表单基础表单用于获取不同类型的用户输入。表单输入域文本域控制标签定义域域的标题选择列表选项组下拉列表中的选项按钮 用户名： /用户名输入 密码： /密码输入 大叉叉的换习惯： 打游戏 /复选框输入 看小说 请选择大叉叉的性别; 男 /单选框输入 女 请找出大叉叉的爱犬： /下拉框选项 大狗狗 大豚豚 /添加按钮 /提交内容大叉叉个人简介：我叫大叉叉 /文本框输入2) 表单与PHP交互post:不会将用户名密码等信息显示在地址栏get:会将用户名密码等信息显示在地址栏，一般用于资源定位 用户名： 密码： Service.php文件：注意编码问题，保存的时候要选择utf-8，否则乱码?phpecho 用户名:.$_GETname.密码:.$_GETpassword;?1.10. html框架内联框架不需要写在body里面，直接写在html里面就行。如果framea里面的内容太多，超过框架尺寸，其内容会以进度条的形式展示。iframe经常和a标签配合使用。1.11. 拖放可以拖放图片到网页的指定位置，还可以拖放本地资源到网页中。ondragstart:调用了一个函数drag(even)，它规定了被拖放的数据setData()：设置被拖放数据的数据类型和值ondragover：规定在何处放置被拖动的数据ondrop：当放置被拖数据时，会发生drop事件，即屏蔽掉默认事件的发生2. CSS基础css是层叠样式表。2.1. 常用操作尺寸操作：height:设置元素高度line-height:设置行高max-height:设置元素最大高度min-height:设置元素最小高度max-width:设置元素最大宽度min-width:设置元素最小宽度width:设置元素宽度分类操作：clear:设置一个元素的侧面是否允许其他的元素浮动cursor:规定当指向某元素之上时显示的指针类型display:设置是否及如何显示元素，如：display:inline可将多个列表项显示在一行，block以块显示float:定义元素在哪个方向浮动position:把元素放置到一个相对的、绝对的、固定的或静态的位置visibility:设置元素是否可见或不可见图片操作：img margin: 5px; /图片在容器中的内边距 opacity: 0.5; /透明度，1是不透明，0是完全透明2.2. 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. 派生选择器通过依据元素在其位置的上下文关系来定义样式。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是唯一的，不可重复的，classa是可以重复的。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:规定背景图片的定位区域background-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; /禁止背景图随着页面滚动而滚动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:字间距text-shadow:向文本添加阴影word-rap:规定文本的换行规则 chachaxueyuan 床前明月光，疑是地上霜。举头望明月，低头思故乡。 CSS设置：h2 text-indent: -2em; /首行缩进负2个像素 padding-left: 2em; /文本缩进2个像素 text-transform: uppercase; /文本转换为大写字母p padding-left: 2em; text-shadow: 5px 5px 1px #FF0000;/文字阴影距左、距上、像素、颜色值 width: 200px; /段落宽度 text-wrap: normal; /正常自动换行font-family:字体系列font-size:字体尺寸font-style:字体风格font-variant:以小型大写字体或正常字体显示文本font-weight:字体粗细font-size: 20px;font-family: Arial;2.6. CSS链接CSS链接四种状态：a:link:普通的，未被访问的状态a:visited:用户已访问的链接a:hover:鼠标指针位于链接的上方a:active:链接被点击的时刻常用链接方式：text-decoration:大多用于去除链接中的下划线设置背景颜色：background-color a href=CSS样式：a:link color: #FF0000; /字体颜色 text-decoration: none; /去除下划线 background-color: aliceblue; /字体背景颜色2.7. CSS列表可以放置、改变列表标志，或者将图像作为列表项标志。list-style:简写列表项list-style-image:列表项图像list-style-position:列表标志位置list-style-type:列表类型，如圆圈 大狗狗 大叉叉 CSS样式：ul li list-style-image: url(image/icon.gif); /图片做标志ul.ul1 list-style-position: inside; /往里面靠一点ul.ul2 list-style-position: outside; /往左外靠一点2.8. CSS表格 姓名 年龄 性别 大叉叉 28 男 大狗狗 5 男 CSS样式:#tb width: 400px; border-collapse: collapse; /折叠边框,即设置为单条边框#tb th /表头 border: 1px solid blue; /边框宽度 height: 30px; text-align: center; /文字居中 background-color: antiquewhite;#tb td border: 1px solid blue; color: white; /文字颜色 text-align: center; background-color: yellowgreen; padding: 5px; /文字内边距#tb tr.alt td background-color: darkgoldenrod;2.9. CSS盒子模型外边距：外边距默认为透明区域，外边距接受任何长度单位、百分数值。margin:外边距，如margin:0px auto，上下边距0，左右自适应margin-bottom:底边距margin-left:左边距margin-right:右边距margin-top；上边距边框：border:边框border-style定义了10种非继承样式border-top-style:上边框样式border-left-style:左边框样式border-right-style:右边框样式border-bottom-style:底边框样式border-width:边框宽度border-top-width:上边框宽度border-color:边框颜色border-top-color:上边框颜色CSS3边框：圆角边框border-radius 边框阴影 box-shadow: 10px 10px 5px #FFccFF /右移，下移，透明度，颜色值 边框图片：border-image内边距：padding:所有内边距padding-bottom:设置底边距padding-left:设置左边距padding-right:设置右边距padding-top:设置上边距content:内容外边距合并：盒子1边距10，盒子2边距20，合并之后边距会是20，即盒子的叠加。2.10. CSS定位和浮动CSS定位：改变元素在页面上的位置。定位机制：普通流：元素按照其在html中的位置顺序决定排布的过程 浮动： 绝对布局：CSS定位属性：position:把元素放在一个静态、相对、绝对或固定的位置中 static:偏移量不起任何效果 relative:配合偏移量使用，其余内容不能占用该位置 absolute:其余内容可以占用该位置 fixed:滚动鼠标，元素不会移动top:元素向上的偏移量left:元素向左的偏移量right：元素向右的偏移量bottom:元素向下的偏移量overflow:设置元素溢出其区域发生的事情clip:设置元素显示的形状vertical-align:设置元素垂直对齐的方式z-index:设置元素的堆叠顺序#position1 width: 100px; height: 100px; background-color: beige; position: relative; left: 20px; top: 30px; z-index: 2; /后放position1代表的div#position2 width: 100px; height: 100px; background-color: red; position: relative; left: 50px; top: 10px; z-index: 1; /先放position2代表的divCSS浮动属性：folat属性可用值：left元素向左浮动，浮动到左上角 right元素向右浮动 none元素不浮动 inherit从父级继承浮动属性设置了浮动的话，主容器装不下时，会自动换行clear属性可用值：left、right去掉元素向左、向右浮动 both去掉元素两侧的浮动 inherit从父级继承来clear的值通常对容器内的文本需要去掉浮动。2.11. 瀑布流和动画瀑布流:淘宝等商城常用的将多张图片放在在网页中，图片宽度相同，高度不同。.div column-width: 250px; /多列列宽 -webkit-column-width: 250px; /须要做浏览器适配（谷歌） -webkit-column-gap: 5px; column-gap: 5px; /图片的间距动画:CSS中可以创建多列来对文本或区域进行布局.都须要做浏览器适配column-count：分列的数量column-gap：每列之间的间距column-rule：每列之间间隔的那条线，以及线的格式颜色，如column-rule:5px outset #FF0000动画过渡：transition：设置4个过渡属性transition-property：过渡的名称transition-duration：过渡效果花费的时间transition-timing-function：过渡效果的时间曲线transition-delay：过渡效果开始时间，是延时开始的时间div width:100px; height: 100px; background-color: antiquewhite; -webkit-transition: width 2s ,height 2s; transition: width 2s ,height 2s;div:hover width: 200px; height: 200px;3. JavaScript3.1. JavaScript基础JavaScript脚本可以放置在head和body中，通常放在head中作为js的引入，如：myjs.js脚本中写具体内容：document.write(hello,dachacha)语法:语句之间最好用分号隔开.标识符必须以字母下划线或美元符号开始.对大小写非常敏感.JS会忽略空格.单行注释: / 多行注释同HTML一样/* */数据类型：可以通过赋值为null的方式清除变量字符串：string var string=”hello”数字：number var i=10布尔：boolean var flag=true数组：array var arr=1,2,3 var arr=“hello”,”dachacha” var arr=new Array(“hello”,”dachacha”); var arr=new Array(); arr0=10; arr1=20;对象：object空：null未定义： var r;3.2. 运算符算术运算符：+在前面是先+再运算，+在后面是先运算再+var i=10; var j=+i / j=11,i=11var i=10; var j=i+ / j=10,i=11var i=11;var j=5;var m= i+=j /m=16,i=i+j字符运算符：var i=”hello”;var j=”dachacha”;var m=i+j; /m=”hello,dachacha” 字符串相加是拼接var j=”5”+5 /j=”55”比较运算符：var i=”10”;var j=10;document.write(i=j) /truedocument.write(i=j) /false类型必须一致document.write(i!=j) /falsedocument.write(i!=j) /true类型必须一致document.write(!(i=j) /false表示取反document.write(i9?”i大于9”:”i小于9”) /i大于9，为真则输出第一个，为假则输出第二个3.3. 语法3.3.1. if-else var i=10; if(i10) document.write(i10); else if(i10) document.write(i10); else document.write(i=10); 3.3.2. switch var i=5; switch (i) case 1: document.write(i=1); break; /跳出当前循环 case 2: document.write(i=2); break; default: document.write(条件不满足case); break; 3.3.3. for var i=1,2,3,4,5,6; var j=0; for(;j6;j+) document.write(ij+,); for-in: var i=1,2,3,4,5,6; var j; for(j in i) document.write(ij+;) 3.3.4. while var i=1; while (i10) document.write(