摘要：前言一直都想把前端基礎知識點梳理一下，由于種種原因主要是因為懶，一直拖到了現(xiàn)在。年月日，上線了地球上第一個網(wǎng)站，解釋了萬維網(wǎng)的概念，年月日，宣布萬維網(wǎng)對所有人免費使開放。
1、前言
一直都想把前端基礎知識點梳理一下，由于種種原因（主要是因為懶(●"?"●)），一直拖到了現(xiàn)在。好了，廢話不多說，直接開干！
因特網(wǎng) 和 萬維網(wǎng)
很多同學搞不清楚因特網(wǎng)和萬維網(wǎng)的區(qū)別，這里簡單介紹一下。
因特網(wǎng)（Internet）
也叫互聯(lián)網(wǎng)，是由全球各地的計算機通過海底光纜，光纖，雙絞線，電磁波等物理介質(zhì)互相連接組成的網(wǎng)絡。因特網(wǎng)內(nèi)的計算機之間可以相互通信，傳遞資源。
萬維網(wǎng)（ World Wide Web，簡稱www）
是一個由超文本文件相互連接組成的系統(tǒng)，它將因特網(wǎng)上的文本、圖像、聲音等資源鏈接到一起。世界各地的計算機連接只要到因特網(wǎng)，就可以用瀏覽器軟件來獲取這些信息資源。因此，萬維網(wǎng)只是因特網(wǎng)功能的一部分。使用萬維網(wǎng)服務必須有：服務器和瀏覽器。
上網(wǎng)
我們說的上網(wǎng)，是指讓計算機設備（PC,智能手機，平板電腦...）接入因特網(wǎng)，在因特網(wǎng)上開展各種活動。
因特網(wǎng)為我們提供了非常豐富的服務。
萬維網(wǎng)服務（www）
郵件首發(fā)（E-mail）
文件傳輸（FTP）
在線交流（QQ，微信，陌陌...）
在線游戲（王者榮耀，絕地逃生）
因特網(wǎng)上大多內(nèi)容是免費的，但是我們上網(wǎng)卻不是免費的。需要向運營商繳納一定的費用，用于運營商安裝，維護光纜，衛(wèi)星，等通信必須的物理設備。
軟件架構
常見的軟件架構有兩種，
B/S（即瀏覽器/服務器，browser/server）
C/S（即客戶端/服務器client/server）
我們前端開發(fā)，主要是B/S架構。無須安裝特定的軟件，只要有瀏覽器的計算機中，就可以訪問應用。
而C/S架構，必須要安裝特定的軟件。比如王者榮耀，必須安裝特定的客戶端，才能和其他玩家一起游戲。
2、初識網(wǎng)頁
純文本
純文本文件用來保存單純的文字信息，這些信息沒有顏色，排版等樣式。
文件大小只由文字的數(shù)量決定：
一個漢字占2個字節(jié)，
一個英文字母占1個字節(jié)。
什么是HTML
HTML：Hyper Text Mark-up Language，超文本標記語言
它是使用純文本來描述網(wǎng)頁內(nèi)容結構的一種標記語言。 比如文字，圖片，多媒體等。
是目前互聯(lián)網(wǎng)上應用最為廣泛的語言。
html文件是純文本文件的一種，但是與普通的純文本又有所區(qū)別。
它有一個最基本的特征：
可以將網(wǎng)絡上的其它文檔與當前文檔鏈接起來，進而組成一個網(wǎng)----萬維網(wǎng)。
一個文件如果以 .html為擴展名，那么它就是一個網(wǎng)頁。
HTML發(fā)展史簡述
蒂姆·伯納斯·李（Tim Berners-Lee），是歐洲原子核研究中心（CERN）的一名物理學家。他為了讓各國的核物理學家能夠通過計算機傳遞信息，及時溝通。在1989年，他開發(fā)出世界上第一個 Web服務器和瀏覽器。允許研究員通過網(wǎng)絡查詢其他研究員的聯(lián)系方式。
蒂姆為他的發(fā)明定名為：World Wide Web，即（WWW）。
1991年8月6日，CERN上線了地球上第一個網(wǎng)站，解釋了萬維網(wǎng)的概念，
1993年4月30日，CERN宣布萬維網(wǎng)對所有人免費使開放。
1994年10月，lee老師建立了萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，簡稱W3C），致力于制定各種網(wǎng)頁技術的標準規(guī)范。
2017年，lee老師因“發(fā)明萬維網(wǎng)、第一個瀏覽器和使萬維網(wǎng)得以擴展的基本協(xié)議和算法”而獲得2016年度的圖靈獎。
第一版 ——1993 ——草案
HTML 2.0 ——1995年11月 ——標準
HTML 3.2 ——1997年1月14日 ——標準
HTML 4.0 ——1997年12月18日 ——標準
HTML 4.01 ——1999年12月24日 ——標準
HTML 5 ——2014年10月28日 ——標準
HTML編輯和瀏覽
編輯
編輯網(wǎng)頁要使用編輯工具，如最簡單的記事本，還有比較智能的集成開發(fā)環(huán)境（IDE），如 Brakets，Sublime Text，Webstorm等等。使用自己覺得趁手的就行了。
瀏覽
編輯好的網(wǎng)頁是拿來給用戶看的，用戶通過瀏覽器可以看到網(wǎng)頁的內(nèi)容，
以下是市場上最流行的五大瀏覽器。其中谷歌瀏覽器是對最新版HTML5支持最好的瀏覽器， 非常適合用于開發(fā)和調(diào)試。
第一個網(wǎng)頁
右鍵新建一個文本文檔，
用記事本打開，輸入一些內(nèi)容，
將其后綴名改為.html
用瀏覽器打開。
我們可以看到，在html文件中，不管我們怎么換行。
在瀏覽器中瀏覽時，所有的文字都會擠在一起。
因為這些文字都沒有語言的意義，瀏覽器就按照自己的方式來處理（刪除多余空格，只留下一個）。
在HTML文件中使用標簽可以讓網(wǎng)頁中的內(nèi)容變得有意義：
只需要用相應的標簽對將文字包裹起來即可：
段落
上述代碼，告訴瀏覽器，“段落”兩個字應該被當作段落處理。
標簽只是為了給瀏覽器看，而對于用戶是不可見的。
2、基本語法
一個網(wǎng)頁中，可能包含下列常見的元素：
文字
圖片（gif，png，jpg）
動畫（gif，swf）
視頻（mp4）
音頻（mp3）
超鏈接
表單
每一種網(wǎng)頁元素在html中都有相應的標簽與之對應。
HTML元素和標簽
標簽：
由尖括號包圍的關鍵詞，比如 ，就是標簽。標簽一般成對出現(xiàn)。
如：
。也有多帶帶出現(xiàn)的標簽，如：
wdth屬性和height屬性讓圖片具備了指定的寬高。
元素內(nèi)部可以嵌套其他元素
比如：
以上的代碼，我們可以說：
p元素是div元素的 “子元素”，span元素是div元素的 “后代元素”。 div元素是p元素的 “父元素”，div元素是span元素的 “祖先元素”。
HTML代碼的規(guī)范
代碼縮進：
空格，換行不會影響到顯示在瀏覽器中的效果。
為了代碼便于調(diào)試，美觀，易讀。我們要養(yǎng)成良好的縮進代碼習慣。
代碼注釋：
我們寫的代碼要方便別人閱讀，所以很多代碼都需要寫一些注釋，解釋代碼的功能。
注釋的代碼會被瀏覽器忽視。
html中有專門的標簽來寫注釋。
在大多數(shù)IDE中，添加注釋的快捷鍵是：ctrl + /
3、常見元素
結構元素
與網(wǎng)頁文件的結構相關的一些元素有如下四個：
…
…
…
它位于文檔最開始的位置，告訴瀏覽器當前頁面使用了HTML的哪個版本，
各版本網(wǎng)頁聲明的寫法有所區(qū)別：
HTML5：
HTML4：
低版本的html標準不支持高版本的某些功能，但高版本的標準可以兼容低版本。
所以我們直接寫成即可。
IDE軟件自動生成以上元素的快捷鍵是：
html5： ! + Tab或 html:5 + Tab
html4： html:4t + Tab
…
該元素告訴瀏覽器這是一個html文檔，
與 標簽分別限定了文檔的開始和結束，
html元素是其它元素的容器。除了聲明以外的所有元素，按照規(guī)范都應該包裹在其內(nèi)部。
html元素有兩個子元素：head和body
…
該元素也是一個容器。一些不需要當作內(nèi)容來顯示的元素，按照規(guī)范都應該包裹在其內(nèi)部。
比如這些元素：
… ----------------網(wǎng)頁的標題
…--------------網(wǎng)頁的元信息
---------------網(wǎng)頁應用的樣式
英國人用英語稱呼它為：panda
中國人用中文稱呼它為：熊貓
計算機也類似，對于漢字的“你”字，
用Unicode碼表示： u4f60
用ASCII碼表示： 你
對同樣的字符使用不同的字符集編碼，就會出現(xiàn)不同的結果，也就是亂碼問題出現(xiàn)的根源。
網(wǎng)頁文檔默認的字符格式是UTF-8，又稱“萬國碼”，它包含了全世界所有國家需要用到的字符。
如果以后在網(wǎng)頁中遇到亂碼的情況。
1.確保文檔本身的字符集為UTF-8，可以用記事本打開，另存為UTF-8形式；
2.確保文檔內(nèi)部的meta元素設置的字符集為UTF-8
2.網(wǎng)頁描述
使用搜索引擎搜索某個頁面的時候，會出現(xiàn)一段用于描述網(wǎng)站的文字。這些文字就是網(wǎng)站的描述信息，可以使用meta標簽來設置。
3.作者信息
4.關鍵詞
搜索引擎通過關鍵詞抓取網(wǎng)頁。
定義文檔的主體。按照規(guī)范，我們應當將所有需要被瀏覽器顯示的內(nèi)容放到body元素內(nèi)部。
定義文檔的主體。按照規(guī)范，我們應當將所有需要被瀏覽器顯示的內(nèi)容放到body元素內(nèi)部。
格式元素
格式元素的作用是為網(wǎng)頁中的內(nèi)容添加一定的格式。
1.P元素
它屬于文本級元素，內(nèi)部只能放置文本，圖片，表單元素。 如果放置了其他標簽，也會被瀏覽器自動處理。 瀏覽器中的開發(fā)者工具中可以查看到它的處理結果。
2.列表元素
列表標簽的主要作用是使特定的內(nèi)容有序化
列表標簽有三種，分別是：
無序列表，
有序列表
定義列表。
a.無序列表
無序列表元素的列表項之間，沒有先后順序。
由
和- 元素定義的:
ul：英文單詞unordered list的縮寫，表示沒有順序的列表；
li：英文單詞list item的縮寫，表示列表的項。
按照規(guī)范這兩個元素都不應該多帶帶使用。
無序列表的默認符號是圓點。
ul元素的type屬性，可以改變列表項的符號。
取值有：
disc(圓)
circle（圓圈）
square（方塊）
實際開發(fā)中一般不會使用到這些樣式，而是使用CSS進行樣式的設計。
b.有序列表
有序列表元素的列表項之間，有一定的先后順序。
由
和- 定義:
- 洗
- 剪
- 吹
- 燙
ol元素也有自己的type屬性，取值有：
1（數(shù)字）
A（大寫字母）
a（小寫字母）
I（大寫羅馬字母）
i（小寫羅馬字母）
ol元素還可以定義列表的起始編號，如我們希望列表的第一個編號為5，而不是1，則需要定義元素的start屬性
c.定義列表
定義列表，通常用在標題下方有內(nèi)容的場景中。
由
,- ,
- 定義:
- 列表標題
- 列表內(nèi)容
- 列表內(nèi)容
dl：是definition list的縮寫，表示定義一個列表
dt：是definition title的縮寫，表示定義標題，dt是dl中的項。
dd：是definition description的縮寫，表示定義描述，dd中的內(nèi)容是用來描述dt的
三種列表在開發(fā)中最常用的是ul。其他兩種了解即可。
3.表格元素
將內(nèi)容放在表格中，可以顯得更加整齊。
html中，以下標簽用于構建表格：
創(chuàng)建一個表格：
定義一個表格，至少需要4種標簽：table，tr，td，tbody.如果代碼中缺省的tbody，會被瀏覽器自動補充。
上述代碼構建的表格，并不是我們想象中的樣子。
我們需要為這三個元素添加一些屬性，讓表格變得稍微好看一些。
表格的美化：
1. border 和 bordercolor
給表格設置邊框和邊框顏色，只能設置給
標簽。
2. bgcolor
設置背景顏色，寫在
標簽中對整個表格生效；
寫在中對某一行中的所有單元格生效；
寫在中對某個單元格生效。
3. align
設置對其方式，寫在 標簽中調(diào)整表格在網(wǎng)頁中的位置；
寫在中對某一行的所有單元格內(nèi)容生效；
寫在中對某個單元格中的內(nèi)容生效。
4. cellpadding 和 cellspacing
cellpadding用于設置單元格內(nèi)部間距，
cllspacing用于設置單元格與單元格之間的距離。設置給 標簽
5. width 和 height
設置表格的寬高。
tr標簽不能設置寬度，因為它的寬度與整個表格的寬度一致。
單元格的寬度不管設置多少個，都以最大的為準。
6. rowspan屬性和colspan屬性：
實際的應用中的表格一般都是不標準的。
有些單元格可能占據(jù)多行，多列的情況。
如：
讓一個單元格跨越多行。
| 內(nèi)容 |
讓一個單元格跨越多列。
| 內(nèi)容 |
跨行和跨列會導致一些單元格本來的位置被占據(jù)，
為了使布局整齊，我們需要將位置被占據(jù)了的單元格刪除。
表格總結：
單元格元素中可以嵌套任何元素。
最開始的網(wǎng)頁，設計師們就是使用表格來對網(wǎng)頁進行排版和布局的。
現(xiàn)在表格網(wǎng)布局已經(jīng)成為歷史。
文本元素
文本標簽的作用是讓網(wǎng)頁中的文字具備某種樣式。常見的文本標簽有：
"strong" 和 "em" 標簽表示的是語言的意義，
可以理解為更委婉地告訴瀏覽器該文本的重要性。語義化更加便于人理解。
而"i" 和"b" 標簽直接告訴瀏覽器應該如何顯示文本。
按照w3c官方規(guī)范，建議使用"strong"和"em"標簽。
圖像元素
在頁面上插入圖片。圖片的格式可以是：jpg,gif,png,bmp.
將圖片的地址賦值給src屬性即可：
img是image的縮寫。圖像元素是單標簽元素，只有一個標簽。
圖像元素的屬性：
| src |
單詞source的縮寫，圖片的地址，即可以是本地地址，也可以是網(wǎng)絡地址。 |
| alt |
單詞altermate的縮寫，代替。如果圖片加載失敗了，可以在網(wǎng)頁上看到它的值。 |
| border |
圖片的邊框?qū)挾?/td>
|
| width |
圖片的寬度，如果不設置，就是圖片本身的寬度。 |
| height |
圖片的高度。 |
| title |
當鼠標移到圖片上方的時候顯示的文字。 |
路徑
凡是需要從外部引入資源的元素都需要使用src這個屬性。
從HTML文檔和資源的位置關系來看，它們的位置關系可以分為相對路徑和絕對路徑。
1.相對路徑：
從自己出發(fā)找到別人的位置。
a.如果資源在HTML文檔的同一級目錄，直接引用文件名即可：
b.如果資源在HTML文檔的同級目錄下的文件夾中，加上文件夾名即可：
c.如果資源在HTML文檔的上級目錄中，就用”../”來表示上一級，”../../”表示上兩級，以此類推：
站點網(wǎng)頁文件不管拷貝到哪里，文件和圖片的相對路徑關系都是不變的。
但是資源和網(wǎng)頁必須在同一個盤符下。也就是在D盤的html文件不應該引用C盤的資源。
2.絕對路徑：
絕對路徑就直接寫具體地址即可：
a.如果在網(wǎng)絡上：
b.如果在本地硬盤：
第二種方式?jīng)]有任何意義，開發(fā)項目中不會用到的。因為實際項目中的服務器是大多是linux系統(tǒng)，沒有windows系統(tǒng)這樣的C盤，D盤。
錨點元素a
生活中船舶的錨，是用于將船體穩(wěn)定在水中的某個地方。
與其類似，HTML中也有一個元素，叫做錨元素a。它也被叫做超鏈接。
它作用是將用戶的視線拋到指定的目標上去。
這個目標可以是：
當前頁面的某個位置，
其它的網(wǎng)頁或其它網(wǎng)頁的某個位置
郵件地址。
通過超鏈接，可以將因特網(wǎng)中的資源相互連接，組成一個個網(wǎng)站，進而組成萬維網(wǎng)。
這也是HTML超文本標記語言的意義所在。
1.鏈接到當前頁面的某個位置有兩種形式：
id，這種形式對頁面中的任意元素都有效。
百度官網(wǎng)
內(nèi)容
name，這種形式只對a元素有效。
百度官網(wǎng)
這是叫做張三的錨點元素
2.鏈接到其它網(wǎng)頁：
鏈接到其他網(wǎng)頁：
百度官網(wǎng)
點擊網(wǎng)頁上的文字“百度官網(wǎng)”即可跳轉(zhuǎn)到百度的首頁。
href 是 hypertext reference的縮寫，意思是超文本地址。
它的值可以是具體的資源地址，比如圖片，mp3，mp4等。用于文件的下載。
鏈接到其它網(wǎng)頁的某個位置：
百度官網(wǎng)
3.鏈接郵件：
錨點元素還能啟動當前計算機安裝的郵件軟件以發(fā)送郵件。
目標郵箱
除了href之外，錨元素有另外的屬性：
target：目標，是否在新窗口中打開。不寫該屬性就默認在當前窗口打開。
如果要在新窗口打開文檔，就將其值設置為”_blank”；
title：鼠標移到錨點標簽上方時，顯示的文字。
錨點標簽中除了可以放文字之外，還能放圖片?？梢渣c擊圖片進行鏈接。
表單元素
html表單是站點搜集用戶信息的重要手段。
表單主要用于讓用戶輸入信息，然后提交給服務器。
表單在網(wǎng)頁中無處不在。
表單是網(wǎng)頁上的一個特定區(qū)域。由form元素定義。
需要提交到服務器的信息都在form里面的的各種表單元素中填寫。
action屬性：表示你要將數(shù)據(jù)提交到的目標地址。
method屬性：表示你希望用什么方式將數(shù)據(jù)提交。有get、post…等方式。
get有數(shù)據(jù)量限制，post無限制。
如果只是獲取數(shù)據(jù)，用get；涉及私密數(shù)據(jù)的提交，那么就用post。
用來采集信息的元素有很多，比較常見的有：
1.單選框：
多個選項中只能選擇一個。
示例代碼：
蘋果
桔子
芒果
注意：
1.要達到互斥效果，必須將這些選項的name值設置為相同的值。
2.用checked屬性可以讓某一項默認選中。
2.復選框，
多個選項中可以選擇多個。
示例代碼：
蘋果
桔子
芒果
注意：
1. 這些選項的name值必須設置為相同的值。
2. 用checked可以讓某一項默認選中。
3.lable標簽
可以看到，我們寫文本框，密碼框，單選框，多選框的時候，旁邊的提示文字都是和這些控件沒有任何關系的。如：
蘋果
點擊蘋果二字，是不會選中多選框的。
HTML中的lable標簽用來將文本和表單控件綁定在一起。用法如下：
id可以唯一地標識某個元素，for將lable中的文本與表單控件綁定起來。
這時，我們點擊文字，就相當于點擊了表單控件。
下拉列表
下拉列表，鼠標點擊，可以出現(xiàn)一個列表，用于選擇信息。
示例代碼：
多行文本輸入框
多行文本框，可以輸入多行文字。
cols表示textarea的寬度（列），
rows表示textarea的高度（行）。
標簽對中間不寫內(nèi)容，如果寫了，會被當作默認值。
表單中的信息填寫好了之后，我們需要用戶點擊按鈕來將其提交到action屬性指定的地址。HTML提供了一種提交按鈕來完成這個提交操作。
如果信息填寫有錯，想要全部重新填寫。我們不用一個一個地刪除。
HTML提供了另外一種重置按鈕來清除信息。
這兩種按鈕有默認的文字，“提交”和“重置”，
如果想在按鈕上顯示其他文字，就設置一個value值即可。
“提交”和“重置”按鈕是兩種特殊的按鈕，自身已經(jīng)具備了特定的功能。雖然功能不同，但是長相是相同的。
實際開發(fā)中，我們更多的是賦予某個按鈕其他功能，這就需要用到普通按鈕。普通的按鈕寫法如下：
方式一：
方式二：
普通按鈕的行為一般使用JavaScript腳本設置。
字符實體
在 HTML 中，很多特殊字符需要用字符實體來實現(xiàn)。
比如‘>’ 對應的字符實體是 “>” 。(greater than的縮寫)
更多的字符實體見：http://www.w3cschool.cn/htmlt...
HTML部分完。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51396.html
-
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
-
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
-
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
 asoren
評論0
收藏0
-
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
-
摘要：基礎基礎是一種標記語言，不是編程語言，需要明確這點。元素標簽內(nèi)容基礎基礎負責文本樣式的呈現(xiàn)，既然將和分離開，各自只負責各自的職責，那么肯定需要某種方式將兩者連接在一起。
本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發(fā)布
聲明
本系列文章內(nèi)容全部梳理自以下四個來源：
《HTML5權威指南》
《JavaScript權威指南》
MDN web docs
Github:smyh...
男|高級講師
-
閱讀 1368·2021-11-25 09:43
-
閱讀 1931·2021-11-12 10:36
-
閱讀 6132·2021-09-22 15:05
-
閱讀 3508·2019-08-30 15:55
-
閱讀 2056·2019-08-26 14:06
-
閱讀 3672·2019-08-26 12:17
-
閱讀 537·2019-08-23 17:55
-
閱讀 2483·2019-08-23 16:23
<
| |
