全棧工程師也可以叫web 前端 H5主要是網站 app 小程序 公眾號這一塊

HTML篇

html(超文本標記語言，標記通用標記語言下的一個應用。)

“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

測試瀏覽器為chrome(谷歌)瀏覽器 當然其他瀏覽器也可以 不過最好用谷歌

開發工具有記事本? Sublime? dreamwear webstorm? hbulider 我們這里用hbulider來介紹

?

?

一.網頁是由什么構成的

title 主題，題目，

Url 網址

Body 網站內容

?

?

二.標簽

標簽分為雙標簽和單標簽 單標簽也叫空標簽?

結構為單標簽：<單標簽/>? ?

? ? ? ? ? ?雙標簽：<雙標簽開始></雙標簽結束>

單標簽舉例：<img src=""/>(插圖片用的標簽)

雙標簽舉例：<p></p>(段落標簽)

?

?

三.網頁的骨架

?

?

四.標簽的屬性

這里用圖片標簽來解釋一下<標簽名 屬性=“屬性值”/>

?

?

五.常用的標簽

雙標簽 html? title? head? body? h1-h6? p? a?

b（加粗標簽）strong被H5舍棄了? i 傾斜標簽? sup 上標標簽? sub 下標標簽

em（小圖標的）div 盒子標簽? span 內斂標簽? 表格 列表 等標簽

單標簽 <img />?? <hr/>(分割線)?? <br/>(換行)? <meta /> (網頁元信息)

注釋：Html特有的注釋? <!--被注釋的內容-->

?

1.插圖片用的標簽：

img:<img src="本地資源或網絡資源"/>(插圖片用的標簽)

Src 是指圖片的路徑

圖片的資源分為本地資源或網絡資源

本地資源：就是自己保存的圖片

網絡資源：在網站上的圖片

?

2.超鏈接

a:<a href=" "></a>(超鏈接)

a有兩個屬性?一個是 href? 屬性值為 需要跳轉的頁面地址比如(http://www.baidu.com)或者本地頁面地址

另一個是target屬性值為 跳轉頁面打開的方式 常用的兩個屬性值為 _blank(在一個新的網頁打開?) 或? _self(默認的)

?

3.起名方式

1）標簽名

2）id起的? 使用的時候加#

3）class類 使用的時候加.

起名的目的就是為了給他添加樣式? style ?其實也是屬性

屬性:代表事物的一些特征，比如 width height color background 等

?

4.style用法

書寫規范 {} 是shift [ 出來 {}

起名規范? 不能用漢字起 第一個字母不能是特殊符號 第一個字母必須是英文字母

?

5.表格標簽<tabale></table>

Border 是決定邊框粗細的屬性

cellspacing 是單元格空間的屬性?

cellpadding 是單元格內部的邊距的屬性。

表格的行:<tr></tr>? ?列:<td></td>

比如插入一個像這樣

?

的表格

就是三個<tr></tr>在每個<tr></tr>中間插三個<td></td>

為

?

?

Img插入table中

會發現出現余白，怎么解決？

colspan? 水平合并單元格的個數

rowspan? 垂直合并單元格的個數

?

案例

表格中插入表格

圖：

思路：插入一個三行三列600X600的表格? 合并1 2 3在123中插入一個兩行六列的表格

答案：

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=1j11ab&title=從零開始的全棧工程師——html篇1