整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一文帶你解讀?JavaScript的基本用法

          相信做網站對JavaScript再熟悉不過了,它是一門腳本語言,不同于Python的是,它是一門瀏覽器腳本語言,而Python則是服務器腳本語言,我們不光要會Python,還要會JavaScript,因為它對做網頁方面是有很大作用的。


          JavaScript的基本用法

          1.如何使用Js腳本

          1).引入Js文件

          在頭部標簽中導入腳本標簽并指明腳本文件路徑

          <head><script src="XXX.js"></script></head>

          2).標簽中使用

          <body><script >javascript 語句</script></body>
          <head><script >javascript 語句</script></head>

          2.數據類型

          JavaScript的數據類型分為:

          string
          number
          boolean
          array
          object
          null
          undefined

          3.注釋

          1).單行注釋

          以“//”開頭,后面接注釋語句,只能注釋一行

          2).多行注釋

          /* 注釋語句,可注釋多行 */

          4.特殊符號

          \n 換行
          \t 制表符 
          \b 空格 
          \r 回車 
          \f 換頁符
          \\ 反斜杠 
          \' 單引號
          \" 雙引號
          \0 x 八進制代碼x表示的字符(n是0到7中的一個八進制數字)
          \x x 十六進制代碼x表示的字符(n是0到F 中的一個十六進制數字)
          \u x 十六進制代碼x表示的Unicode字符(n是0到F 中的一個十六進制數字)

          5.變量聲明

          1).Var聲明

          var ss='fsdf'  外部聲明的變量可在全局使用
          var ss        也可以不聲明值,也不會產生錯誤,唯一的遺憾是會產生變量提升

          2).Const 聲明

          const ss=123   不存在變量提升,可生成塊級作用域 ,常用于聲明常量,聲明后必須賦值

          3).Let 聲明

          let ss=123   不存在變量提升,可生成塊級作用域,常用于聲明變量,

          6.控制結構語句

          1).If ......Else

          var aa=12
          if(aa>3){console.log(1)}
          else{alert(1)}

          可以看出與我們的Python語句略有不同。

          2).Do.....While

          var i=1
          do
           {
           i++;
           console.log(i);
           }
          while(i<5)

          3).While

          var i=1
          while(i<5){
              i++;
              console.log(i)
          }

          4).For

          for(let i=1;i<6;i++){
              console.log(i)
          }

          5).For....In...

          #打印了document對象的所有方法
              for(y in document)
                  {
                      console.log(y)
                  }

          6.Break、Continue

          break    立即終止循環
          continue 退出當前循環進入下一個循環

          7).標簽語句

          指的是標簽后面的語句可由判斷結果自行決定什么時候結束

          var i=0
          label:while(i<10){
              i++;
              if(i==5){
                  break label;
          }
              else{
                  console.log(i)
          }
          }

          8).With語句

          相當于Python中的上下文管理器

          var aa='fasdffsa'
                  with(aa){
                      console.log(aa)
                  }

          9).Switch語句

          var aa=[1,2,3]
              switch(aa){
                  case 1:console.log(1);
                  break;
                  case 2:console.log(2);
                  break;
                  case 3:console.log(3);
                  break;
                  default:console.log('fas');
          }

          10).For....of

          for(let val of iterable){
          console.log(val)
          }

          11).For each ..... in

          var sum = 0;
          var obj = {prop1: 5, prop2: 13, prop3: 8};
          for each (var item in obj) {
            sum += item;
          }
          print(sum); // 輸出"26",也就是5+13+8的值
          
          
          
          
          obj.forEach(function(val,item,array){
                array[item]=val
          })


          總結

          這篇文章主要結束了JavaScript的導入、數據類型、注釋、變量和控制語句。下一篇文章,我們繼續介紹JavaScript,敬請期待!

          端學習第三天 2016.12.02

          每天我們瀏覽網頁的時候,看到一個標題,點進去就能看到內容,你好奇它是怎么來到我們的面前嗎?它就是html超文本鏈接

          HTML 超鏈接(鏈接)

          HTML使用標簽 <a>來設置超文本鏈接。

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

          當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。

          在標簽<a> 中使用了href屬性來描述鏈接的地址。

          默認情況下,鏈接將以以下形式出現在瀏覽器中:

          · 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線

          · 訪問過的鏈接顯示為紫色并帶上下劃線

          · 點擊鏈接時,鏈接顯示為紅色并帶上下劃線

          提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

          HTML 鏈接 - target 屬性

          使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

          HTML 連接- id 屬性

          id屬性可用于創建在一個HTML文檔書簽標記。

          提示: 書簽是不以任何特殊的方式顯示,在HTML文檔中是不顯示的,所以對于讀者來說是隱藏的。

          基本的注意事項 - 有用的提示

          Note: 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然后創建一個新的請求,就像這樣:。

          Html頭部

          HTML <head> 元素

          <head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。

          可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

          HTML <title> 元素

          <title> 標簽定義了不同文檔的標題。

          <title> 在 HTML/XHTML 文檔中是必須的。

          <title> 元素:

          · 定義了瀏覽器工具欄的標題

          · 當網頁添加到收藏夾時,顯示在收藏夾中的標題

          · 顯示在搜索引擎結果頁面的標題

          HTML <base> 元素

          <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          HTML <link> 元素

          <link> 標簽定義了文檔與外部資源之間的關系。

          HTML <style> 元素

          <style> 標簽定義了HTML文檔的樣式文件引用地址.

          HTML <meta> 元素

          meta標簽描述了一些基本的元數據。

          <meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。

          META元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。

          元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。

          <meta>一般放置于 <head>區域

          HTML <script> 元素

          <script>標簽用于加載腳本文件,如: JavaScript。

          <script> 元素在以下章節會詳細描述。

          簡單記于下表

          只看這些,可能會有一些迷茫,這都是什么意思啊,該怎么用啊,下面我舉一些例子,有助于大家能很好的理解。

          <!DOCTYPE html>

          <html>

          <head>

          <title>Title of the document</title>

          </head>

          <body>

          The content of the document......

          </body>

          </html>

          以上是關于<head>的一個小例子。

          <head>

          <base target="_blank">

          </head>

          <base>的一個例子。

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css">

          </head>

          <link>的用法

          <head>

          <style type="text/css">

          body {background-color:yellow}

          p {color:blue}

          </style>

          </head>

          <style>的用法

          看完這些是不是感覺好多了,只聽這些空洞的東西確實是很難懂,我也是,不過看過例子后,自己再練習之后,那感覺慢慢的就上來了。

          HTML 樣式- CSS

          CSS(Cascading Style Sheet)可譯為“層疊樣式表”或“級聯樣式表”,它定義如何顯示 HTML 元素,用于控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離,極大提高了工作效率 。樣式存儲在樣式表中,通常放在<head>部分或存儲在 外部CSS文件中。作為網頁標準化設計的趨勢,CSS取得了瀏覽器廠商的廣泛支持,正越來越多的被應用到網頁設計中去。

          網頁現在的新標準是W3C。目前的模式是html+css+javascript,如何理解呢,就是html是網頁的結構,CSS是網頁的樣式,javascript是行為。結構就是蓋房子先要把結構建出來,然后用CSS來裝飾。其實你在用dreamweaver做網頁時就已經用到了CSS,比如你用DW的屬性面板來設置一個字的字體、顏色和大小,當你選好后,就會自動生成一個.style1的紅色代碼,在<style></style>之間不知道你注意過沒有,這就是CSS。

          CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式.

          如何使用CSS

          CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.

          CSS 可以通過以下方式添加到HTML中:

          · 內聯樣式- 在HTML元素中使用"style"屬性

          · 內部樣式表 -在HTML文檔頭部 <head> 區域使用<style>元素 來包含CSS

          · 外部引用 - 使用外部 CSS文件

          最好的方式是通過外部引用CSS文件.

          內聯樣式

          當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

          HTML樣式實例 - 背景顏色

          背景色屬性(background-color)定義一個元素的背景顏色:

          例如:

          <!DOCTYPE html>

          <html>

          <body style="background-color:yellow;">

          <h2 style="background-color:red;">This is a heading</h2>

          <p style="background-color:green;">This is a paragraph.</p>

          </body>

          </html>

          HTML 樣式實例 - 字體, 字體顏色 ,字體大小

          我們可以使用font-family(字體),color(顏色),和font-size(字體大小)屬性來定義字體的樣式:

          現在通常使用font-family(字體),color(顏色),和font-size(字體大小)屬性來定義文本樣式,而不是使用<font>標簽。

          內部樣式表

          當單個文件需要特別樣式時,就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:

          <head>

          <style type="text/css">

          body {background-color:yellow;}

          p {color:blue;}

          </style>

          </head>

          外部樣式表

          當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個文件來改變整個站點的外觀。

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css">

          </head>

          HTML 圖像- 圖像標簽(<img>)和源屬性(Src)

          在 HTML 中,圖像由<img> 標簽定義。

          <img> 是空標簽,意思是說,它只包含屬性,并且沒有閉合標簽。

          要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。

          定義圖像的語法是:

          <img src="url" alt="some_text">

          URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3cschool.cn 的 images 目錄中,那么其 URL 為 http://www.w3cschool.cn/images/boat.gif。

          T瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間,那么瀏覽器會首先顯示第一個段落,然后顯示圖片,最后顯示第二段。

          HTML 圖像- Alt屬性

          alt 屬性用來為圖像定義一串預備的可替換的文本。

          替換文本屬性的值是用戶定義的。

          <img src="boat.gif" alt="Big Boat">

          在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。

          HTML 圖像- 設置圖像的高度與寬度

          height(高度) 與 width(寬度)屬性用于設置圖像的高度與寬度。

          屬性值默認單位為像素:

          <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

          提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度,頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小,加載頁面時有可能會破壞HTML頁面的整體布局。

          基本的注意事項 - 有用的提示:

          注意: 假如某個 HTML 文件包含十個圖像,那么為了正確顯示這個頁面,需要加載 11 個文件。加載圖片是需要時間的,所以我們的建議是:慎用圖片。

          注意: 加載頁面時,要注意插入頁面圖像的路徑,如果不能正確設置圖像的位置,瀏覽器無法加載圖片,圖像標簽就會顯示一個破碎的圖片。

          HTML 表格

          表格由<table>標簽來定義。每個表格均有若干行(由<tr> 標簽定義),每行被分割為若干單元格(由<td>標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

          表格實例

          <table border="1">

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下::

          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2

          HTML 表格和邊框屬性

          如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。

          使用邊框屬性來顯示一個帶有邊框的表格:

          <table border="1">

          <tr>

          <td>Row 1, cell 1</td>

          <td>Row 1, cell 2</td>

          </tr>

          </table>

          HTML 表格表頭

          表格的表頭使用 標簽進行定義。

          大多數瀏覽器會把表頭顯示為粗體居中的文本:

          <table border="1">

          <tr>

          <th>Header 1</th>

          <th>Header 2</th>

          </tr>

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下:

          Header 1Header 2
          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2

          哇哦,今天干貨有點多,我得好好消化一下,各位學友,歡迎留言討論,還有路過的大神,看到不正確的地方一定要留言指出,指引我們如何能更好的學習前端,對于這個與時俱進的技術,每天的不學習就是一種退步。

          lt;div>層元素
          簡介: 在頁面層元素<div>用來將頁面內容分割成各個獨立的部分是塊級元素。
          用途:在每個<div>元素中,不僅可以包含文本內容,也可以包含圖片、表單等其它內容,屬性:在默認的情況下,<div>元素所包含的內容,將在新的一行顯示
          總結:塊級元素,獨占一行

          id 標記屬性
          簡介:給元素定義唯一標識
          好處:方便在元素中使用行為
          擴展:類似class屬性的作用,用來調用級聯樣式表

          class 調用樣式屬性
          簡介:class屬性用來調用層疊樣式表,也可以調用使用<link>元素鏈接外部樣式表。
          好處:方便使用和更改

          實例:

          
            <!DOCTYPE html>
          <html lang="zh-CN">
          	<head>
          		<meta charset="utf-8" />
          		<title>demo</title>
          		<style>
          			.idepy{
          				color: sandybrown;
          				font-size: 35px;
          			}
          		</style>
          	</head>
          	<body>
          <p class="idepy">伊迪派</p>
          	</body>
          </html>

          style 樣式屬性
          簡介:頁面主體元素的樣式屬性,用來給頁面內容定義級聯樣式表.
          用途:包含style屬性、class屬性
          理解:style是樣式,想創建那個元素的樣式,就寫上那個元素的類型進行設置

          實例:

          <!DOCTYPE html>
          <html lang="zh-CN">
          	<head>
          		<meta charset="utf-8" />
          		<title>demo</title>
          		<style>
          			body{
          				color: red;
          				font-size: 55px;
          			}
          		</style>
          	</head>
          	<body>
          伊迪派
          	</body>
          </html>

          align 對齊屬性
          簡介:對齊屬性用來定義內容的水平對齊方式
          用途:使用對齊屬性,不僅可以控制文本內容的對齊,也可以控制文本中圖片等內容的對齊

          實例:

          <!DOCTYPE html>
          <html lang="zh-CN">
          	<head>
          		<meta charset="utf-8" />
          		<title>demo</title>
          		<style>
          			body{
          				text-align: center;
          			}
          		</style>
          	</head>
          	<body>
          我會居中顯示
          	</body>
          </html>

          <p> 段落元素
          簡介:用來定義一個段落
          用途:可以包含文本、圖片,以及用來修飾文本的元素,被<p>元素包含的內容,默認的顯示方式是換行顯示
          理解:塊級元素,獨占一行

          實例:

          <p>段落元素</p>
          <p>段落元素</p>
          <p>段落元素</p>
          <p>段落元素</p>

          <br> 換行元素
          簡介:換行元素<br>用來使被分割的文本換行顯示

          實例:

           換行元素<br>我在下一行

          <pre> 保留格式元素
          簡介:保留格式元素<pre>用來使包含的內容,按照文檔源代碼的格式顯示
          用法:因為瀏覽器的默認顯示方式中,將壓縮多個空格為一個,同時忽略換行等空白符號

          實例:

          <pre>
          	我是測試文本                                     前面空格被保留
          	我不需要換行符
          </pre>

          <hr> 水平分割線元素
          簡介:水平分割線元素<hr>用一條一定高度的分割線,分割頁面內容
          高度屬性:水平分割線的厚度屬性size,用來定義水平分割線的粗細
          寬度屬性:水平分割線的寬度屬性width,用來定義水平分割線的寬度
          注意:style內定義高度寬度屬性徐加px

          實例:

          <hr size="5" width="500">

          <b> 加粗元素
          簡介:用來使包含的文本加粗顯示
          理解:是一個物理標簽,它所包圍的字符將被設為bold(粗體)

          實例:

          <b>加粗元素</b>

          <i> 斜體顯示元素
          簡介:用來使包含的文本內容以斜體的方式顯示
          理解:是一個物理標簽,它所包圍的字符將被設為Italic(斜體)

          實例

          <i>斜體顯示元素</i>

          <em> 斜體強調元素

          <em>斜體強調元素</em>

          <strong> 加粗強調元素
          簡介:是一個邏輯標簽,它的作用是加強字符的語氣一般來說,加強字符的語氣是通過將字符變為bold(粗體)來實現的。

          實例:

          <strong>加粗強調元素</strong>

          <big> 放大元素
          簡介:放大元素<big> 用來使包含的文本增大一號顯示
          注意:當文本內容已經是最大字號時,將不能繼續增大。

          實例:

          我是沒有放大<big>我是被放大一號的<big>

          <small> 縮小元素
          簡介:縮小元素<small> 用來使包含的文本縮小一號顯示
          注意:當文本內容已經是最小字號時,將不能繼續變小。

          實例:

          我是沒有縮小<small>我是被縮小一號的</small>

          <sup> 上標元素
          簡介:用來使包含的文本內容以上標的方式顯示
          用途:元素中的文本的底部,將在普通文本的一半高度上顯示

          實例:

          上標元素<sup>我是上標部分</sup>

          <sub> 下標元素
          簡介:用來使包含的文本內容以下標的方式顯示
          用途:元素中的文本的頂部,將在普通文本的一半高度上顯示

          實例:

          下標元素<sub>我是下標部分</sub>

          主站蜘蛛池模板: 亚洲av成人一区二区三区在线观看| 波霸影院一区二区| 精品欧洲AV无码一区二区男男 | 区三区激情福利综合中文字幕在线一区亚洲视频1 | 亚洲国产精品成人一区| 亚洲国产综合精品一区在线播放| 亚洲AV日韩精品一区二区三区| 人妻免费一区二区三区最新| 亚洲视频一区调教| 中文字幕日韩欧美一区二区三区| 国产成人精品亚洲一区| 中文字幕无线码一区| 精品无码日韩一区二区三区不卡| 亚洲国产情侣一区二区三区| 日韩精品一区二区三区老鸦窝| 国产91精品一区二区麻豆亚洲| 无码人妻AV免费一区二区三区| 亚洲欧美国产国产综合一区| 国产成人高清视频一区二区 | 日韩成人无码一区二区三区| 精品女同一区二区| 日韩爆乳一区二区无码| 国产一区二区三区免费看| 日本一区二区不卡视频| 爆乳无码AV一区二区三区| 国产一区三区三区| 人妻视频一区二区三区免费| 熟女性饥渴一区二区三区| 国产精品久久无码一区二区三区网 | 成人在线观看一区| 久久人妻内射无码一区三区| 日本精品啪啪一区二区三区| 亚洲国产一区二区三区青草影视| 无码国产精品一区二区高潮| 一区二区在线观看视频| 亚洲国产高清在线一区二区三区 | 福利电影一区二区| 中文字幕一区二区三匹| 国产在线一区二区三区| 在线日韩麻豆一区| 日韩一区二区三区四区不卡|