HTML5基础知识_第1页
HTML5基础知识_第2页
HTML5基础知识_第3页
HTML5基础知识_第4页
HTML5基础知识_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Html5·JS基础Html5是超文本标记语言，不属于编程语言。Html5不考虑对IE9及以下版本的支持。1. html5基础div布局中设置浮动：float: right;清除浮动：clear: both;表格布局中合并2个单元格：colspan="2"要在网页上显示预留关键字可以直接百度HTML实体。XHTML的语法和书写格式更加严格规范。1.1. html基础格式<!DOCTYPE html> /声明:html各版本的声明方式不同，这里是html5版本<html lang="en"> /en表示英文，zh表示中文&

2、lt;head> <meta charset="UTF-8"> /编码格式 <title>叉叉学院</title></head><body> 大叉叉家族 hello /这里的两排文字是没有格式的，不会分两排显示,可使用换行符 <h1>大狗狗</h1> /html标题 <h2>大豚豚</h2> <p>hello dachacha</p> /html段落 hello /这里的两排文字是有格式的，会分两排显示 <a href="

3、 /html链接 <img src="images/image01.jpg"> /html图片</body></html>换行符：hello dachacha <br/> hello dagou1.2. html标签属性1) 通用属性：class：规定元素的类名id：规定元素唯一IDstyle：规定元素样式title：规定元素的额外信息2) 键/值属性：<a href="href_file.html">打开本地</a>点击打开本地，进入href_file.html。href=&quo

4、t;#"表示点击链接后跳转到自身3) 常用属性：<h1>:align对齐方式，有right,left,center<h1 align="right">title</h1><body>:bgcolor背景颜色，颜色是十六进制符号来定义的 background背景，如background="image01.jpg"<a>:target规定在何处打开链接。_blank：在新页面打开（浏览器的新页面）_self：在当前页面打开（当前框架页面） _top:在顶级页面打开（相当于浏览器当前页面）

5、_parent:在父级页面打开（承载当前框架的框架内打开）<a href="href_file.html" target="_blank">打开本地</a>1.3. html格式化<b>定义粗体文本<del>定义删除字<em>定义着重字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<b>欢迎来到叉叉学院</b>1.4.

6、html样式1) 外部样式表创建外部样式文件mystyle.css然后在head中引用该样式：<link rel="stylesheet" type="text/css" href="mystyle.css">2) 内部样式表直接将外部样式文件的内容写到head中，p标签装的是需要改变样式的文本<style type="text/css"> p color: aqua; </style>3) 内联样式表直接在标签内定义格式<a style="color: aqua

7、">叉叉学院</a>1.5. html链接文本链接：<a href="图片链接：点击图片进入链接<a href=" <img src="image01.jpg width="200px" height="200px"></a>img中若添加属性alt="chachalogo"则当image01不存在时，会显示alt里面的内容name标签：在页面内部跳转，点击跳转到，则跳转到hello<a name="tips">

8、;hello</a><br><br><br><br><br><br><br><br><br><br><a href="#tips">跳转到</a>1.6. html表格<table>定义表格<caption>定义表格标题<th>定义表格的表头<tr>定义表格的行<td>定义表格的单元<thead>定义表格的页眉<tbody>定义表格的主体

9、<tfoot>定义表格的页脚<col>定义表格的列属性<table border="2" cellpadding="9"> /表格边框2，单元格边距9 <caption>大叉叉学院成员表</caption> /标题 <tr> /定义行 <th>组号</th> /定义表头 <th>成员</th> </tr> <tr> <td>001</td> /单元格 <td> <ul&g

10、t; /定义列表 <li>大叉叉</li> /列表项 <li>大狗狗</li> </ul> </td> </tr></table>单元格图片背景：background="image01.jpg"单元格颜色背景：bgcolor="aqua"单元格间距：cellspacing1.7. html列表1) 有序列表<ol>有序列表，即有编号列表。默认数字编号，可设置start编号起始，也可设置A、a、l、i编号<ol type="A&quo

11、t;> <li>大叉叉</li></ol>2) 无序列表<ul>无序列表，没有编号。默认实心圆disc，可设为空心圆circle或实心方块square<ul type="circle"> <li>大叉叉</li></ul><li>列表项3) 嵌套列表：有序列表和无序列表的嵌套4) 自定义列表：<dl>自定义列表<dt>列表项<dd>对列表项的描述<dl> <dt>大狗狗</dt> <d

12、d>大狗狗是大叉叉的</dd></dl>1.8. html块1) 块元素块元素显示时通常以新行开始，如<h1>，<p>，<ul><div>组合html元素的容器，通常结合css使用<div id="hid"> <p>hello,dachacha</p> <a>hello,dagougou</a></div>Css中指定p标签效果：#hid p color: aqua;2) 内联元素内联元素通常不会以新行开始，如<b>

13、;，<a>，<img>Span可作为文本的容器，<div id="hid"> <p><span>hello,hello</span>dachacha</p></div>可以在head中对span更改格式：<style type="text/css"> span color: antiquewhite; </style>1.9. html表单1) 表单基础表单用于获取不同类型的用户输入。<form>表单<input>

14、;输入域<textarea>文本域<lable>控制标签<fieldset>定义域<legend>域的标题<select>选择列表<optgroup>选项组<option>下拉列表中的选项<button>按钮<form> 用户名： <input type="text"> /用户名输入 <br/> 密码： <input type="password"> /密码输入 <br/> 大叉叉的换习惯： <

15、br/> 打游戏<input type="checkbox"> /复选框输入 看小说<input type="checkbox"> <br/> 请选择大叉叉的性别; <br/> 男<input type="radio" name="sex"> /单选框输入 女<input type="radio" name="sex"> <br/> 请找出大叉叉的爱犬： <select> /

16、下拉框选项 <option>大狗狗</option> <option>大豚豚</option> </select> <input type="button" value="签章"> /添加按钮 <input type="submit" value="确定"> /提交内容</form>大叉叉个人简介：<textarea cols="25" rows="2">我叫大叉叉&l

17、t;/textarea> /文本框输入2) 表单与PHP交互post:不会将用户名密码等信息显示在地址栏get:会将用户名密码等信息显示在地址栏，一般用于资源定位<form action="http:/localhost/service.php" method="get"> 用户名：<input type="text" name="name"> 密码：<input type="password" name="password"> &l

18、t;br> <input type="submit" value="提交"></form>Service.php文件：注意编码问题，保存的时候要选择utf-8，否则乱码<?phpecho "用户名:".$_GET'name'."<br>密码:".$_GET'password'?>1.10. html框架内联框架不需要写在body里面，直接写在html里面就行。<iframe src="framea.html&quo

19、t; frameborder="0" width="200px" height="200px"></iframe>如果framea里面的内容太多，超过框架尺寸，其内容会以进度条的形式展示。iframe经常和a标签配合使用。1.11. 拖放可以拖放图片到网页的指定位置，还可以拖放本地资源到网页中。ondragstart:调用了一个函数drag(even)，它规定了被拖放的数据setData()：设置被拖放数据的数据类型和值ondragover：规定在何处放置被拖动的数据ondrop：当放置被拖数据时，会发生drop事件

20、，即屏蔽掉默认事件的发生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:把

21、元素放置到一个相对的、绝对的、固定的或静态的位置visibility:设置元素是否可见或不可见图片操作：img margin: 5px; /图片在容器中的内边距 opacity: 0.5; /透明度，1是不透明，0是完全透明2.2. CSS语法1) 基础语法属性之间用分号隔开，属性值大于1个单词，需要加上双引号。body中定义标签：<h1>叉叉学院</h1>head中引用css：<link href="mycss.css" type="text/css" rel="stylesheet">css中设

22、置样式：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. 派生选择器通过依据元素在其位置的上下文关系来定义样式。<p><strong>hello da cha cha</strong></p>

23、;<ul> <li><strong>hello xiao cha cha</strong></li></ul>css中指定样式:li strong color:palevioletred;strong color: aqua;2.3.2. id选择器可以为标有id的HTML元素指定特定样式，以#来定义。<p id="pid">dachacha<a href="css中指定样式：只改变a标签颜色#pid a color: aqua;2.3.3. 类选择器类选择器以一个点显示，c

24、lass也可作为派生选择器。<p class="pclass">dachacha<a href="css中指定样式：只改变a标签颜色.pclass a color: aqua;注意：id是唯一的，不可重复的，classa是可以重复的。2.3.4. 属性选择器对带有指定属性的HTML元素设置样式。<p title="t">属性选择器</p><p title="te">属性和值选择器</p>head中指定样式：<style type="text/c

25、ss"> title color: aqua; title=te color: red; </style>2.4. CSS背景和轮廓background-attachment:背景图像是否固定，或随着页面其余部分滚动background-color:设置元素背景颜色background-image:将图片设置为背景background-position:设置背景图片起始位置background-repeat:设置背景图片是否及如何重复background-origin:规定背景图片的定位区域background-clip:规定背景的绘制区域background-si

26、ze:规定背景图片尺寸bodywidth: 140px; /设置内容显示宽度 background-image: url("image01.jpg"); /设置图像背景 background-size: 100px,100px; /设置背景图尺寸background-repeat: no-repeat; /禁止背景图重复 background-position: right top; /在屏幕右边显示背景图，从图像顶部开始显示，也可设置数值 background-attachment: fixed; /禁止背景图随着页面滚动而滚动CSS轮廓用于突出元素outline:设置轮

27、廓属性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

28、-rap:规定文本的换行规则<body> <div> <h2>chachaxueyuan</h2> <p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p> </div></body>CSS设置：h2 text-indent: -2em; /首行缩进负2个像素 padding-left: 2em; /文本缩进2个像素 text-transform: uppercase; /文本转换为大写字母p padding-left: 2em; text-shadow: 5px 5px 1px #FF000

29、0;/文字阴影距左、距上、像素、颜色值 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-decor

30、ation:大多用于去除链接中的下划线设置背景颜色：background-color<body> <a href="</body>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

31、:列表类型，如圆圈<body> <ul class="ul1"> <li>大狗狗</li> </ul> <ul class="ul2"> <li>大叉叉</li> </ul></body>CSS样式：ul li list-style-image: url("image/icon.gif"); /图片做标志ul.ul1 list-style-position: inside; /往里面靠一点ul.ul2 list-st

32、yle-position: outside; /往左外靠一点2.8. CSS表格<body> <table id="tb"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>大叉叉</td> <td>28</td> <td>男</td> </tr> <tr class="alt&qu

33、ot;> <td>大狗狗</td> <td>5</td> <td>男</td> </tr> </table></body>CSS样式:#tb width: 400px; border-collapse: collapse; /折叠边框,即设置为单条边框#tb th /表头 border: 1px solid blue; /边框宽度 height: 30px; text-align: center; /文字居中 background-color: antiquewhite;#tb t

34、d 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

35、-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 /右移，下移，透明度，颜色值 边框图片：b

36、order-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:配合偏移量使用，

37、其余内容不能占用该位置 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:

38、 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去掉元素两侧的浮动

39、 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：每列之间间隔的那条线

40、，以及线的格式颜色，如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; transi

41、tion: width 2s ,height 2s;div:hover width: 200px; height: 200px;3. JavaScript3.1. JavaScript基础JavaScript脚本可以放置在head和body中，通常放在head中作为js的引入，如：<script src="myjs.js"></script>myjs.js脚本中写具体内容：document.write("<h1>hello,dachacha</h1>")语法:语句之间最好用分号隔开.标识符必须以字母下划线或

42、美元符号开始.对大小写非常敏感.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.

43、运算符算术运算符：+在前面是先+再运算，+在后面是先运算再+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) /fal

44、se类型必须一致document.write(i!=j) /falsedocument.write(i!=j) /true类型必须一致document.write(!(i=j) /false表示取反document.write(i>9?”i大于9”:”i小于9”) /i大于9，为真则输出第一个，为假则输出第二个3.3. 语法3.3.1. if-else<script> var i=10; if(i>10) document.write("i>10"); else if(i<10) document.write("i<10&

45、quot;); else document.write("i=10"); </script>3.3.2. switch<script> var i=5; switch (i) case 1: document.write("i=1"); break; /跳出当前循环 case 2: document.write("i=2"); break; default: document.write("条件不满足case"); break; </script>3.3.3. for<sc

46、ript> var i=1,2,3,4,5,6; var j=0; for(;j<6;j+) document.write(ij+","); </script>for-in:<script> var i=1,2,3,4,5,6; var j; for(j in i) document.write(ij+"") </script>3.3.4. while<script> var i=1; while (i<10) document.write("i="+i+"&

47、lt;br/>"); i+; </script>do-while:会执行一次<script> var i=15; do document.write("i="+i+"<br/>"); i+; while (i<10) </script>3.3.5. break跳出整个循环,不再执行。<script> for (var i=0;i<10;i+) if (i=5) break; document.write("i="+i+"<br/&g

48、t;") </script>continue:跳出当前循环，继续下一个循环。<script> for (var i=0;i<10;i+) if (i=5) continue; document.write("i="+i+"<br/>") </script>3.3.6. 函数带参数的带返回值的函数，return会使函数停止执行，因此return后面的语句不再执行。<script> function demo(a,b) /定义函数 var sum=a+b; return sum; v

49、ar v1=demo(10,10); /<script>标签内调用函数 var v2=demo(20,20); alert(v1); alert(v2);</script>不带参数的不带返回值的函数：<script> function demo() /定义函数 var a=10; var b=10; var sum=a+b; alert(sum); </script><form> <input type="button" value="按钮" onclick="demo()&qu

50、ot;> /表单内调用函数，也可直接在<button>内调用</form>3.3.7. 变量局部变量：只能在当前函数中使用的变量，声明方式：在函数内部声明 var a=10;全局变量：任何地方都可以使用的变量，声明方式1：在函数外部 var n=10; 或 m=10; 声明方式2：在函数内部 x=10; 注意：需要在函数被调用后才会生效3.4. 异常捕获Try 发生异常的代码块；catch(err) 错误信息处理；<script> function demo() try alert(str); /str未声明 catch (err) alert(err

51、); /会提示出错误的原因 demo();</script>throw创建自定义错误：<form> <input id="txt" type="text"> <input id="btn" type="button" onclick="demo()" value="按钮"></form><script> function demo() try var e=document.getElementById(&

52、quot;txt").value; if (e="") throw "不能为空，请输入" catch (err) alert(err); </script>3.5. 事件JS事件：onclick:单击事件onMouseOver:鼠标经过事件onMouseOut:鼠标移出事件onChange:文本内容改变事件onSelect:文本框选中事件onFocus:光标聚集事件onBlur:移开光标事件onLoad:网页加载事件onUnload:关闭网页事件鼠标悬挂显示hello，鼠标移出显示world。<div class="

53、div" onmouseover="onOver(this)" onmouseout="onOut(this)"></div> /this指向当前函数的指针<script> function onOver(ooj) /ooj局部变量 ooj.innerHTML="hello" function onOut(ooj) ooj.innerHTML="world" </script>getElementsByName()：通过name值获取当前元素内容geElement

54、sByTagName:通过具体元素，如<p>元素，获取元素内容<p name="pn">hello</p> /name可重复<p name="pn">hello</p><script> function getName() var count=document.getElementsByName("pn"); /创建数组对象 alert(count.length); var p=count0; p.innerHTML="world" getName();</script>getAttribute()：获取元素属性，如id的值setAttribute()：设置元素属性，如anode.setAttribute(“title”,”title的值”)childNodes()：访问子节点，子节点父节点是相对的parentNodes()：访问父节点得到列表ul的子节点列表项document.getElementsByTagName("ul")0.childNodes;createElement()：创建元素节点<scri

人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论