小菜鸟之HTML第一课

web项目javascript

前端网页web(人体结构)css

HTML负责前端网页结构html

Css负责网页样式前端

css引入java

内联样式引入web

内部样式后端

外部样式数组

三种基本引入器浏览器

id选择器安全

类选择器

标签选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Css标签样式</title>
 6     <!--内联样式引入使用标签<style>-->
 7     <style type="text/css" rel="stylesheet">
 8         h1{
 9         color:red;
 10         font-size:10px;
 11         }
 12         /*id选择器*/
 13         #id1{
 14             color:blue;
 15             font-size:10px;
 16         }
 17         /*类选择器*/
 18         .class{
 19             color:blue;
 20             font-size:10px;
 21         }
 22 
 23         /*内联样式*/
 24class1{
 25 
 26         }
 27 
 28     </style>
 29     <!--外部引入 link标签-->
 30     <link href="CSS/CSS1.CSS">
 31 
 32 </head>
 33 <body>
 34 <div>
 35 
 36     <h1 h1="h1">心之所向</h1>
 37     <!-- p  标签段落 paragraphs
 38     <br>自动换行-->
 39     <p id="id1">
 40         道可道很是道<br>
 41         名可名很是名<br>
 42         无名天地之始<br>
 43         有名天地之母  &nbsp;&nbsp;&nbsp;故常无欲以观其妙
 44         <!--&nbsp;空格,,,大于号&gt小于号&lt版权&copy双引号&quot水平线<hr>-->
 45     </p>
 46     <p class=".class">故常无欲以观其妙</p>
 47     <!--内部样式的引入style属性-->
 48     <p style="color:aquamarinefont-size: large">段落</p>
 49     <div>
 50         <a href="http://music.163.com/video?id=92808D4BD1E6C04EB6086055CF360F47&userid=1491164241" target="_blank">
 51        点击 </a>
 52 
 53     </div>
 54 </div>
 55  </body>
 56 </html>

伪类(鼠标与超连接进行交互时的样式):

鼠标未点击超连接 a:link{}

a:link,定义正常连接的样式;
a:visited,定义已访问过连接的样式;
a:hover,定义鼠标悬浮在连接上时的样式;
a:active,定义鼠标点击连接时的样式。

 1 a:link {
 2     color:#FF0000;
 3     text-decoration:underline;
 4 }
 5 a:visited {
 6     color:#00FF00;
 7     text-decoration:none;
 8 }
 9 a:hover {
 10     color:#000000;
 11     text-decoration:none;
 12 }
 13 a:active {
 14     color:#FFFFFF;
 15     text-decoration:none;
 16 }



背景样式

注意点:相对路径如何找到他

找同级

列表

有序列表<ol>

无序列表<ul>

自定义列表<dl>

 1 <div>
 2     <!--有序列表-->
 3     <ol>
 4         <li></li>
 5         <li></li>
 6         <li></li>
 7         <li></li>
 8     </ol>
 9     <!--无序列表-->
 10     <ul>
 11         <li></li>
 12         <li></li>
 13         <li></li>
 14         <li></li>
 15     </ul>
 16     <!--自定义列表-->
 17     <dl>
 18         <dt></dt>
 19         <dd></dd>
 20         <dd></dd>
 21         <dd></dd>
 22     </dl>
 23 
 24 </div>

表格

table tr 行 table rows;td table td

合并行 colspan

      列 row

 1 <div>
 2     <!--表格-->
 3     <table border="1">
 4         <tr><td colspan="2"></td><td></td></tr>
 5         <tr><td row="2"></td><td></td></tr>
 6         <tr><td></td><td></td></tr>
 7     </table>
 8 </div>



JS/



基本结构

<!DOCTYPE html> //第几个版本
<html lang="en">//嵌套:标签+属性+属性值
<head>
<meta charset="UTF-8">支持utf-8
<title>Title</title>//标题
</head>
<body>

</body>
</html>

注册表单


注释标签:对代码进行说明
<!-- 单行注释,也能够对多行文字进行注释 -->

经常使用格式标签

 
 1 <b>加粗</b>
 2 <i>斜体</i>
 3 <u>下划线</u>
 4 <s>删除线</s>
 5 <p>段落标签</p>
 6 <hr>:分割线
 7 <br>:换行
 8 <sup>上标</sup>
 9 <sub>下标</sub>
 10 <pre>保留当前格式样式</pre>
 11 <strong>(粗字体)强调文本</strong>
 12 
../:返回上一级(父级)目录

标题标签

 1 <h1>我是一级标题标签(最大)</h1>
 2 <h2>我是二级标题标签</h2>
 3 <h3>我是三级标题标签</h3>
 4 <h4>我是四级标题标签</h4>
 5 <h5>我是五级标题标签</h5>
 6 <h6>我是六级标题标签(最小)</h6>

列表标签

无序列表:
 1 <ul type="disc">    <!--disc:圆点circle圆圈square方块-->
 2    <li>列表项1</li>
 3    <li>列表项2</li>
 4    <li>列表项3</li>
 5 </ul>
有序列表:
 1 <ol type="1">   <!--1a/Ai/I-->
 2    <li>列表项1</li>
 3    <li>列表项2</li>
 4    <li>列表项3</li>
 5 </ol>
自定义列表:图文混排
 1 <dl>
 2    <dt>标题图片</dt>
 3    <dd>描述</dd>
 4 </dl>

CSS样式

  内嵌样式:放在<head>标签之间
语法:

 1 <style type="text/css">
 2 选择器名 {
 3       属性名:属性值;
 4    }
 5 </style>
 1 全部标签(*)
 2 * {
 3      padding:0px;   /*清除默认内边距*/
 4      margin:0px;    /*清除默认外边距*/
 5    }
 6 

文本属性

 1 line-height:20px;       /*行高*/
 2 text-align:center;      /*对齐:Left|right|center|justify*/
 3 text-decoration:none;   /*文本修饰None:默认|underline:定义文本下的一条线|overline:定义文本上的一条线|line-through:定义穿过文本下的一条线*/
 4 Letter-spacing:5px;     /*字母之间的间距*/
 5 Text-indent:40px;       /*首行的缩进方式:px/%*/

字体标签及属性

 
 1 <font>字体标签</font>
 2 
 3 <!--字体CSS属性-->
 4 <style type="text/css">
 5     font-size:字体大小经常使用单位px/%/em...);
 6     color:颜色;
 7     font-style:字体样式;
 8     font-family:字体系列;
 9     font-weight:字体粗细;
 10 </style>
 11 
 12 
例:<font size="6" color="#FF0000" face="微软雅黑">我是字体标签</font>

背景相关的属性

 1 background-color: red;      /*设置背景颜色*/
 2 background-image: url(图片路径);    /*设置背景图片(图片路径没有引号包裹)*/
 3 background-repeat: no-repeat;   /*设置背景的平铺方式:Repeat-x、repeat-y、no-repeat*/
 4 Background-attachment: Fixed;   /*设置滚动:Scroll、Fixed*/
 5 
 6 background-position: center;    /*设置背景的坐标,偏移量,如left、right、center、button*/
 7 background-position:100px -100px;
 8 /*第一值:左右偏移量,正:向右偏移,负:向左偏移;  9 第二值:上下偏移量,正:向下偏移,负:向上偏移*/
 10 
 11 background-size:cover;
 12 /*能够为px、%、cover、continue  13 cover: 不会形成图片失真,会铺满整个标签。  14 contain: 不会形成图片失真,不会铺满整个标签。  15 */
 16 
 17 opacity: 0.5;   /*设置透明度,范围0.0-1.0*/
 18 ontline:0 none; /*清除默认边框*/

超连接:

 1 <a href="网页的网址" target="_blank">超连接文字或图片</a>
 2 
 3 _blank:在新窗口打开网页
 4 _self:在当前自身窗口打开网页

邮件超连接

 1 <a href="mailto:cupwang@163.com">个人邮箱</a>

图片标签

 1 <img src="图片地址路径" width="宽度" height="高度" alt="加载失败提示文字"
 2 title="鼠标悬浮提示文字" border="边框大小" align="图片与周围文字的对齐方式top/middle/bottom/left/right"
 3  vspace="图片在垂直方向上与周围文字的间距"  hspace="图片在水平方向上与周围文字的间距"/>

锚点连接

 1 <a href="#锚点名">锚点连接跳转连接</a>
 2 <a name="锚点名">锚点名:要跳转到的位置</a>

图片滚动

 1 <marquee scrolldelay="时间延时毫秒" direction="滚动方向 up down left right">
 2 
 3 </marquee>

分隔窗口

 
 1 <frameset cols="20%,*"></frameset>      <!--左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整-->
 2 <frameset rows="20%,*"></frameset>      <!--上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整-->
 3 <frameset cols="20%,*"></frameset>      <!--分割左右两个框架-->
 4 <frameset cols="20%,*,20%"></frameset>  <!--分割左中右三个框架-->
 5 <frameset rows="20%,*"></frameset>      <!--分割上下两个框架-->
 6 <frameset rows="20%,*,20%"></frameset>  <!--分割上中下三个框架 -->
 7 
例:
 1 <frameset cols="20%,*">
 2     <frame src="1.html">
 3     <frame src="2.html">
 4 </frameset>

块级元素和行内元素

块级元素:凡是默认自动占满网页整行的元素(自动换行),称为块级元素

 1 <hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...

行内元素:不能占满网页整行的元素

 1 <font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...

表格标签

 1 tr:td单元格
 2 <table align="表格对齐方式" border="边框" bgcolor="背景颜色" height="高度" width="宽度" background="背景图片" bordercolor="边框颜色" cellspacing="单元格外边距" cellpadding="单元格内边距" colspan="合并栏(使用数字)" rowspan="合并列(使用数字)">
 3     <tr align="文本对齐方式">
 4         <td>1</td>
 5         <td>2</td>
 6     </tr>
 7     <tr>
 8         <td>3</td>
 9         <td>4</td>
 10     </tr>
 11 </table>
 12 
 13 
 14 
优先级:td > tr > table 跨行:<td rowspan="2">跨2行</td> 跨列:<td colspan="2">跨2列</td>

盒子模型

  网页中全部的元素都是盒子

盒子组成部分:
盒子边距

content:内容 padding:内边距 border:边框 margin:外边距

居中对齐:

 1 text-align: center; /*文本居中*/
 2 margin: 0px auto;   /*盒子水平居中*/

盒子属性

 
 1 height:高度       width:宽度
 2 
 3 paddingbordermargin:都有四个方向topbottomleftright;
 4 
 5 
例:
 1 <style type="text/css">
 2     padding-top:50px;
 3     border-left:50px;
 4     margin-right:50px;
 5 </style>
 6 <style type="text/css">
 7    width:200px;/*内容宽度*/
 8    height:150px;/*内容高度*/
 9    border-width:25px;/*边框宽度*/
 10    border-color:red;/*边框颜色 transparent:透明*/
 11    border-style:solid;/*边框样式 soild:实线,dashed:线虚线,dotted:点虚线*/
 12 </style>
 13 
 14 <style type="text/css">
 15     border:10px red solid;
 16     等价于 17     border-width:10px;
 18     border-color:red;
 19     border-style:solid;
 20 
 21 
 22     padding-top:50px;
 23     padding-bottom:100px;
 24     padding-left:50px;
 25     padding-right:100px;
 26 
 27     padding:50px;   /*内边距上下左右各50px*/
 28     padding:50px 100px;     /*第一个值:上下 第二个值:左右*/
 29     padding:50px 30px 100px;    /*第一个值:上 第二个值:左右 第三个值:下*/
 30     padding:10px 30px 50px 100px;   /*第一个值:上 第二个值:右 第三个值:下 第四个值:左 (顺时针方向)*/
 31 </style>
 32 

如何选定网页中某些或某个元素

选择器:

一、标签选择器:标签名,网页中全部这样的标签都具备相同的属性

 1 <style type="text/css">
 2 div {
 3       width:300px;      /*宽度*/
 4       height:250px;     /*高度*/
 5       border-width:10px;    /*边框宽度*/
 6       border-color:red;     /*边框颜色*/
 7       border-style:solid;   /*边框样式 solid:实线 dashed:虚线 dotted:点虚线*/
 8   }

二、ID选择器#+ID名,选择网页中惟一元素,命名规则同C语言 ,关键字:id

 1 #box2 {
 2       border-color:blue;
 3   }

三、类选择器.+类名,选择网页中具备相同类名的元素 ,关键字:class

 1 .style2 {
 2       background-color:green;
 3       border-color:black;
 4       border-style:dashed;
 5   }

四、伪类选择器:

 1 a:link      /* 未访问的连接 */
 2     a:visited   /* 已访问的连接 */
 3     a:hover     /* 鼠标移动到连接上 */
 4     a:active    /* 点击时的连接 */
 5     这四种不一样的状态必须按照固定的顺序写 6         :link  :visited  :hover  :active

五、通配符选择器(*)

 1 /* 清除网页默认样式 */
 2     *{
 3         margin: 0;
 4         padding: 0;
 5     }

选择器优先级:
  !important > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器默认属性

样式有三种使用方式:

内嵌样式:定义在该标签里面的

 1 <div style="width:300px; height:200px; border:5px solid blue; margin:0px auto;">
 2     <!-- 我是一个盒子 -->
 3 </div>

内部样式:定义在网页的<head>里面的

 1 <style type="text/css">
 2     p{
 3         background: green;
 4     }
 5 </style>
 6 <body>
 7     <P>Hello World!</P>
 8 </body>

外部样式:定义在网页以外的CSS文本里面的

 1 <link type="text/css" rel="stylesheet" href="css/newstyle.css"/>
样式使用的优先级为:

   行内样式表 > 内嵌样式表 > 外部样式表

字符实体

字符实体

表单元素:

<form action="要提交的网页" method="post/get"> </form> post:提交的数据不会在地址栏显示,安全性好,不限制提交数据的大小。 get:提交的数据会在地址栏显示,彻底性差,限制提交数据的大小。

  常见的表单元素包括文本框按钮下拉列表等。除下拉列表框多行文本域等少数表单元素外,大多数表单元素均使用<input>标签,只是他们的属性设置不一样,其统一用法以下:

 1 <input name="表单元素名称" type="类型" value="" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中"/>
 2 
 3 文本框: <input type="text" value="jack" maxlength="8" name="account" size="10" readonly="readonly"/>
 4 
 5 密码框:<input type="password" maxlength="8" name="pwd" size="10"/>
 6 
 7   若要实现多个单选按钮只选中一个前提是保证name属性值是同样的若多个单选按钮都有checked="checked",以最后一个单选按钮为准 8 单选按钮:<input type="radio" name="sex" value="" checked="checked"/>
 9 
 10 复选框:<input type="checkbox" name="hobby" value="篮球" checked="checked"/>
 11 
 12 文件域:<input type="file" name="photo"/>
 13 

下拉列表

 1 <select name=”指定列表的名称size=”行数”>
 2 <option value=”可选择的值selected=“selected”>显示项的内容</option>
 3 <option value=”可选择的”>显示项的内容</option>
 4     ……
 5 </select>

多行文本域

 1 <textarea name=”指定名称cols=”列数rows=”行数”>
 2     //文本域的内容
 3 </textarea>

重置、提交与普通按钮,图像按钮:

 1 <input type="submit"  value="提交按钮的显示值" name="名称"/>
 2 <input type="reset"   value="重置按钮的显示值" name="名称"/>
 3 <input type="button"  value="普通按钮的显示值" name="名称"/>
 4 <input type="image" src="imags/Logo.png"/>

去掉页面中的滚动条

 1 <body scroll="no">   <!--去掉所有滚动条-->
 2 <body style="overflow-y:hidden">   <!--去掉页面右边的滚动条-->
 3 <body style="overflow:scroll; overflow-y:hidden">
 4 <body style="overflow-x:hidden">   <!--去掉页面底部的滚动条-->
 5 <body style="overflow:scroll; overflow-x:hidden">

自定义滚动条

 1 body {
 2     Scrollbar-3DLight-Color: #999999;    /*滚动条亮边的颜色*/
 3     Scrollbar-Arrow-Color: #CCCCCC;      /*上下按钮上三角箭头的颜色*/
 4     Scrollbar-Base-Color: #E1E1E1;       /*滚动条的基本颜色*/
 5     Scrollbar-Shadow-Color: #CCCCCC;     /*立体滚动条阴影的颜色*/
 6     Scrollbar-DarkShadow-Color: #333333; /*滚动条动条阴影的颜色*/
 7     Scrollbar-Face-Color: #999999;       /*滚动条凸出部分的颜色*/
 8     Scrollbar-Highlight-Color: #F2F2F2;  /*滚动条空白部分的颜色*/
 9     Scrollbar-Track-Color: #F2F2F2;      /*滚动条的背景颜色*/
 10 }
 11 

javasript 负责交互行为,是一种基于对象和事件的脚本语言

特色:面向对象,事件驱动

面向对象:调用属性与方法

Windows

相似于object

Document

Location

History

事件驱动

引入javascript

内联方式嵌入

内部方式(js标签位置能够不限

外部方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascript</title>
 6     <!--内部引入-->
 7     <script type="text/javascript">
 8         /*使用document在网页正文输出,至关于print*/
 9         document.write("hello");
 10         document.write("<h1>hello</h1>")/*里面能够添加标签*/
 11         document.write("<p></p>")
 12 
 13     </script>
 14     <!--外部引入-->
 15     <script type="text/javascript" src="js/js1.js">
 16 
 17     </script>
 18 </head>
 19 <body>
 20 <div>
 21     <!--内嵌方式能够把javascript去掉-->
 22     <input onclick="javascript:document.write('输出')" type="button" name="button" value="点击">
 23 </div>
 24 </body>
 25 </html>
 1 <script type="text/javascript" >
 2         /*java 的变量声明和赋值,  3 * int i=1 */
 4         /*常见的number和string*/
 5         var a=1;
 6         var al;
 7         al=2;
 8         var b="rose";
 9         var c=null;
 10         var d=true;
 11         var c=undefined;
 12         var f=object;
 13 /*scanner调用*/
 14         var i= window.prompt("请输入第一个数字")
 15         var j= prompt("请输入第二个数字")
 16         /*s数据类型转换 string number*/
 17         var i1=window.parseInt(i);
 18         var j1=window.parseInt(j);
 19         var result=i1+j1;
 20         /*页面输出值*/
 21         document.write("计算结果" + result)
 22 
 23     </script>



html的变量与赋值

 1   1 <script type="text/javascript" >
 2   2         /*java 的变量声明和赋值,  3 3 * int i=1 */
 4   4         /*常见的number和string*/
 5   5         var a=1;
 6   6         var al;
 7   7         al=2;
 8   8         var b="rose";
 9   9         var c=null;
 10  10         var d=true;
 11  11         var c=undefined;
 12  12         var f=object;
 13  13 /*scanner调用  14 14 var i= window.prompt("请输入第一个数字")  15 15 var j= prompt("请输入第二个数字")  16 16 /*s数据类型转换 string number*/
 17  17         var i1=window.parseInt(i);
 18  18         var j1=window.parseInt(j);
 19  19         var result=i1+j1;
 20  20         /*页面输出值*/
 21  21         document.write("计算结果" + result)
 22  22
 23  23     </script>
 24 

下标,元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5 
 6     <title>Title</title>
 7 <script type="text/javascript">
 8     <!--string对象-->
 9     var str="asdfgs";
 10     var str1=str.substring(3,4);/*左闭右开*/
 11     document.write(str1);
 12     document.write("<br>");/*隔行*/
 13     var numl=str1.length
 14 
 15     document.write(numl);
 16     var num2=str.indexOf("a")/*下标*/
 17     document.write("<br>")
 18     document.write(num2);
 19     var str3=str.charAt(4);
 20     document.write("<br>"+str3);/*根据下标找元素*/
 21 </script>
 22 
 23 </head>
 24 <body>
 25 
 26 </body>
 27 </html>
HTML数组
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript">
 7         /*数组的建立*/
 8         var arr=new Array(4);
 9         arr[0]="a";
 10         arr[1]="b";
 11         arr[2]="c";
 12         arr[3]="d";
 13 /*数组建立*/
 14         var arr1=new Array("a","b")
 15         document.write(arr)
 16         document.write("<br>"+arr1);
 17 
 18         var arr2=["a0","as"]
 19         document.write("<br>"+arr2);
 20     </script>
 21 </head>
 22 <body>
 23 
 24 </body>
 25 </html>

运算

2.运算符:

数学运算符:+  -  *  /  %  ++  --;

关系运算符:==  !=  >=  <=  >  <;

逻辑运算符:&&  ||  !;

其余运算符:+=  -=  *=  /=  %=  ?:;

输入proment

输出write,scanner

语句:


 1 通常分为顺序分支和循环语句 2 
 31分支语句if 4 
 5 if判断条件 6 
 7 {
 8 
 9     知足条件要执行的语句
 10 
 11 }
 12 
 13 else
 14 
 15 {
 16 
 17     不知足条件时执行的语句
 18 
 19 }
 20 
 21 
 22 
 232循环for语句 24 
 25 for初始条件循环条件状态改变 26 
 27 {
 28 
 29     循环体
 30 
 31 }
 32 
 33 
 34 
 353问题类型穷举迭代 36 
 374两个关键词break  continue 38 
 395若是要输出某一参数的值输出的值是"+a+""+b"
 40 
 41 
 42 
 43 
 44 
 45 <script>function visible1()
 46 {
 47     $("p").hide();
 48 };</script></head><body>
 49 <input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>


函数:

  函数的四要素:名称、输入、返回值、加工。

  定义函数:function add(形参){函数体}   //函数名为add,输入为参数的形式,返回值能够是var类型,也能够return一个返回值。

  函数必须通过调用才能执行。函数的调用:add(实参)。

  *放在头部也能够读取(最早读取头部)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数</title>
 6     <script type="text/javascript">
 7         /*w无参函数自定义*/
 8         function study() {
 9             for(var i=0;i<5;i++){  10 document.write("<h1>欢迎</h1>")  11 }  12  13 }  14 /*有参函数*/  15 function study1(count) {  16 for (var i = 0; i < count; i++) {
 17                 document.write("<h1>欢迎</h1>")
 18 
 19             }
 20         }
 21     </script>
 22 </head>
 23 <body>
 24 <!--调用 无参函数经过触发方式onclick是事件属性-->
 25 <div>
 26     <input onclick="study()" type="button" name="button" value="按钮">
 27 </div>
 28 <!--有参函数-->
 29 <div>
 30     <input onclick="study1(prompt('请输次数',''))" type="button" name="button" value="按钮1">
 31 </div>
 32 </body>
 33 </html>

image




web项目    前端网页web(好比人物)        html 负责前端网页的结构        基本结构(注意点:嵌套;标签+属性)        <DOCTYPE html>        <html lang="en">           <head>              <meta charset="UTF-8">              <title></title>           </head>           <body>           </body>        </html>        css   负责网页的样式            css引入                内联样式引入                内部样式                外部样式            三种基本选择器                id选择器                类选择器                标签选择器            字体样式:字体风格 字体粗细 字体大小 字体类型            文本样式:文本颜色 首行缩进 文本水平对齐 文本修饰            背景样式: 背景颜色 背景位置 背景图片                注意点:相对路径如何找到对方                    找同级(找兄弟),再根据兄弟找兄弟的儿子                    ../  表示 返回上一级(找爸爸)            伪类(鼠标与超连接进行交互时的样式)                鼠标未点击超连接 a:link                鼠标悬浮其上 a:hover                鼠标点击超连接不放 a:active                鼠标已经点击过超连接 a:visited            列表                有序列表 ol o ordered l list;li list                无序列表 ul u unordered l list; li list                自定义列表 dl defined l list;dt defined title;dd defined data             表格                table tr行 table rows ; td列 table data                合并单元格(跨列 colspan  跨行 rowspan;)             表单(重点,要默写出来)                经常使用标签+type+name+value        javaSript 负责交互行为,是一种基于对象和事件驱动的脚本语言                (特色:面向对象,事件驱动)                面向对象的好处:调用方法和属性                Window(相似于Object)                    Document                    Location                    History                    String                事件驱动                引入javascript                    内联方式(在属性值内设置js,通常不推荐)                    内部方式(js标签,位置能够不限)                    外部方式(在项目中通常推荐使用,须要配合js标签+src属性)                输入和输出                    prompt(,)                    write()/alert("我是警示框,优先输出")                6大基本数据类型(相似java的8大基本数据类型)                    number                    string                    boolean                    null                    undefined                    object                数据类型的转换(string--->number)                string的经常使用方法                    subString()                    charAt()                    indexOf()                    split()                    length                数组(声明+赋值,3种写法)                运算符号                    赋值运算 =                    基本运算 + - * / % ++ --                    比较运算                    逻辑运算 与或非                逻辑流程控制                    条件语句                    循环语句                    中断语句                函数和函数调用(相似java中方法)    后端web
相关文章
相关标签/搜索