前端學習路線

時間 2019-12-14

標籤前端學習路線简体版

原文原文鏈接

第一部分 HTML

第一章職業規劃和前景

職業方向規劃定位：css

web前端開發工程師html
web網站架構師前端
本身創業html5
轉崗管理或其餘web

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

將來IT行業企業需求最多的人才編程
結合最新的html5搶佔移動端的市場瀏覽器
本身創業作老闆服務器
隨着互聯網的普及web開發成爲企業的寵兒和核心架構

web職業發展目標：

起步階段：
提高階段：
成型階段：
基本知識的掌握
經常使用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開發習慣（加註釋、對齊方式）
熟悉掌握HTML基本標籤和屬性
熟練掌握css的基本語法和使用
瀏覽器兼容和w3c標準的掌握
結合html+css+js開始系統項目的開發
精通DIV+CCS佈局
精通css樣式表控制html標籤
熟悉運用js製做動態網站的效果
能獨立開發完成網站
負責內容的HTML
負責外觀的css（層疊樣式表）
負責行爲的js
ps切圖
第1、梳理知識架構
第2、分解目標（起步階段、提高階段、成型階段）

第二章 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標籤集合

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端學習路線

第一部分 HTML

第一章 職業規劃和前景

第二章 html基本結構

第三章 html基本標籤

第四章 img圖片標籤與路徑

第五章 三種列表的講解

第六章 表單元素(上)

第七章 表單和表格(下)

第一章職業規劃和前景

第五章三種列表的講解

第六章表單元素(上)

第七章表單和表格(下)