从零开始的全栈工程师——html篇1
全棧工程師也可以叫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
總結
以上是生活随笔為你收集整理的从零开始的全栈工程师——html篇1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用CSS实现无滚动条滚动
- 下一篇： html5中如何去掉input type