天天看點
傳回

前端HTML+CSS+JS+JQuery+Ajax_JSON01_HTML02_CSS03_JavaScript04_jQuary05_Ajax_JSON

前端HTML+CSS+JS+JQuery+Ajax_JSON

  • 01_HTML
    • 一、HTML簡介
      • 1.1、什麼是HTML
      • 1.2、HTML基本結構
        • 1.2.1、如何編輯
        • 1.2.2、第一個HTML
        • 1.2.3、如何運作
        • 1.2.4、HTML書寫規範
    • 二、HTML頭部
      • 2.1、說明
      • 2.2、内部常見元素
        • 2.2.1、title（掌握）
        • 2.2.2、meta（掌握）
        • 2.2.3、style（暫時了解）
        • 2.2.4、link（暫時了解）
        • 2.2.5、script（暫時了解）
    • 三、HTML基本标簽（掌握）
      • 3.1、注釋
      • 3.2、排版标簽
      • 3.3、标題标簽
      • 3.4、基本文字标簽
      • 3.5、文本格式化标簽
      • 3.6、清單标簽
      • 3.7、圖形标簽
      • 3.8、連結标簽
    • 四、HTML表格标簽（掌握）
      • 4.1、表格的作用
      • 4.2、表格組成
      • 4.3、跨行跨列的表格
    • 五、HTML表單标簽（掌握）
      • 5.1、什麼是表單
      • 5.2、基本架構
      • 5.3、input元素
      • 5.4、select 元素(下拉清單)
      • 5.5、textarea元素(文本域)
    • 六、特殊字元
  • 02_CSS
  • 03_JavaScript
  • 04_jQuary
  • 05_Ajax_JSON

01_HTML

一、HTML簡介

網頁，是網站中的一個頁面，通常是網頁是構成網站的基本元素，是承載各種網站應用的平台。通俗的說，網站就是由網頁組成的。通常我們看到的網頁都是以htm或html字尾結尾的檔案，俗稱HTML檔案。

1.1、什麼是HTML

HTML全稱：Hyper Text Markup Language(超文本标記語言)

  • 超文本：頁面内可以包含圖檔、連結，甚至音樂、程式等非文字元素（超出文本的範疇）；
  • 标記：标簽，不同的标簽實作不同的功能
  • 語言：人與計算機的互動工具

1.2、HTML基本結構

前端HTML+CSS+JS+JQuery+Ajax_JSON01_HTML02_CSS03_JavaScript04_jQuary05_Ajax_JSON

檔案字尾

.htm

或

.html

；

完整的頁面包含如下内容：

  • 文檔聲明，就按照圖檔中的寫法寫就可以，表明這是一個符合HTML5規範的網頁；
  • 成對的HTML标簽，HTML标簽中包括如下内容：
    • 成對的head标簽，類似人的頭部；
    • 成對的body标簽，類似人的軀幹。

head中可以設定一些相關資訊（比如編碼、标題）；

body設定顯示在頁面上的内容。

1.2.1、如何編輯

建立普通檔案，修改字尾為

.htm

或

.html

，可以使用任何文本編輯器進行編輯

  • 記事本
  • NotePad++
  • Editplus
  • Sublime

也可以使用IDE進行編輯

  • VS code
  • WebStorm
  • Hbuilder
  • Idea

1.2.2、第一個HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一個網頁</title>
</head>
<body>
    <p style="color: blue; border: 1px solid black;">hello world</p>
</body>
</html>

上面的代碼實作了字型變色，添加邊框的效果，了解就可以。

1.2.3、如何運作

右鍵選擇常見的浏覽器都可以運作，有些IDE内嵌了浏覽器，也可以直接在IDE内運作；

建議使用新版本的Edge、Chrome、FireFox進行學習，不要使用偏門的國産浏覽器。強烈建議使用新版本的Edge或Chrome。

1.2.4、HTML書寫規範

  • HTML元素标簽用

    <>

     括起來，通常情況下

    <>

     表示開始，

    </>

     表示結束；
  • 部分标簽不是成對存在，而是在标簽内結束:

    <br/>、<hr/>、<img/>

     ；
  • 标簽内部可以添加屬性 
<标簽名 屬性名1="屬性值1" 屬性名2="屬性值2">
    網頁元素
</标簽名>
  • 标簽不區分大小寫；
  • 标簽與标簽之間可以嵌套；
  • 标簽可以通過設定屬性達到頁面設計的要求；
  • HTML的主體标簽是

    <body></body>

     ，在浏覽器中顯示的文字内容編寫在

    <body>

     标簽中，這些内容包括普通的文字、空格符号和特殊符号以及頁面的注釋。

二、HTML頭部

2.1、說明

<head>

開始标記，

</head>

結束标記，作用範圍是整篇文檔，且head中包含的内容不會顯示在浏覽器的視窗中。

2.2、内部常見元素

2.2.1、title（掌握）

文法結構：

<title>...</title>

說明頁面的用途，顯示在浏覽器的标題欄中

2.2.2、meta（掌握）

元資訊元素，用來指定有關這個文檔的相關資訊，包括頁面的文字編碼，關鍵字，版權和作者等資訊。

通常我們使用該标簽設定編碼，這個編碼告訴浏覽器以什麼編碼格式解析頁面中的字元。

2.2.3、style（暫時了解）

建立目前頁面中所使用的樣式

<style type="text/css">
    ...
    ...
    ...
</style>

2.2.4、link（暫時了解）

調用其他文檔的内容，例如：引入外部css檔案。

2.2.5、script（暫時了解）

定義一段可執行腳本，完成相應的行為或引入外部腳本檔案。注意：script不僅可以放在head中，還可以放到body中

三、HTML基本标簽（掌握）

3.1、注釋 

<!-- 這是一個單行注釋 -->

<!-- 
    這是一個多行注釋
-->

作用：

  • 解釋說明；
  • 阻止代碼運作。

3.2、排版标簽

可用于實作簡單的頁面布局。

段落标簽

<p>這是一個段落</p>
<p>這是另一個段落</p>
<!-- 
    align屬性：
        left    左對齊
        center    居中
        right    右對齊
-->
<p align="left">這是一個段落</p>
<p align="center">這是一個段落</p>
<p align="right">這是一個段落</p>

水準線标簽

<!-- 這是一個水準線 -->
<hr/>

<!-- 
    width屬性：水準線的長度(兩種:第一種:像素表示；第二種，百分比表示) 
    size屬性：水準線的粗細 (像素表示，例如：10px)                             
    color屬性：水準線的顔色                                  
    align屬性：水準線的對齊方式
-->
<hr width="50%" size="5px" color="#0000FF" align="center"/>

3.3、标題标簽

随着數字增大文字逐漸變小，字型是加粗的，内置字号，預設占據一行。

<h1>這是一級标題</h1>
<h2>這是二級标題</h2>
<h3>這是三級标題</h3>
<h4>這是四級标題</h4>
<h5>這是五級标題</h5>
<h6>這是六級标題</h6>

一級标題字型最大，六級标題字型最小

3.4、基本文字标簽

font标簽處理網頁中文字的顯示方式。

<!-- 
    size屬性：用于設定字型的大小，最小1号，最大7号
    color屬性：用于設定字型的顔色
    face屬性：用于設定字型
-->
<font size="7" color="yellow" face="微軟雅黑">設定字型</font>

3.5、文本格式化标簽

使用标簽實作标簽的樣式處理

<b>粗體标簽</b><br/>
<strong>加粗</strong><br/>
<em>強調字型</em><br/>
<i>斜體</i><br/>
<small>小号字型</small><br/>
<big>大号字型</big><br/>
<p>上表标簽<sup>2</sup></p>
<p>下标标簽<sub>2</sub></p>
<del>删除線</del>

3.6、清單标簽

無序清單：使用一組無序的符号定義。

<!--
    type屬性用來定義符号的類型
        cicle：空心圓
        disc：實心圓
        square：黑色方塊
-->
<ul type="circle">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ul>

有序清單：使用一組有序的符号定義。

<!--
    type屬性用來定義符号的類型
         1：數字類型
         A：大寫字母類型
         a：小寫字母類型
         I：大寫古羅馬
         i：小寫古羅馬
    start用來定義起始值
-->
<ol type="1" start="1">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ol>

清單可以互相嵌套

<ol type="1" start="1">
    <li>JavaSE
        <ul>
            <li>Java開發環境搭建</li>
            <li>變量</li>
            <li>程式結構</li>
        </ul>
    </li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ol>

3.7、圖形标簽

在頁面指定位置處中引入一幅圖檔。

<!--
    src屬性：規定顯示圖像的URL；
    width屬性：設定圖像的寬度；
    height屬性：定義圖像的高度；
    alt屬性：規定圖像的替代文本。
-->
<img src="./img/pic1.jpg" width="100px" height="100px" alt="大腦">

<!-- 
    關于路徑：
        ./表示目前路徑下
        ../表示上一級路徑下
        什麼都不寫表示目前路徑下
-->
<!-- 目前路徑下，和目前html同一級目錄下 -->
<img src="./img/pic1.jpg" width="100px" height="100px" alt="大腦">
<!-- 上一級路徑下，目前html上一級目錄下 -->
<img src="../img/pic1.jpg" width="100px" height="100px" alt="大腦">
<!-- 目前路徑下，和目前html同一級目錄下 -->
<img src="img/pic1.jpg" width="100px" height="100px" alt="大腦">

3.8、連結标簽

文檔的任何部分（如文本、頁面、表單、動畫或圖像等）都可用作超級連結，超級連結可用于指向網站的不同頁面或頁面的特定部分。

<!--
    href屬性：指定連接配接路徑，既可以是本地的路徑，也可以是網絡中的路徑
    title屬性：指定連接配接提示文字
    target屬性：連接配接目标視窗打開方式，target的取值如下
        _blank:在新視窗中打開連結文檔
        _self:預設值 在相同架構中打開被連結文檔
        _parent:在父架構集中打開被連結文檔（了解）
        _top:在整個視窗中打開被連結文檔（了解）
    title屬性和target屬性可以沒有
-->
<a href="https://www.baidu.com" title="百度" target="_blank">百度</a>

當一個網頁的主題較多或内容較長時，可以在網頁内建立多個标記點，将超連結指向這些标記點，使浏覽者能快速找到要閱讀的内容。

<!-- 建立錨點 -->
<a name="start"></a>

<!-- 建立能回到start位置的連接配接 -->
<a href="#start">回到頂部</a>

通過上述操作可以完成類似回到頂部的效果。

四、HTML表格标簽（掌握）

4.1、表格的作用

  • 資料展示
  • 布局

4.2、表格組成

image-20210822210454667

相關标簽：

  • table：定義表格；
  • caption：定義表格标題；
  • th：定義列标題；
  • tr：定義表格行；
  • td：定義表格單元。 
<!-- 員工資訊表 -->
<table border="1" style="border-collapse: collapse; width: 400px;">
    <!-- 表格标題 -->
    <caption>員工資訊表</caption>
    <!-- 行 -->
    <tr>
        <!-- 列标題 -->
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>001</td>
        <td>馬化騰</td>
        <td>男</td>
        <td>...</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Tom</td>
        <td>男</td>
        <td>20</td>
    </tr>
    <tr>
        <td>003</td>
        <td>張三</td>
        <td>男</td>
        <td>15</td>
    </tr>
</table>

4.3、跨行跨列的表格

跨行跨列的表格實際就是合并單元格

跨行跨列屬性全部在td标記中設定，屬性如下：

  • rowspan：跨行屬性
  • colspan：跨列屬性

在設計表格時首先設計行數，再觀察跨行和跨列。

設計如下圖所示的課程表

前端HTML+CSS+JS+JQuery+Ajax_JSON01_HTML02_CSS03_JavaScript04_jQuary05_Ajax_JSON

代碼如下

<!-- 課程表設計如下 -->
<table border="1" style="border-collapse: collapse;">
    <caption>學生課程表</caption>
    <tr>
        <th>時間</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>國文</td>
        <td>數學</td>
        <td>自然</td>
        <td>社會</td>
        <td>體育</td>
    </tr>
    <tr>
        <td>數學</td>
        <td>國文</td>
        <td>社會</td>
        <td>自然</td>
        <td>體育</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>國文</td>
        <td>數學</td>
        <td>自然</td>
        <td>社會</td>
        <td>體育</td>
    </tr>
    <tr>
        <td>數學</td>
        <td>國文</td>
        <td>社會</td>
        <td>自然</td>
        <td>體育</td>
    </tr>
    <tr>
        <td>晚上</td>
        <td colspan="5" style="text-align: center;">自習</td>
    </tr>
</table>

作業：設計如下圖所示的表格

前端HTML+CSS+JS+JQuery+Ajax_JSON01_HTML02_CSS03_JavaScript04_jQuary05_Ajax_JSON

五、HTML表單标簽（掌握）

5.1、什麼是表單

與網站有互動功能的網頁，擷取使用者輸入的資料，送出給背景。

5.2、基本架構 

<!--
    action：表示動作，值為伺服器的位址，把表單的資料送出到該位址上處理
    method：送出表單的方式，值為get或post
        get：
            預設的一種傳遞資料的方法
            通過位址來傳遞表單中的資料
            不建議傳遞敏感的資料,如:密碼
            不能傳遞大量的資料,每次隻能傳遞1024位元組
            不能上傳附件
        post：
            不是通過位址傳遞資料,相對安全
            可以傳遞海量的資料
            能上傳附件
    enctype：表示是表單送出的類型
        預設值：application/x-www-form-urlencoded，普通表單
        multipart/form-data：多部分表單(一般用于檔案上傳)    
-->
<form action="伺服器位址" method="請求方式" enctype="表單送出的類型">
    ...
    ...
    ...
</form>

5.3、input元素

作為表單中的重要元素，可根據不同type屬性值呈現為不同狀态，value屬性表示初始值，name屬性表示目前表單元素對象，表單元素名稱。

常見type值：

  • text

     ：單行文本域，常用與較短資訊的輸入，使用者名，聯系方式等
    • size:指定控件的寬度，以字元為機關
    • maxlength:可以接收的最大字元數

  • password

     ：密碼域，用來輸入密碼，掩碼顯示
    • size指定控件的寬度
    • maxlength:可以接收的最大字元數

  • radio

     ：單選按鈕，限制選擇一項的操作，如性别
    • 同組name值相同
    • checked指定是否被選中

  • checkbox

     ：複選按鈕，允許選擇多個的操作，如個人愛好
    • 同組name值相同
    • checked指定是否被選中

  • button

     ：普通按鈕

  • submit

     ：送出表單按鈕

  • reset

     ：重置表單按鈕

  • date

     ：日期

  • time

     ：時間

  • datetime

     ：日期+時間

  • email

     ：電子郵件

  • number

     ：數值
    • max規定允許的最大值
    • min規定允許的最小值
    • value預設值

  • file

     ：檔案域，用于檔案上傳操作

  • hidden

     ：隐藏域

  • range

     ：範圍
    • max規定允許的最大值
    • min規定允許的最小值
    • step規定合法的數字間隔
    • value規定預設值

  • color

     ：取色按鈕

  • month

     ：類型允許選擇一個月份 
<form action="a.html" method="post">
    <!--
        type表示表單元素類型
        value表示初始值
        name表示表單元素名稱，通常用于給伺服器傳遞資料時使用
    -->
    賬号:<input type="text" value="aaa" name="username" /><br/>
    密碼:<input type="password" name="password" /><br/>
    <!--
        同組name相同
        checked表示選中
    -->
    性别:<input type="radio" name="gender" value="男" checked />男<br/>
    <input type="radio" name="gender" value="女" />女<br/>
    <!--
        同組name相同
        checked表示選中
    -->
    愛好:<input type="checkbox" name="hobby" value="sleep1" checked/>睡覺
    <input type="checkbox" name="hobby" value="sleep2"/>睡覺1
    <input type="checkbox" name="hobby" value="sleep3"/>睡覺2<br/>
    <!-- 按鈕 -->
    <input type="submit" value="注冊" />
    <input type="reset" value="重置" />
    
    
    <!-- 以下了解即可 -->
    <!-- 
        color 用于選取顔色
        RGB 十六進制數表示顔色
        R---Red紅色
        G---Green綠色
        B---Blue藍色
        六位十六進制的值
        白  #FFFFFF
        黑  #000000
       -->
    <input type="color" name="color" /><br/>
    <!-- date 日期 -->
    <input type="date" name="date" /><br/>
    <!-- email @ -->
    <input type="email" name="email" /><br/>
    <!-- month 月份 -->
    <input type="month" name="month" /><br/>
    <!-- number 數字
            min最小值
            max最大值
            step每次變化的值
            value預設值
    -->
    <input type="number" name="number" min="1" max="10" step="2" value="5" /><br/>
    <!--
        range 滑動條
    -->
    <input type="range" name="range" min="1" max="100" step="1" value="1"/><br/>
    <!-- 
        time 時 分
    -->
    <input type="time" /><br/>
</form>

使用表單元素完成登入頁面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登入</title>
    </head>
    <body>
        <form action="http://www.baidu.com" method="post">
            <!-- 設定寬度為300px -->
            <fieldset style="width: 300px;">
                <legend>使用者登入</legend>
                <p>
                    <label>賬号</label>
                    <!-- placeholder提示資訊
                        autofocus 自動獲得焦點
                    -->
                    <input type="text" name="username" placeholder="請輸入使用者名" autofocus />
                </p>
                <p>
                    <label>密碼</label>
                    <input type="password" name="password" placeholder="請輸入密碼" />
                </p>
                <!-- p中的内容居中 -->
                <p style="text-align: center;">
                    <input type="submit" value="登入" />
                    <input type="reset" value="重置" />
                </p>
            </fieldset>
        </form>
    </body>
</html>

5.4、select 元素(下拉清單)

單選下拉清單：

<select></select>

清單項：

<option></option>

預設選中屬性：

selected="selected"

 
<!-- name:目前下拉清單的名稱 -->
<select name="province">
    <option value="beijing">北京市</option>
    <option value="tianjin">天津市</option>
    <option value="chongqing" selected="selected" >重慶市</option>
</select>

多選清單：multiple=“multiple”

<select name="hobby" multiple="multiple">
    <option value="game">網遊</option>
    <option value="swim">遊泳</option>
    <option value="learn">學習</option>
    <option value="sleep">睡覺</option>
</select>

5.5、textarea元素(文本域)

行文本框：

< textarea cols="列" rows="行">< /textarea>

六、特殊字元

< &lt;

> &gt;

空格 &nbsp；

& &amp;

© &copy;

 
<p>a&lt;b</p>
<p>a&gt;b</p>
<p>a&nbsp;&nbsp;&nbsp;b</p>
<p>&copy;</p>

02_CSS

03_JavaScript

04_jQuary

05_Ajax_JSON

javaweb ajax jquery css
上一篇: jquery 判斷點選次數_javascript如何統計點選次數？
下一篇: jQuery中(function(){})()執行順序的了解

繼續閱讀