web前端篇:html基礎知識

時間  2019-12-09
標籤 web 前端 html 基礎 知識 欄目 HTML 简体版
原文   原文鏈接

目錄css

1.web前端：

  • 什麼是web?html

    web 就是網頁，是一種基於B/S的應用程序
B：Browser瀏覽器
S：Server服務器

  • web組成？前端

    瀏覽器：代替用戶向服務器發送請求
服務器：接收用戶請求並響應
通訊協議：規範數據在網絡中是如何打包傳送的。
HTTP(HyperText transfer protocal)：超文本傳輸協議

  • web服務器html5

    做用：
  接收用戶請求並左幅響應
  存儲web信息
  具有安全性能

  • web瀏覽器web

    產品：
  Apache
  Tomcat
  IIS
  Nginx

做用：
  代替用戶向服務器發送請求
  作爲響應數據的解釋引擎，向用戶呈現界面
主流瀏覽器產品：
  根據瀏覽器的內核、引擎進行劃分
  1. Microsoft IE
  2.Google chrome
  3.Mozilla FireFox
  4.Apple Safari
  5.Apple Safari
瀏覽器引擎：
  渲染：解析HTML,CSS控制頁面渲染效果
  JS引擎：解釋網頁腳本文件
前端開發技術
  HTML,CSS,JavaScript

2.HTML概述

2.1HTML介紹

  • 什麼是HTML？
HyperText Markup language
 超文本    標記    語言
做用：書寫網頁結構
  • 標記
也叫標籤，主要用來標記網頁中的內容，以實現網頁的佈局和JS操做

2.2HTML在計算機中如何表現

  • 全部的網頁文件在計算機中以.html或。htm文件存儲。
  • 開發工具：
1.記事本
2.Editplus Pycharm
3.Sublime Webstorm VSCode Atom...
  • 運行工具：
    • Chrome 瀏覽器
    • FireFox 瀏覽器
  • 調試方法：F12打開網頁源碼。

3.HTML基礎語法

3.1.標籤/標記

  • 在網頁中具備特殊功能的符號，HTML中全部的標籤都以<>爲標誌，做用區分普通文本。chrome

  • 標籤分類瀏覽器

    1.雙標籤安全

    ​ 成對出現，有開始有結束。服務器

    ​ eg:<開始標籤> 標籤內容 </結束標籤>網絡

    2.單標籤

    ​ 只有開始標籤，沒有結束標籤，能夠手動添加、表示結束。

    ​ eg:<標籤名>

  • 標籤嵌套

    • 在成對的標籤中出現其餘標籤。

    • 嵌套結構中，外層元素程爲父元素，內層元素稱爲子元素

      <a>
    <b>你好</b>
</a>
<!--a標籤是超連接標籤-->
<!--b標籤是文本加粗標籤-->

    • 書寫規範

      • HTML不區分大小寫，保持適當縮進加強代碼可讀性

3.2 標籤屬性

  • 標籤的屬性主要用於修飾標籤的顯示效果。
  • 相關語法：
    • 屬性由屬性名和屬性值組成：屬性名="屬性值"
    • 屬性的聲明必須寫在開始標籤中： <開始標籤 屬性名="屬性值"> ..
    • 每一個標籤均可以設置多個屬性，屬性之間使用空格隔開： <開始標籤 屬性名="屬性值"> ..

3.3 HTML註釋

  • 註釋語句：
  • 注意：
    • 註釋不能卸載標籤裏，如<p >

    • 註釋不能嵌套

3.4HTML結構組成

  • 文檔的類型聲明方式：開頭第一行<!doctype html> html5聲明方式

    • 做用 ：告訴瀏覽器當前使用的HTML版本，以便瀏覽器能正確解析HTML標籤和渲染樣式。
    • 書寫位置：文檔最開始位置。

  • 文檔的開始和結束

    • 在文檔類型聲明以後，使用一對標籤標示文檔的開始和結束

    • 在HTML標籤中，包含兩對子元素

      <html>
    <head></head>
    <body></body>
</html>

<head>標籤標示網頁的頭部信息，包含網頁的標題，選項卡的圖標，網頁的關鍵字，做者，描述等信息，還能夠引入外部的資源文件
<body>標籤表示網頁的主體信息，網頁所呈現的內容都要寫在body裏

    • <head>標籤中包含的子元素

      • 設置網頁的標題 <title></title>
      • 設置網頁的字符編碼<meta charset="utf-8">

3.5文本標籤

3.5.1.字符實體（具備特殊意義的符號）
  • &nbsp; 表示一個空格
  • &lt; 表示小於號 <
  • &gt; 表示大於號 >
  • '&copy ;' 表示版權符號
  • &yen; 表示人民幣符號¥
3.5.2.文本樣式
  • <i></i> 斜體顯示文本
  • <u></u> 文本添加下劃線
  • <b></b> 文本加粗效果
  • <s></s> 文本添加刪除線
  • <sup></sup> 上標顯示文本
  • <sub></sub> 下標顯示文本
  • 特色：這些標籤能夠與其餘的標籤或文本共行顯示
3.5.3.標題標籤

  • 以不一樣的文字大小和加粗方式顯示文本

  • 語法：<hn></hn>n取值 1- 6，字體大小是逐級遞減的

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

  • 特色：

    • 會改變文字的大小而且具備加粗效果
    • 每一個標題都會具有垂直的空白距離
    • 每一個標題都獨佔一行，不與其餘元素共行顯示
    • 每一個標題均可以添加屬性 align
      • 取值：left / center / right
      • 設置文本的水平對齊方式，默認居左對齊
      • <h1 align="center">一級標題<h1>
3.5.4.段落標籤
  • 做用：突出顯示一段文本，每段文本都獨佔一行或一塊，不予其餘元素共行顯示，而且也具有垂直的空白距離
  • 語法：
    • <p></p>
    • 屬性：align 設置文本的水平對齊方式
    • 取值： left / center / right
3.5.5.格式標籤
  • 換行標籤：<br>
  • 水平線標籤:<hr>
3.5.6.分區標籤
  • 塊分區
    • <div></div>
    • 做用：劃分頁面結構，配合css實現網頁佈局
    • 特色：獨佔一塊顯示
  • 行分區元素
    • <span></span>
    • 做用：設置同一行文本的不一樣樣式，結合CSS
    • 特色：能夠與其餘元素或文本共行顯示，容許在一行文本中使用多個span
3.5.7.標籤分類
  • 塊級元素
    • 只要在網頁中獨佔一行，不予其餘元素共行顯示的元素都是塊級元素。
    • 做用：都網頁能夠作佈局
    • 特色：都添加align屬性，設置內容水平對齊方式
    • eg:h1~h6,ul,ol,li,form,table,tr,p,div
  • 行內元素/內聯元素
    • 能夠與其餘元素共行顯示。
    • eg:i b strong sub sup span

3.6 列表標籤

  • 做用：按照從上到下的方式來排列數據

  • 列表的組成：

    • 有序列表<ol><ol>

      • 默認是按照數字排序

    • 無序列表<ul></ul>

      • 默認以實心原點做爲標識

    • 列表項

      • 列表中的每一條數據都是一個列表項
      • 語法 ：
      • 注意 ：列表項要嵌套在列表標籤中使用

    • 列表屬性

      • 有序列表--ol

        • type屬性：設置項目符號
        1 ：按照數字排列顯示，默認值
 a : 按照小寫字母順序排列
 A ：按照大寫字母排列
 i : 按照羅馬數字排列
 I : 按照羅馬數字排列
        • start屬性：設置從第幾個字符開始排序
          • 取值：數字

      • 無序列表--ul

        • type屬性：設置項目符號

          disc 實心圓點（默認）
circle 空心圓點
square 實心方塊
none 不顯示項目符號

    • 列表嵌套

      • 在一個列表中出現其餘列表。

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul type="circle">
        <li>山東
            <ol type="I">
                <li>德州</li>
                <li>青島</li>
                <li>濟南</li>
                <li>淄博</li>
            </ol>
        </li>
        <li>吉林
            <ol type="I">
                <li>長春</li>
                <li>吉林</li>
                <li>白城</li>
                <li>敦化</li>
            </ol>
        </li>
        <li>北京
            <ol type="I">
                <li>朝陽</li>
                <li>昌平</li>
                <li>西城</li>
                <li>東城</li>
            </ol>
        </li>
    </ul>

</body>
</html>

3.7 圖像與超連接標籤

  • URL
    • 統一資源定位符 ：用來標識網絡中資源的位置，俗稱路徑URL 組成 ：協議 域名 文件目錄及文件名。
    • URL分類：
      • 絕對路經：
        • 從根目錄開始查找，經常使用於網絡文件路經。
      • 相對路經：
        • 從當前文件所在的文件夾開始查找
      • 根相對路徑 （瞭解）：
        • 從Web程序所在的根目錄開始查找資源文件
        • 注意：網絡URL中不能出現中文，URL是嚴格區分大小寫的。
  • 圖像標籤
    • 在網頁中插入一張圖片
    • 語法 ：
    • 屬性 ：
      • src :指定要顯示的圖片路徑
      • width ：設置圖片的寬度，以像素px爲單位，也能夠省略單位
      • height ：設置圖片的高度
        注意 : src 爲必填屬性，寬高能夠省略，省略寬高的話，圖片將以原始尺寸顯示在網頁中
      • title ：用來設置圖片的標題，當鼠標懸停在圖片上方時出現
      • alt : 用來設置圖片加載失敗以後的提示文本

3.8超連接標籤

  • 什麼是超連接標籤

    • 可以實現從當前文件跳轉到其餘文件的標籤

  • 語法：

    • <a></a>

    • 標籤屬性：

      • href :必填屬性，指定連接地址，以路徑形式給出,#表示當前頁，不會發生頁面刷新操做，若是屬性爲"",也表示當前頁，可是包含了網絡請求，至關於刷新頁面。
      • target :可選屬性，設置目標文件的打開方式。
        • _self ：默認值，表示在當前窗口打開
        • _blank:表示新建窗口打開
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下</a>
    <a href="">回到頂部</a>
</body>
</html>

  • 錨點連接

    • 連接到當前文件的指定位置

      1. 設置錨點<a name="anchor1"></a>
2. 設置跳轉<a href="#anchor1">早年經歷</a>

<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到頂部</a>
</body>

3.9 表格

3.9.1 標籤介紹：

  • 表格標籤：<table></table>

  • 行標籤：<tr></tr>

  • 單元格標籤：<td></td>

  • 建立順序：

    • 在表格標籤中嵌套行標籤，每個 tr 就表明一行
    • 在行標籤中建立單元格標籤，用來存放數據
    <table>
        <tr><!--表明一行-->
            <td>id</td><!--表明單元格-->
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>xjk</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>half</td>
            <td>15</td>
        </tr>
    </table>
3.9.2標籤屬性
  • table 屬性
    • border ：設置邊框，取值以px爲單位的數值（px能夠省略）
    • width ：設置寬度
    • height ：設置高度
    • align ：設置表格在其父元素中的水平對齊方式
    • cellpadding : 設置單元格的內邊距（內容與邊框之間的距離），取值爲px單位的數值
    • cellspacing : 設置單元格的外邊距（單元格與單元格之間的距離，或者單元格與表格邊框之間的距離），取值像素爲單位的數值
    • bgcolor : 設置表格的背景顏色，取值能夠是英文的顏色名稱
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到頂部</a>
    <table border="1"  align="center" cellpadding="10" cellspacing="1" bgcolor="red">
        <tr>
            <td>hello</td>
            <td>html</td>
        </tr>
    </table>
</body>
</html>
  • tr 屬性
    • bgcolor : 設置當前行的背景顏色
    • align ：設置當前行中內容的水平對齊方式
      取值 ： left / center / right
    • valign :設置當前行內容的垂直對齊方式
      取值 ：top / middle / bottom,默認垂直居中。
  • td屬性
    • width 設置單元格的寬度
    • height 設置單元格的高度
    • align 單元格內容的水平對齊方式
    • valign 單元格內容的垂直對齊方式
    • bgcolor 單元格的背景顏色
  • 單元格的合併
    • 單元格獨有的屬性 colspan rowspan
    • 單元格的跨列合併
      • 從當前單元格的位置開始，橫向向右合併幾個單元格colspan = "3" ->跨3列進行合併(包含自身)
    • 單元格的跨行合併
      • 從當前的單元格開始，縱向向下合併單元格rowspan = "3" ->向下跨3行合併單元格
    • 注意：一旦發生單元格合併，跨列合併，要刪除當前行中多餘的單元格跨行合併，要刪除其後行中多餘的單元格始終保持表格結構完整。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellspacing="0" width="400" height="400">
        <tr>
            <td colspan="2" bgcolor="red"></td>
            <!--<td>2</td>-->
            <td rowspan="2" bgcolor="#00008b"></td>
        </tr>
        <tr>
            <td rowspan="2" bgcolor="#663399"></td>
            <td bgcolor="#ff1493"></td>
            <!--<td>6</td>-->
        </tr>
        <tr>
            <!--<td>7</td>-->
            <td colspan="2" bgcolor="#adff2f"></td>
            <!--<td>9</td>-->
        </tr>
    </table>
</body>
</html>

  • 行分組

    • 容許將表格中的一行或者是若干行劃分爲一組，便於管理。

    • 語法

      1. 表頭行分組
<thead>
    <tr>
        <td></td>
    </tr>
</thead>
2. 表尾行分組
<tfoot>
    <tr>
        <td></td>
    </tr>
</tfoot>
3. 表主體信息
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody

3.10.表單

3.10.1.用於接收用戶的數據而且提交給服務器
  • 表單2個要素
    • form表單元素
    • 表單控件
      • 提供了可以跟用戶交互的可視化組件
3.10.2.form元素

  • 注意：form元素自己是不可見的，卻不能省略，由於數據的提交功能要由 form 元素完成

  • 語法：<form></form>

  • form標籤屬性

    • action
      • 指定數據提交的目的地址
    • method
      • 數據請求方式 get /post (默認get)
      • get
        • 一般用於向服務器端獲取數據
        • 特色：
          • 提交的數據會以參數的形式拼接在URL後面
          • 安全性較低
          • 提交數據最大2KB
      • post
        • 將數據提交給服務器處理
        • 特色：
          • 隱式提交，看不到提交數據
          • 安全性較高
          • 沒有數據大小限制
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit" value="提交">
    </form>
</body>
</html>
##################################################################################
file:///D:/code/day43.html

file:///D:/code/day43.html?user=alex&pwd=123
3.10.3.表單控件

  • 做用：提供與用戶交互可視化組件（這裏注意只有放在表單元素中的表單控件才容許被提交）

  • 分類：

    • 文本框與密碼框

      • 語法：

        • 文本框：<input type="text">
        • 密碼框：<input type="password">

      • 屬性：

        • name 屬性 定義當前控件的名稱，缺乏的話沒法提交。

          name = "uname"

        • value 屬性，要提交給服務器的值，同時也是默認顯示在控件上的值。

        • maxlength 用來限制用戶輸入最大字符串。

        • placeholder 用戶輸入以前顯示在框中的提示文本。

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="user" maxlength="5" placeholder="輸入至少5位數字">
    <input type="password" name="pwd" maxlength="10" placeholder="輸入至少10位的密碼">
</body>
</html>

    • 單選框和複選框

      • 單選按鈕<input type="radio">

      • 複選框<input type="checkbox">

      • 屬性：

        • name 定義控件名稱，還起到分組的做用，一組中的按鈕名稱必須保持一致。
        • value 屬性 設置當前控件的值，最終提交給服務器。
        • checked 屬性 設置預選中狀態 能夠省略屬性值，也能夠使用"checked" 做爲值。
        <!--單選框-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="radio" name="sex" checked="checked">男
    <input type="radio" name="sex">女
</body>
</html>
<!--多選框-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox">抽菸
    <input type="checkbox">喝酒
    <input type="checkbox">燙頭
</body>
</html>

    • 隱藏域和文件選擇框

      • 隱藏域

        • 做用：須要提交給服務器可是卻不須要呈現給用戶的數據，均可以放在隱藏域中。
        • 語法：<input type='hidden'>
        • 屬性：
          • name 控件名稱
          • value 控件的值

      • 文件選擇框

        • 做用：選擇文件上傳，發送給服務器

        • 語法：<input type="file">

        • 屬性：name 定義控件名稱。

    • 下拉選擇框

      • <select name="province">

        • 屬性：
          • multiple 可進行多選(ctrl+鼠標左鍵)
        <select name="pro" id="" multiple>
        <option value="hebei">河北</option>
        <option value="heilongjiang">黑龍江</option>
        <option value="hunan">湖南</option>
    </select>

    • 文本域

      • 支持用戶多行文本

      • 語法：<textarea></textarea>

      • 屬性：

        • name 控件名稱
        • cols 指定文本默認顯示的列數，一行中能顯示的英文字符量，中文減半
        • rows 指定文本域可以顯示的行數

      • 注意：文本域能夠由用戶調整大小

        <textarea name="wenben" id="123" cols="30" rows="10"></textarea>

    • 按鈕

      • 提交按鈕

        <input name='' id='' type="submit">

      • 重置按鈕

        <form action="">
    <input type="text" name="123">
  <input name='' id='' type="reset" value="重置按鈕">
</form>

      • 普通按鈕

        <input type="button" value="點擊">

      • 按鈕顯示文本

        <button>按鈕顯示文本</button>
        • 注意：
          • 按鈕標籤能夠在任何地方使用，不侷限在form表單中使用
          • 按鈕標籤使用在form中，默認具備提交功能，等同於input submit
          • 能夠添加屬性type 取值 submit/reset/button 進行區分（非必填）
          • 在表單外作爲普通按鈕使用時，須要經過JS，動態綁定事件

    • label特殊方法

      • 使用label標籤包裹表單控件要顯示的文本信息，爲label標籤添加for屬性，屬性值與所要綁定的表單控件的ID屬性值保持一致，實現文本與控件的綁定。

        <label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">

4.練習題：

1.字體標籤包含哪些？

2.超連接標籤a標籤中href屬性有什麼用？

3.img中標籤中src和alt屬性有什麼？

4.如何建立一個簡易的有邊框的表格？

5.form 標籤中的action屬性和method屬性的做用？

6.在form標籤中表單控件input中type類型有哪些？並分別說明他們代指的含義

7.表單控件中的name屬性和value屬性有什麼意義？

8.用socket 開啓一個服務端，客戶端訪問服務器？

9.在一行內顯示的標籤有哪些？

10.獨佔一行的標籤有哪些？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程