前端基礎(chǔ)入門一（HTML）-創(chuàng)新互聯(lián)

學習大綱

了解常用瀏覽器
掌握WEB標準
理解標簽語義化
掌握常用的排版標簽
掌握常用的文本格式化圖像鏈接等標簽
掌握三種列表標簽
掌握表格標簽
掌握表格標簽
掌握表單標簽
成都創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)絡營銷、企業(yè)網(wǎng)站建設(shè)，友情鏈接，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計到用戶體驗提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
- *

HTML

能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標簽和鏈接）

開發(fā)工具

我們主要用的開發(fā)工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網(wǎng)頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

瀏覽器內(nèi)核（理解）

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和?JS 引擎。
渲染引擎?：它負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎?則是解析 Javascript 語言，執(zhí)行 javascript語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。

最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。有一個網(wǎng)頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多，如加上沒什么人使用的非商業(yè)的免費內(nèi)核，可能會有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。

了解一點：移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。

iOS以及WP7平臺上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的>自己是個做了幾年開發(fā)的老碼農(nóng)，希望本文對你有用！這里推薦一下我的前端學習交流圈：767273102 ，里面都是學習前端的，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計模式】到移動端HTML5的項目實戰(zhàn)的學習資料都有整理，送給每一位前端小伙伴。2019最新技術(shù)，與企業(yè)需求同步。好友都在里面學習交流，每天都會有大牛定時講解前端技術(shù)!

Web標準

web標準的好處
1、讓Web的發(fā)展前景更廣闊

2、內(nèi)容能被更廣泛的設(shè)備訪問

3、更容易被搜尋引擎搜索

4、降低網(wǎng)站流量費用

5、使網(wǎng)站更易于維護

6、提高頁面瀏覽速度

web標準的結(jié)構(gòu)

結(jié)構(gòu)標準：結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類，咱們主要學的是HTML。最重要
表現(xiàn)標準：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網(wǎng)頁模型的定義及交互的編寫，咱們主要學的是 Javascript

HTML初識

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”。是用來描述網(wǎng)頁的一種語言。

所謂超文本，因為它可以加入圖片、聲音、動畫、多媒體等內(nèi)容，不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機的文件連接。

<h2>?我是一個大標題?</h2>

注意：體會文本標簽語言幾個詞語

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

總結(jié)： HTML 作用就是用標記標簽來描述網(wǎng)頁，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來。

HTML骨架格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

骨架結(jié)構(gòu)解析
1 HTML標簽：
作用所有HTML中標簽的一個根節(jié)點。大的標簽根標簽
2 head標簽：文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

注意在head標簽中我們必須要設(shè)置的標簽是title

3.title標簽：文檔的標題
作用：讓頁面擁有一個屬于自己的標題。
4.body標簽：文檔的主體以后我們的頁面內(nèi)容基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML標簽分類

在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 HTML、head、body都是HTML骨架結(jié)構(gòu)標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素

1.雙標簽

<標簽名>?內(nèi)容?</標簽名>

該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結(jié)束，一般稱為“結(jié)束標簽（end tag）”。和開始標簽相比，結(jié)束標簽只是在前面加了一個關(guān)閉符“/”。

比如?<body>我是文字?</body>

2.單標簽

<標簽名?/>

單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。

比如?<br?/>

HTML標簽關(guān)系

標簽的相互關(guān)系就分為兩種：

1.嵌套關(guān)系

<head>?<title>?</title>?</head>

2.并列關(guān)系

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

HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結(jié)構(gòu)，就只寫HTML標簽，認識標簽就可以了。不會再給結(jié)構(gòu)標簽指定樣式了。

HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。

排版標簽

標題標簽（熟記）

單詞縮寫： head 頭部. 標題 title 文檔標題

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h2>、<h3>、<h4>、<h5>、<h6>和<h7>
其基本語法格式如下：

<hn>?標題文本?</hn>

段落標簽（熟記）

<p>?文本內(nèi)容?</p>

水平線標簽（認識）

<hr?/>是單標簽

換行標簽（熟記）

<br?/>

div span標簽(重點)

div span 是沒有語義的是我們網(wǎng)頁布局主要的2個盒子 css+div

div 就是 division 的縮寫分割，分區(qū)的意思其實有很多div 來組合網(wǎng)頁。

span, 跨度，跨距；范圍

語法格式：

<div>?這是頭部?</div>?<span>今日價格</span>

文本格式化標簽(熟記)

在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
前端基礎(chǔ)入門一（HTML）

b i s u 只有使用沒有強調(diào)的意思 strong em del ××× 語義更強烈

標簽屬性

使用HTML制作網(wǎng)頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設(shè)置。其基本語法格式如下：

<標簽名?屬性1="屬性值1"?屬性2="屬性值2"?…>?內(nèi)容?</標簽名>

在上面的語法中，

1.標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。

2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。

3.任何標簽的屬性都有默認值，省略該屬性則取默認值。

采取鍵值對的格式 key="value" 的格式

比如:

<hr?width="400"?/>

屬性是寬度

值是 400

圖像標簽img (重點)

單詞縮寫： image 圖像

HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽，要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關(guān)的屬性。其基本語法格式如下：

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。

<img?src="圖像URL"?/>

前端基礎(chǔ)入門一（HTML）

鏈接標簽(重點)

單詞縮寫： anchor 的縮寫 [???k?(r)] 。基本解釋錨, 鐵錨的

在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽環(huán)繞需要被鏈接的對象即可，其基本語法格式如下：

<a?href="跳轉(zhuǎn)目標"?target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。

注意：

1.外部鏈接需要添加?http://?www.baidu.com

2.內(nèi)部鏈接直接鏈接內(nèi)部頁面名稱即可比如 < a href="index.html"> 首頁

3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點定位（難點）

通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。

創(chuàng)建錨點鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點擊的）
  <a href="#two">   

2.使用相應的id名標注跳轉(zhuǎn)目標的位置。
  <h4 id="two">第2集</h4>

base 標簽基本的

base 可以設(shè)置整體鏈接的打開狀態(tài)

base 寫到 <head> </head> 之間

把所有的連接都默認添加 target="_blank"

特殊字符標簽（理解）

前端基礎(chǔ)入門一（HTML）

注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：

<!-- 注釋語句 -->?ctrl + / 或者 ctrl +shift + /

注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。

路徑(重點、難點)

前端基礎(chǔ)入門一（HTML）

實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為：相對路徑和絕對路徑

相對路徑

以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如img src="logo.gif" /。
圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如img src="img/img01/logo.gif" /。
圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對，意指當所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的

“D:webimglogo.gif”，或完整的網(wǎng)絡地址，例如“http://www.itcast.cn/images/l...”。

思路貫穿線

前端基礎(chǔ)入門一（HTML）

列表標簽

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

注意：

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。
無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致。

但是實際工作中，較少用 ol img src="media/1.jpg" />

自定義列表（理解）

定義列表常用于對術(shù)語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

表格 table(會使用)

創(chuàng)建表格

在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標簽。創(chuàng)建表格的基本語法格式如下：

<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ...
  </tr>
  ...
</table>

在上面的語法中包含三對HTML標簽，分別為 table</table、tr</tr、td</td，他們是創(chuàng)建表格的基本標簽，缺一不可，下面對他們進行具體地解釋
1.table用于定義一個表格。

2.tr 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。

3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。

注意：

1\. <tr></tr>中只能嵌套<td></td>
2\. <td></td>標簽，他就像一個容器，可以容納所有的元素

表格屬性

前端基礎(chǔ)入門一（HTML）

表頭標簽

表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單，只需用表頭標簽th</th替代相應的單元格標簽td</td即可。
前端基礎(chǔ)入門一（HTML）

表格結(jié)構(gòu)（了解）

在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標簽中，一般包含網(wǎng)頁的logo和導航等頭部信息。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標簽中，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

表格標題

表格的標題： caption
定義和用法

caption 元素定義表格標題。

<table>
   <caption>我是表格標題</caption>
</table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

合并單元格(難點)

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

 將多個內(nèi)容合并的時候，就會有多余的東西，把它刪除。    例如 把 3個 td 合并成一個， 那就多余了2個，需要刪除。

 公式：  刪除的個數(shù)  =  合并的個數(shù)  - 1

合并的順序先上先左

總結(jié)表格

表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
表格中由行中的單元格組成。
表格中沒有列元素，列的個數(shù)取決于行的單元格個數(shù)。
表格不要糾結(jié)于外觀，那是CSS 的作用。

表格的學習要求：能手寫表格結(jié)構(gòu)，并且能合并單元格。

表單標簽(掌握)

表單控件：

包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：

一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

  他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。

input 控件(重點)

在上面的語法中，input /標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，input /標簽還可以定義很多其他的屬性，其常用屬性如下表所示。
前端基礎(chǔ)入門一（HTML）

label標簽(理解)

label 標簽為 input 元素定義標注（標簽）。

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
  文本內(nèi)容
</textarea>

前端基礎(chǔ)入門一（HTML）

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

注意：

select</select中至少應包含一對option></option。
在option 中定義selected =" selected "時，當前項即為默認選中項。

表單域

在HTML中，form標簽被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。
method
用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
name
用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。

注意：每個表單都應該有自己表單域。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁名稱：前端基礎(chǔ)入門一（HTML）-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.chinadenli.net/article44/iopee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站維護、外貿(mào)網(wǎng)站建設(shè)、云服務器、網(wǎng)站導航、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

前端基礎(chǔ)入門一（HTML）-創(chuàng)新互聯(lián)

學習大綱

HTML

開發(fā)工具

瀏覽器顯示

瀏覽器內(nèi)核（理解）

Web標準

web標準的結(jié)構(gòu)

HTML初識

HTML骨架格式

HTML標簽分類

HTML標簽關(guān)系

HTML常用標簽

標題標簽（熟記）

段落標簽（熟記）

水平線標簽（認識）

換行標簽（熟記）

div span標簽(重點)

文本格式化標簽(熟記)

標簽屬性

圖像標簽img (重點)

鏈接標簽(重點)

錨點定位 （難點）

base 標簽 基本的

特殊字符標簽 （理解）

注釋標簽

路徑(重點、難點)

相對路徑

絕對路徑

思路貫穿線

列表標簽

無序列表 ul （重點）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會使用)

創(chuàng)建表格

表格屬性

表頭標簽

表格結(jié)構(gòu)（了解）

表格標題

合并單元格(難點)

總結(jié)表格

表單標簽(掌握)

input 控件(重點)

label標簽(理解)

textarea控件(文本域)

下拉菜單

表單域

錨點定位（難點）

base 標簽基本的

特殊字符標簽（理解）