成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

HTML/CSS快速入門

番茄西紅柿 / 1035人閱讀

摘要：概念概念使用語言開發(fā)基于互聯網的項目軟件架構架構客戶端服務器用戶本地有一個客戶端程序在遠程有一個服務端程序如英雄聯盟優(yōu)點用戶體驗好缺點開發(fā)安裝部署維護麻煩架構瀏覽器服務器端只需要一個瀏覽器用戶通過不同的網址客戶端訪問不同的服務器端程序優(yōu)點開

Web概念

  • JavaWeb
    • 使用java語言開發(fā)基于互聯網的項目
  • 軟件架構
    • C/S架構:Client/Server 客戶端/服務器
      • 用戶本地有一個客戶端程序,在遠程有一個服務端程序
      • 如QQ,英雄聯盟.......
      • 優(yōu)點
        • 用戶體驗好
      • 缺點
        • 開發(fā),安裝,部署,維護麻煩
    • B/S架構:Browser/Server 瀏覽器/服務器端
      • 只需要一個瀏覽器,用戶通過不同的網址(URL),客戶端訪問不同的服務器端程序
      • 優(yōu)點:
        1. 開發(fā),安裝,部署,維護 簡單
      • 缺點:
        1. 如果應用過大,用戶體驗可能受到影響

        2. 對硬件要求過高

  • B/S 架構詳解
    • 資源分類:
      1. 靜態(tài)資源:
        • 使用靜態(tài)網頁開發(fā)技術發(fā)布的資源
        • 特點:
          • 所有用戶訪問,得到的結果是一樣的
          • 如:文本,圖片,音頻,視頻,HTML,CSS,JavaScript
            • HTML:用于搭建基礎網頁,展示頁面的內容
            • CSS:用于美化頁面,布局頁面
            • JavaScript:控制頁面的元素,讓頁面有一些動態(tài)的效果
          • 如果用戶請求的是靜態(tài)資源,那么服務器會直接將靜態(tài)資源發(fā)送給瀏覽器,瀏覽器中內置了靜態(tài)資源引擎
      2. 動態(tài)資源:
        • 使用動態(tài)網頁實時發(fā)布的資源
        • 特點:
          • 所有用戶訪問,得到的結果可能不一樣
          • 如:jsp/Servlet,php,asp.....
          • 如果用戶請求的是動態(tài)資源,那么服務器會執(zhí)行動態(tài)資源,轉換為靜態(tài)資源,再發(fā)給瀏覽器

HTML

  1. 概念:是最基礎的網頁開發(fā)語言
    • Hyper Text Markup Language 超文本標記語言
      • 超文本:
        • 超文本是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網狀文本
      • 標簽語言:
        • 由標簽構成的語言.<標簽名> 如html,xml
        • 標記語言不是編程語言
  2. 快速入門:
    • 語法:
      1. html文檔后綴名.html或者.htm
      2. 標簽分為
        1. 圍堵標簽:有開始標簽和結束標簽.如
        2. 自閉和標簽:開始標簽和結束標簽在一起.如
      3. 標簽可以嵌套:
        • 需要正確嵌套,不能你中有我,我中有你
        • 錯誤:
        • 正確:
      4. 在開始標簽中可以定義屬性.屬性是由鍵值對構成,值需要引號(單雙都可)引起來
      5. html中不區(qū)分大小寫,建議小寫
  3. 標簽學習
    1. 文件標簽:構成html最基本的標簽
      • html:html根標簽
      • head:頭標簽
      • title:標題標簽
      • body:體標簽
    2. 文本標簽:
      • 注釋:

      • to

        :標題標簽

      • :段落標簽


      • :換行標簽
      • :水平線
        • color:顏色
        • size:大小
        • width:寬度
        • align:對齊方式
          • center:居中;
          • left: 左對齊
          • right: 右對齊
      • :加粗
      • :斜體
      • :字體標簽
        • color:顏色
        • size:大小
        • face:字體
      • :文本居中
      • 屬性定義:
        • color:
          1. 英文單詞:red,green,blue;
          2. rgb(值1,值2,值3):值的范圍:0~255,如rgb(0,0,255);

          3. 值1值2值3:值的范圍:00~FF之間.如#FF00FF

        • width:
          1. 數值:width=20,數值的單位,默認為px(像素);
          2. 數值%;占比相對于父元素的比例;
    3. 圖片標簽
      • img:展示圖片
        • 屬性:
          • src:指定圖片的位置
            • 相對路徑:以.開頭的路徑
              • ./:代表當前目錄
              • ../:代表上一級目錄
    4. 列表標簽
      • 有序列表:
        • ol:
        • li:
      • 無序列表:
        • ul:
        • li:
    5. 鏈接標簽
      • a:定義一個超鏈接
        • 屬性:
          • href:指定訪問資源的URL
          • target:指定打開資源的方式
            • _self:默認值:在當前頁面打開
            • _blank:在空白頁面打開
    6. div和span標簽
      • div:每一個div占滿一行,塊級標簽
      • span:文本信息在一行展示,行內標簽,內聯標簽
    7. 語義化標簽:html5中為了提高程序的可讀性,提供了一些標簽
      • :
    8. 表格標簽
      • table:定義表格
        • width:寬度
        • border:邊框
        • cellpadding:內容和單元格之間的距離
        • cellspacing:單元格之間的距離
        • bgcolor:背景色
        • align:對齊方式
    • tr:定義行
      • bgcolor:背景色
      • align:對齊方式
    • td:定義單元格
      • colspan:合并列
      • rowspan:合并行
    • th:定義表頭單元格
    • :表格標題
    • :表格的頭部分
    • :表格的體部分
    • :表格的腳部分
  4. 表單標簽
    • 表單:
      • 概念:用于采集用戶輸入的數據,用于和服務器進行交互.
      • form:用于定義表單,可以定義一個范圍,范圍代表采集用戶數據的范圍.
      • 屬性:
        • action:指定提交數據的URL;
        • method:指定提交方式
          • 分類:一共有7種,2種比較常用
            • get: 
              1. 請求參數會在地址欄中顯示
              2. 請求參數大小有限制
              3. 不太安全
            • post:
              1. 請求參數不會在地址欄中顯示,,會封裝在請求行中
              2. 請求參數的大小沒有限制
              3. 較為安全
        • 表單項中的數據要想被提交,必須指定其name屬性
    • 表單項標簽:
      • input:可以通過type屬性值,改變元素展示的樣式
        • type屬性:
          • text:文本輸入框,默認值
            • placeholder:指定輸入框的提示信息,當輸入框的內容發(fā)生變化,會自動清空提示信息
          • password:密碼輸入框
          • radio:單選框
            • 注意:
              1. 要想讓單選框實現單選的效果,則多個單選框的name屬性值必須一樣
              2. 一般會給每一個單選框提供value屬性指定其被選中后提交的值
              3. checked屬性,可以指定默認值
          • checkbox:復選框
            • 注意:
              1. 一般會給每個單元框提供,指定其被選中后提交的值
              2. checked屬性,可以指定默認值
          • file:文本選擇框
          • hidden:隱藏域,用于提交一些信息
          • 按鈕:
            • submit:提交按鈕
            • button:普通按鈕
            • image:圖片提交按鈕
              • src屬性指定圖片提交的路徑
            • date
            • datetime-local
            • email
            • number
        • label:指定輸入項的文字描述信息
          • 注意:
            • label的for屬性一般會和input的id屬性值對應,如果對應了,則點擊label區(qū)域會讓input輸入框獲取焦點
        • seelct:下拉列表
          • 子元素:option,指定列表項
        • textarea:文本域
          • cols:指定列數,每一行有多少個字符
          • rows:默認多少行

CSS

  1. 概念:Cascading Style Sheets層疊樣式表
    • 層疊:多個樣式可以作用在同一個html的元素上,同時生效
  2. 好處:
    1. 功能強大
    2. 將內容和樣式控制分離
      • 降低耦合度
      • 讓分工合作更容易
      • 提高開發(fā)效率

    3. CSS使用:CSS與html結合方式

      1. 內聯樣式
      aaa
      1. 內部樣式
           

   
      aaa
      1. 外部樣式
        • 定義css資源文件

        • 在head標簽中定義link標簽,引入外部的資源文件
          ```html
          aa.css
          div {
          color:red;
          }

                
             或
            

                
          aaa
          ```
      2. css語法:
        • 格式:
          選擇器{
          屬性名1:屬性值1;
          屬性名2:屬性值2;
          ....
          }
        • 選擇器:篩選具有相似特征的元素
        • 注意:
          • 每一對屬性需要使用;隔開,最后一對屬性可以不加
      3. 選擇器:篩選具有相似特征的元素
        • 分類:
          1. 基礎選擇器
            1. id選擇器:選擇器具有的id屬性值的元素,建議在一個html頁面中id值唯一
              • 語法:#id屬性值{}
            2. 元素選擇器:選擇具有相同標簽名稱的元素
            3. 類選擇器:選擇具有相同的class屬性值的元素
              • 語法:.class屬性值{}
                ###### 注意:
                優(yōu)先級:id選擇器>類選擇器>元素選擇器
          2. 擴展選擇器
            1. 選擇所有元素
              • 語法:*{}
            2. 并集選擇器:
              • 語法:*{}
            3. 子選擇器:篩選選擇器1的父元素選擇器2
              • 語法:選擇器1 選擇器2 {}
            4. 父選擇器:篩選選擇器2的父元素選擇器1
              • 語法:選擇器1>選擇器2 {}
            5. 屬性選擇器:選擇元素名稱.屬性名=屬性值的元素
              • 語法:元素名稱[屬性名="屬性值"]{}
            6. 偽類選擇器:選擇一些元素具有的狀態(tài)
              • 語法:元素.狀態(tài){}
                • 如:
                  • 狀態(tài)
                    • link:初始狀態(tài)
                    • visited:被訪問狀態(tài)
                    • active:正在訪問狀態(tài)
                    • hover:鼠標懸浮狀態(tài)
      4. 屬性
        1. 字體、文本
          • font-size
          • text-align
          • line-height
        2. 背景
          • background
        3. 邊框
          • border
        4. 尺寸
          • width
          • height
        5. 盒子模型
          • margin:外邊距
          • padding:內邊距
            • 默認情況下內邊距會影響整個盒子的大小
            • box-sizing:border-box;設值盒子的屬性,讓width和height就是盒子最終的大小
          • float:浮動
            • left
            • right

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/1195.html

相關文章

  • 百度MIP技術快速入門（上）

    摘要：百度在一年前推出了稱為的前端開發(fā)組件，主要目的是加速移動端網頁的顯示。不過呢，百度已經在開發(fā)了，的亮點即整站化，包括提供更多強大的組件更容易編寫代碼默認用開發(fā)自定義組件以及更快的運行速度等。 前言 「本文假定讀者已經有初級的前端開發(fā)知識，包括HTML、CSS?！?百度在一年前推出了稱為 MIP（Mobile Instant Pages）的前端開發(fā)組件，主要目的是加速移動端網頁的顯示。M...

    CoffeX 評論0 收藏0

  • 百度MIP技術快速入門（上）

    摘要：百度在一年前推出了稱為的前端開發(fā)組件，主要目的是加速移動端網頁的顯示。不過呢，百度已經在開發(fā)了，的亮點即整站化，包括提供更多強大的組件更容易編寫代碼默認用開發(fā)自定義組件以及更快的運行速度等。 前言 「本文假定讀者已經有初級的前端開發(fā)知識，包括HTML、CSS?！?百度在一年前推出了稱為 MIP（Mobile Instant Pages）的前端開發(fā)組件，主要目的是加速移動端網頁的顯示。M...

    ityouknow 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

    zxhaaa 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

    JouyPub 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

    vslam 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<