小菜鳥之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
相關文章
相關標籤/搜索