HTML、CSS和JavaScript。html是內(nèi)容，css是表現(xiàn)，javascript是行為。前端開發(fā)的門檻其實(shí)非常低，與服務(wù)器端語言先慢后
WEB前端分：高級(jí)，中級(jí)，初級(jí)。
初級(jí)前端掌握的課程：
HTMl5+ CSS3。
前端學(xué)習(xí)的基礎(chǔ)技能需要掌握HTMl+ CSS的基礎(chǔ)內(nèi)容。
學(xué)習(xí)內(nèi)容：基礎(chǔ)標(biāo)簽div，span，p，ul，li，input等。
CSS：語法、派生選擇器、id選擇器、類選擇器、屬性選擇器。
CSS基本樣式：背景，字體、鏈接、列表、表格、輪廓。
CSS盒子,CSS選擇器,CSS常用操作。
中級(jí)前端掌握的課程：
CSS3和動(dòng)畫效果。
HTML5。
新增標(biāo)簽、瀏覽器適配。
JS——基礎(chǔ)。
實(shí)現(xiàn)、輸出、語法與注釋、變量和數(shù)據(jù)類型、javaScript函數(shù)、JavaScript異常處理和事件。
件處理、DOM對(duì)象、正則表達(dá)式等。
重點(diǎn)掌握：Jquery、angularJS、bootstrap。
高級(jí)前端掌握的課程：
移動(dòng)端：nodejs，vuejs。
CSS：面向?qū)ο蟮腃SS、CSS的后處理、Less、SASS。
JavaScript：模塊化，數(shù)據(jù)推送、高級(jí)函數(shù)、面向切面、多線程、設(shè)計(jì)模式。
2018.11.30
? ? 今天正式開始了web學(xué)習(xí)（前兩天一直在調(diào)試編譯器）。
? ? 還是從基礎(chǔ)的學(xué)起，先通過簡書做一些筆記，筆記本沒有帶。
? ??HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
? ??CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
? ??JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單?；蚴髽?biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。
? ? 1.<h1></h1>就是標(biāo)題標(biāo)簽 通過向兩者之間輸入文字作為標(biāo)題
? ? 2.<p></p>是段落標(biāo)簽
? ? 3.img標(biāo)簽來完成的，它在網(wǎng)頁上的代碼寫成<img src="1.jpg">
? ? 4.<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在中。
? ? 5.?<head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。（通常包含標(biāo)題信息，元數(shù)據(jù)，腳本代碼等）
????文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。
????下面這些標(biāo)簽可用在 head 部分：
?<head>
? ? <title>...</title>
? ? <meta>
? ? <link>
? ? <style>...</style>
? ? <script>...</script>
? </head>
<title>標(biāo)簽：在和標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個(gè)網(wǎng)頁的內(nèi)容都是不同的，每個(gè)網(wǎng)頁都應(yīng)該有一個(gè)獨(dú)一無二的title。
? ? 6. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來
? ? 7.代碼注釋<!--注釋文字 -->
? ? 2018.12.3
昨天在二手書店買到了一本叫做《HTML5+CSS網(wǎng)頁設(shè)計(jì)案例教程》的書。
于是開始了正規(guī)的學(xué)習(xí)
本書基本是用記事本進(jìn)行網(wǎng)頁開發(fā) 據(jù)說是有利于打下基礎(chǔ)
首先建立站點(diǎn)根目錄用于存放網(wǎng)頁->接下來編寫代碼->保存記事本是應(yīng)用.html格式 且將文件類型改為所有類型。
接下來講的基本就是在慕課上講到的HTML的基本語法了
HTML基本語法
1.HTML標(biāo)記
eg：單標(biāo)記與雙標(biāo)記
單標(biāo)記：不需要前后對(duì)應(yīng)，單獨(dú)使用即可完整的表達(dá)意思。是用形式<標(biāo)記/>，如<br/>表示換行，HTML5之前<br>是正確的。
雙標(biāo)記：必須成對(duì)出現(xiàn)，包含始標(biāo)記和尾標(biāo)記。標(biāo)記可以成對(duì)嵌套但不能交叉嵌套。
2.HTML屬性
與標(biāo)記相關(guān)的特性稱作屬性，它是對(duì)標(biāo)記的必要說明，HTML屬性能夠賦予元素含義和語境，一般要為屬性賦值。
eg：<a >百度一下</a>
<a>...</a>是超鏈接標(biāo)記，“href”是屬性，“http://www.baidu.com”是屬性值
<標(biāo)記名 屬性1=“ ” 屬性2=“”...>
(1).屬性均放在相應(yīng)標(biāo)記的尖括號(hào)內(nèi)屬性之間用空格分開
（2）.不建議屬性值包含空白，但允許屬性值包含空白
2018.12.4
HTML 頭部<head>
a.<title>標(biāo)題欄中出現(xiàn)的內(nèi)容</title>
b.定義元數(shù)據(jù) <meta>
MATE元數(shù)據(jù) 用來描述 HTML的信息 使用<mate>元素來提供頁面的元信息，如網(wǎng)頁的關(guān)鍵字，作者信息，網(wǎng)頁過期時(shí)間。
<mate>位于文檔的頭部，它定義的信息不會(huì)出現(xiàn)在網(wǎng)頁中，僅在源文件中顯示。
一個(gè)HTML文檔的頭部可以有多個(gè)<mate>標(biāo)記，
常用元數(shù)據(jù)：
charset 字符集 定義網(wǎng)頁使用的字符集
<mate charset="UTF-8"/>
搜索引擎關(guān)鍵字
將mate元素的name屬性的屬性值設(shè)置為keyworks，就可以想搜索引擎說明網(wǎng)頁的關(guān)鍵字
<mate name="keywords" content="關(guān)鍵字，關(guān)鍵字，..."/>
設(shè)置網(wǎng)頁定時(shí)跳轉(zhuǎn)
當(dāng)<mate>標(biāo)記的http-equiv屬性值設(shè)置為refresh時(shí)，就可以設(shè)置頁面在經(jīng)過一定時(shí)間后自動(dòng)刷新，或者在一定時(shí)間后自動(dòng)跳轉(zhuǎn)到其他頁面。頁面定時(shí)刷新或跳轉(zhuǎn)的基本語法格式：
<mate http-equiv="refresh" content="秒" [url="資源路徑"/]>
語法中，"[url="資源路徑"]"是可選項(xiàng)，如果有此項(xiàng)對(duì)應(yīng)的網(wǎng)址或者路徑，則頁面定時(shí)跳轉(zhuǎn)；否則定時(shí)刷新
2018.12.5
HTML的主體<body>
1.添加文字
可以正常向body中添加文字，而其中控制空格的方式有所不同通過 來控制空格，幾個(gè)空格就輸入幾個(gè) 。
2.添加特殊符號(hào)
? ?3.代碼注釋<!--注釋文字 -->。
4.換行控制符<br/>
5.段落是<p></p> 在開始標(biāo)記和結(jié)束標(biāo)記之間形成一個(gè)段落。p元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白，瀏覽器會(huì)自動(dòng)在段落間添加這些空間。
6.<hr>水平線?
7.標(biāo)題文字由<h1> -> <h6>(1-6字號(hào)由大到小，同樣是雙標(biāo)記)
8.強(qiáng)調(diào)文本
<b>強(qiáng)調(diào)粗體文本</b>
<i>強(qiáng)調(diào)斜體文本</i>
9.插入，刪除（個(gè)人感覺沒有任何卵用）
<ins>插入的文本</ins>(就是加一個(gè)下劃線）
<del>刪除的文本</del>(就是這樣)
10.小型文本 小角標(biāo)（標(biāo)簽 商標(biāo)等）
2018.12.6
1.上下標(biāo)（如平方）
<sub>下表文本</sub>
<sup>上標(biāo)文本</sup>
2.注音文本（顯示在文字上方 如：拼音）
rp元素定義當(dāng)瀏覽器不支持ruby元素時(shí)顯示的內(nèi)容
<ruby>
? ? 中文或字符<rt>中文的發(fā)音或字符的解釋</rt>
</ruby>
3.標(biāo)注(雙標(biāo)記，與正常文字略有不同)
<cite>
4.定義日期時(shí)間（雙標(biāo)記，定義時(shí)間文字）<time>
5.列表
a.無序列表<ul>
類似于標(biāo)記 eg：
<ul>
? ? <li>無序列表項(xiàng)</li>
? ? <li>無序列表項(xiàng)</li>
</ul>
b.有序列表<ol>
按照順序 1，2，3....
格式與無序相似
6定義列表<dl>/<dt>/<dd>
創(chuàng)建定義列表<dl>...</dl>
<dt>標(biāo)記定義列表項(xiàng)
<dd>描述列表中的項(xiàng)目
2018.12.7
網(wǎng)頁圖像和多媒體元素
1.在網(wǎng)頁中添加圖片
圖像是無法插入到HTML文檔中的，實(shí)際上是鏈接到HTML文檔中，因此，在<img>元素中scr屬性是必須的。
基本語法：<img src="url">
語法說明：scr屬性的屬性值是圖像的URL，指明網(wǎng)頁中要引用圖像的位置，也就是指出引用圖像文件的相對(duì)路徑或絕對(duì)路徑
<img scr ="images/bluef.jpg"/>
指明為images文件夾中的bluef.jpg.
../表示上一級(jí)目錄? ? ? /表示下一級(jí)目錄
替代圖像的文本——alt屬性
在圖片不能顯示時(shí)，使用alt屬性代替圖片顯示
<img scr ="images/bluef.jpg" alt="替代文本"/>
圖像的寬高——width和height
<img src="url" width="像素（..px）|百分比（..%）" height=?"像素（..px）|百分比（..%）"/>
2.在網(wǎng)頁中加入視頻<video>
視頻的資源屬性——src屬性
<video src="視頻路徑"/>
您的瀏覽器不支持video元素
</video>
當(dāng)視頻無法正常顯示時(shí)將用<video>與</video>之間的文字代替。
視頻播放控制屬性——controls屬性
在<video>元素中controls屬性設(shè)置是否為視頻添加瀏覽器自帶的播放控制條s
<video src="視頻路徑" controls="controls"/>
您的瀏覽器不支持video屬性
</video>
視頻播放準(zhǔn)備控件——preload
在<video>元素中，如果設(shè)置preload屬性，則在頁面加載時(shí)就加載視頻，并且準(zhǔn)備播放，該屬性有三個(gè)可選擇的值:auto,meta,none 默認(rèn)值auto
auto:表示當(dāng)前頁面加載后加入整個(gè)視頻
meta：表示頁面加載后只加載媒體的元數(shù)據(jù)
none：表示當(dāng)前頁面加載后不載入視頻
<video src="視頻路徑" preload="auto"/>
您的瀏覽器不支持video屬性
</video>
其他屬性
<video>與<source>的配合使用
source元素常用的幾個(gè)屬性 src：指出媒體源的URL地址，type指出媒體元的播放類型，通常用到視頻格式中，media包含了指定的媒體源所匹配的編解碼器信息
<video>元素中科院指定多個(gè)source元素，瀏覽器按source標(biāo)記的順序檢測指定的視頻是否能播放，如果不能換下一個(gè)，此方法多用于兼容不同的瀏覽器
<video controls="controls"/>
<source src="rabit.ogv" type="video/ogg"/>
<source src="rabit.mp4" type="video/mp4"/>
<source src="rabit.webM" type="video/webM"/>
您的瀏覽器不支持video元素
</video>
3.在網(wǎng)頁中加入音頻元素<audio>
與<video>元素相似，沒有width，height，poster
資源屬性src
控制屬性controls
準(zhǔn)備播放屬性preload
循環(huán)播放屬性loop
4.插入多媒體文件<embed>(文本，圖像，聲音，動(dòng)畫，視頻等的統(tǒng)稱)
<embed src="url" width="像素" height="像素" type="類型"></embed>
添加視頻音頻圖片的方式與上面類似，width,height,type 需要時(shí)進(jìn)行添加
5.鏈入對(duì)象<object>
<object>元素可以定義一個(gè)嵌入的對(duì)象?？梢允褂?lt;object>元素想web頁面中添加文件。
<object>元素支持多種不同的媒介類型，如圖片，音頻，視頻等
使用<object>元素是必須要指定的date屬性和type屬性。
在頁面中嵌入圖片
<object type="image/jepg" date="flower.jpg" height....><object>
在頁面中嵌入網(wǎng)頁
<object type="text.html" date="http://www.baidu.com" ....></object>
6.定義媒介分組和標(biāo)題<figure>/<figcaption>
<figure>元素是一種元素的組合，可以帶有標(biāo)題。<figure>元素用來規(guī)定獨(dú)立的流內(nèi)容，表明網(wǎng)站的制作頁面上一塊的獨(dú)立內(nèi)容，將其從頁面上移除后不會(huì)對(duì)頁面上的其他內(nèi)容造成影響。<figcation>可以定義<figure>元素的標(biāo)題。
<figure>
<figcaption>標(biāo)題</figcaption>
...
</figure>
一個(gè)<figure>元素內(nèi)僅有一個(gè)<figcaption>
2018.12.8
超鏈接
鏈接：鏈接標(biāo)記<a>文本或圖片</a>，將文件或圖片標(biāo)識(shí)為鏈接源點(diǎn)
屬性href=...，標(biāo)記<a>的最基本屬性
路徑地址(URL)
11.14
至于為什么更新到超鏈接不更新了，主要是html和css內(nèi)容比較簡單的，但是相對(duì)多而雜，如果這樣的學(xué)習(xí)，肯定記得會(huì)更牢固，到速率就比較慢了，為了早點(diǎn)完成一個(gè)靜態(tài)網(wǎng)頁的設(shè)計(jì)，還是趕快學(xué)完了
前幾天主要忙著學(xué)高數(shù)（考研猛做課后題），倒是把前端的學(xué)習(xí)拉下了，因此今天我把html css基本學(xué)完了，并且準(zhǔn)備著手設(shè)計(jì)我的網(wǎng)頁了。
人生路漫漫，道阻且長。
12.17
雖然不知道這兩天在干啥，但確實(shí)是這個(gè)靜態(tài)網(wǎng)
頁的設(shè)計(jì)，今天一天的時(shí)間就完成了，網(wǎng)頁設(shè)計(jì)的也比較簡單，當(dāng)然html和css還是比較好掌握的，雖然知識(shí)點(diǎn)比較雜。
首先我的網(wǎng)頁是我的一個(gè)主頁，所以要包含個(gè)人介紹，個(gè)人博客（我直接鏈接到簡書了 哈哈哈哈），寫博客，登錄，注冊，最近資訊。
因?yàn)槲蚁氲剿械亩加猛粋€(gè)設(shè)計(jì) ，于是我將css和html分開寫通過link連接到html中。
這是很簡單的一個(gè)過程 主要的設(shè)計(jì)在css中
其中container 父div樣式（html文件總體上表現(xiàn)為外層使用id為container的div盒子）
begin是導(dǎo)航欄通過區(qū)塊顯示從而寫出來水平菜單，其中涉及到div與span的區(qū)別
以下是在沒有對(duì)開發(fā)網(wǎng)頁頁面設(shè)置css樣式時(shí)候情況下，系統(tǒng)默認(rèn)情況下的介紹
div與span區(qū)別
div占用的位置是一行，
span占用的是內(nèi)容有多寬就占用多寬的空間距離
