前端學習路線

来源:http://www.cnblogs.com/fengyongxian/archive/2017/02/25/6442012.html
-Advertisement-
Play Games

第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位： web前端開發工程師 web網站架構師 自己創業 轉崗管理或其他 web前端開發的前景展望： 未來IT行業企業需求最多的人才 結合最新的html5搶占移動端的市場 自己創業做老闆 隨著互聯網的普及web開發成為企業的寵兒和核心 web職 ...


第一部分 HTML

第一章 職業規劃和前景

  • 職業方向規劃定位：

    • web前端開發工程師

    • web網站架構師

    • 自己創業

    • 轉崗管理或其他

  • web前端開發的前景展望：

    • 未來IT行業企業需求最多的人才

    • 結合最新的html5搶占移動端的市場

    • 自己創業做老闆

    • 隨著互聯網的普及web開發成為企業的寵兒和核心

  • web職業發展目標：

    • 起步階段：

    • 提升階段：

    • 成型階段：

    • 基本知識的掌握

    • 常用工具的掌握

    • 溝通技巧的掌握（圍繞客戶的需求）

    • 良好的開發習慣（加註釋、對齊方式）

    • 熟悉掌握HTML基本標簽和屬性

    • 熟練掌握css的基本語法和使用

    • 瀏覽器相容和w3c標準的掌握

    • 結合html+css+js開始系統項目的開發

    • 精通DIV+CCS佈局

    • 精通css樣式表控制html標簽

    • 熟悉運用js製作動態網站的效果

    • 能獨立開發完成網站

    • 負責內容的HTML

    • 負責外觀的css（層疊樣式表）

    • 負責行為的js

    • ps切圖

    • 第一、梳理知識架構

    • 第二、分解目標（起步階段、提升階段、成型階段）

第二章 html基本結構

  • 認識HTML：

    • html不是一種編程語言，是一種標誌語言

    • 標記語言是由一套標識標簽組成的

    • html使用標簽來描述網頁

  • html結構：

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

  • 不成對出現的標簽
    <br> <hr> <meta> <img> <input..> <option..> <link>

  • HTML 基本標簽的講解：

  •  

    • <strong>用於強調文本，強度更深，表示重要文本--->用於SEO優化

    • <b>只是視覺加粗效果--->單純為了產生加粗

    • <html> <head> <body>標簽

    • <h1>----<h6> 僅僅用於標題文本，不要為了產生粗體文本使用它們

    • <p>標簽 段落標簽

    • <strong><b>標簽

    • 都會讓文字產生加粗效果

    • <em> <i>標簽

      • em用於強調文本

      • i只是視覺斜體效果

      • <strong>比<em>強調更強

    • 特殊符號：

      • &nbsp; ---->空格

      • &gt; --->大於號

      • &lt；--->小於號

      • &quot；--->引號

      • &copy;-->版權號

第三章 html基本標簽

  • HTMl基本標簽：

    • 可以創建一個內容滾動效果

    • 錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接

    • 第一步：創建錨點 <a name="錨點名稱"></a>

    • 第二步：使用創建好的錨點名稱 <a href="#錨點名稱">內容</a>

    • target屬性：

    • _self(在原來頁面打開)

    • _blank（新視窗打開）

    • _top（打開時忽略所有的框架）

    • _parent（在父視窗中打開）

    • 文字的格式按源碼的排版來顯示，我們稱之為預處理格式

    • 對被用來組合文檔中的行內元素

    • 註意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化

    • span標簽

    • <pre>標簽

    • <a>標簽--->他有一個必不可少的屬性 href

    • 創建錨點和錨鏈接

    • marquee標簽

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

  • direction 表示滾動方向，取值有（left,right,up,down,預設left）

  • loop 表示滾動迴圈的次數，預設為無限迴圈

onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動速度)

  • 表示當滑鼠移上區域的時候停止滾動，滑鼠移開繼續滾動

第四章 img圖片標簽與路徑

  • 圖片標簽與路徑：

    • 常見圖片格式 jpg png gif

    • Gif （只支持全透明）

    • Jpeg /jpg

    • Png 半/全透明都支持

  • 圖片標簽寫法 ：

    • <img src="" alt="" width="" height="" />

  • 圖片四要素：

    • src="" 圖片路徑

    • alt="" 圖片含義

    • width="" 圖片寬度 和圖片大小保持一致

    • height="" 圖片高度 和圖片大小保持一致

    • title=""

  • 路徑知識：

    • 相對路徑：(Relative Path) 相對於該文件的路徑；

    • 絕對路徑：(Absolute Path) 從磁碟出發的路徑；

    • 相對路徑、絕對路徑：

    • <img src="" …… align="" /> align屬性--設置圖片與後面文字的位置關係
      值--top、bottom、middle、absmiddle、left、right

  • 在靜態頁面中：

  •  

    • /開頭表示根目錄；

    • ./表示當前目錄；（斜畫線前面一個點）

    • ../上級目錄；（斜畫線前面兩個點）

    • 直接用文件名不帶/也表示同一目錄

    • 這些都是相對於當前文件的位置來說的，如果用絕對路徑的話就是寫全了。

第五章 三種列表的講解

  • 三種列表的知識講解：

    • 無序列表是一個沒有順序項目的列表，此列表項預設粗體圓點進行標識

    • <ul>無序列表

<ul>
   <li></li>
   <li></li>
   <li></li></ul>

  • <ol>有序列表

    • 有序列表也是一列項目，只是列表項目使用的是數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。

<ol>
   <li>內容一</li>
   <li>內容二</li>
   <li>內容三</li></ol>

  • 列表符號

    • type="A" A B C D

    • type="a" a b c d

    • type="1" 1 2 3 4 預設值type="I" I II III type="i" i ii iii

    • type="circle" 空心圓 type=“disc” 實心圓 預設值 type="square" 方塊符

    • 無序列表-列表符號:

    • 有序列表-列表符號

    • 列表嵌套

    • 無序列表-嵌套

<ul>
 <li>柚子  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>蘋果</li></ul>

  • 有序列表-嵌套

<ol>
 <li>茶  <ul>
   <li>紅茶</li>
   <li>綠茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

  • 定義列表

    • 定義列表不僅僅是一列項目，而是項目及其註釋的組合。定義列表以 <dl> 標簽開始。每個定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>  
     <dt>pc網頁製作</dt>  
     <dd>學習DIV+CSS JS JQ 項目實戰</dd>  
     <dt>手機網頁製作</dt>  
     <dd>手機網頁製作實戰</dd></dl>

  • dd是對dt的解釋

    • < dl>< /dl>用來創建一個普通的列表,

    • < dt>< /dt>用來創建列表中的上層項目，

    • < dd>< /dd>用來創建列表中最下層項目，

    • < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。

<dl>
    <dt>中國城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>廣州 </dd>
    <dt>美國城市</dt>
    <dd>華盛頓 </dd>
    <dd>芝加哥 </dd>
    <dd>紐約 </dd></dl>

  • dl是definition list的縮寫

  • dt是definition title的縮寫

  • dd是definition description的縮寫

  • list-style屬性具有三個屬性分量：

  • list-style-position ：設置列表項圖標的位置，位於文本內或者文本外

  • list-style-type： 設置列表項圖標的類型

  • list-style-image ：使用圖像設置列表項圖標

第六章 表單元素(上)

  • 表單標簽:

    • <form>表單是一個包含表單元素的區域，包括起來的都是表單的內容

    • <form>表單標簽

<form>
 <input type="text"/></form>

  • HTML標簽 - Action和確認按鈕：

    • 當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form action="html.do" method="get">    
        username:  <input type="text" name="user" />   
        <input type="submit" value="提  交" /></form>

  • HTML標簽 - 隱藏域隱藏標簽：

  • 隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程式所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到伺服器

<form>        
     <input type="hidden" name="hid" value="value"></form>

  • <input>標簽的掌握

    • <input type="" name="" value="" />

    • type="text" 單行文本輸入框

    • type="password" 密碼（maxlength=""）

    • type="radio" 單項選擇（checked="checked"）

    • type="checkbox" 多項選擇

    • type="button" 按鈕

    • type="submit" 提交 type="image" 圖片提交

    • type="file" 上傳文件

    • type="reset" 重置

    • type="hidden" 隱藏

    • 常用type類型：

  • 關於表單中的設置預設值：

<input type="text" name="" value="今天心情不錯" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
<select name="" >
 <option  value=""></option>
 <option  value="" selected="selected"></option><select>

  • textarea沒有預設值

  • <label>標簽的使用

    • label 元素不會向用戶呈現任何特殊效果。

    • 不過，它為滑鼠用戶改進了可用性。

    • 如果您在 label 元素內點擊文本，就會觸發此控制項。

    • 就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控制項上。

    • <label></label>

    • <label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

    • 例子：（重要---註冊表單--用戶體驗--必做）

<p>單向選擇</p><label for="male">男：</label><input type="radio" name="sex" id="male"/><label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章 表單和表格(下)

  • 表單和表格標簽：

    • <textarea>文本域標簽

    • <textarea>標簽：

    • <textarea></textarea>是文本域標簽，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols

  • 註意：

    • rows表示這個文本域有多少行

    • cols表示這個文本域有多少列

  • 除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當於協議）和title（滑鼠放上提示）

  • <select>標簽的掌握

    • 註：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給伺服器時包括 name 屬性

<form>      
    <select name=""  id="">
         <option value="1">1月</option>  
          <option value="2">2月</option>      </select></form>

  • 常用到的屬性：disabled=“disabled” name="sel" size="2"

  • <table>表格標簽

  • <table>表格標簽：<table>是表格標簽，可以用它定義一個表格。

<table border="1">
    <tr>
    <td>姓名</td>
    <td>性別</td>
    </tr></table>

  • 註意：<table>的border屬性不能少

  • <tr> <td>標簽的使用

    • <tr>可以定義表格中的一行，一個<tr></tr>表示一行。

    • <tr>行標簽：

<table border="1"><tr>
 <td>姓名</td>
 <td>性別</td></tr><tr>
 <td>姓名</td>
 <td>性別</td></tr></table>

  • <td>單元格標簽:

    • <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

<table border="1"><tr><td >姓名</td><td>性別</td><td>愛好</td></tr></table>

  • border-collapse 屬性設置是否將表格邊框摺疊為單一邊框：

  • border-collapse:collapse;

  • colspan左右合併

  • rowspan上下合併

第一部分總結：

  • 非可視化標簽：head meta style scrpit...

  • 可視化標簽：img div span a ul li...

  • 只有可視化標簽，才能用css改變它

  • 單標簽：meta link base img input br hr

  • 雙標簽：html head body div a p span ..ul li ol dl ....

  • 常用可視化標簽

    • 慢慢已經被淘汰了 被ul li代替

    • 如果是合併豎排的就是合併行（rowspan）

    • 如果是合併橫排的就是合併列（colspan）

    • 列表

    • 結論：只要將來設計頁面中有固定樣式的列表，就用ul和li

    • src*屬性用來設置圖片的url數據

    • alt提供給搜索引擎搜索的

    • width

    • height

    • 結論 ：顯示圖片

    • href*屬性：設置跳轉的網頁地址

    • target屬性：設置跳轉的目標

    • 結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標簽

    • 一般用它來佈局

    • div

    • a 超鏈接標簽

    • img

    • ul li

    • table caption tr td (th)

HTML部分導圖總結

  • HTML5標簽集合


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5 DragEvent
    DragEvent是一個表示drag和drop交互的DOM event介面。用戶通過將指針設備（如：滑鼠）放在目標的錶面開始拖動，然後拖動指針到一個新的位置（如其他DOM元素）。應用程式自動的解析拖放交互。DragEvent介面從mouseEvent和Event那兒繼承屬性。 Event types ...
  • 前端頁面隱藏元素
    display:none和visible:hidden都能把網頁上某個元素隱藏起來，但兩者有區別: display:none 不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失。 visible:hidden 使對象在網頁上不可見，但該對象在網頁上扔占據著空間。 例子： <html><head ...
  • Brackets--我的初戀編輯器
    大學畢業以後，因為一些個人瑣事沒有找到自己專業的對口工作，整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕，怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源，開始自學一些web方面的知識。 經過小段時間的學習，發現自己之前真的是孤陋寡聞 ...
  • Jquery中綁定事件的異同
    談論jquery中bind(),live(),delegate(),on()綁定事件方式 1． Bind() $(selector).bind(event,data,function) Event:必須項;添加到元素的一個或多個事件。 Data：可選;需要傳遞的參數 Function：必需;當綁定事 ...
  • JavaScript內置對象-Array
    ▓▓▓▓▓▓ 大致介紹 除了Object之外，Array類型恐怕就是JavaScript種最常用的類型了，JavaScript中的數組與其他語言中的數組有很大的區別，例如，數組的每一項可以存放任何值，並且數組的大小事可以動態調整的 ▓▓▓▓▓▓ 創建數組的兩種方法 創建數組有兩種方法：一是用構造函數 ...
  • HTML 部分常用屬性
    -html概念:hyper Text Markup Language (超文本標記語言) Html標簽分類： 1 雙標簽 2 單標簽 Html標簽之間的關係: 1 嵌套關係 2 併列關係 Html單標記： 橫線標記 <hr> 換行標記<br> 註釋標記<!– 註釋文本--> ctrl+/ Html雙 ...
  • CSS屬性之border
    css的border屬性相信大家都不陌生了，就是給元素加個邊框嘛，在不同的盒模型下，會給元素的寬高帶來怎樣的影響，相信大家也都很熟悉了，這裡就不再贅述，只說說大家平時沒有怎麼留意的東西。 0.border-color與color 大家平時使用border屬性的時候，通常應該是直接寫border:1p ...
  • js學習路線
    JavaScript 數據類型 JavaScript 變數 Javascript 運算符 JavaScript 流程式控制制 JavaScript 數組 JavaScript 函數基礎 JavaScript 字元串函數 JavaScript 正則表達式 DOM 基本操作 Window 對象 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類