从零开始的全栈工程师——html篇1
全棧工程師也可以叫web 前端 H5主要是網(wǎng)站 app 小程序 公眾號這一塊
HTML篇
html(超文本標(biāo)記語言，標(biāo)記通用標(biāo)記語言下的一個應(yīng)用。)
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
測試瀏覽器為chrome(谷歌)瀏覽器 當(dāng)然其他瀏覽器也可以 不過最好用谷歌
開發(fā)工具有記事本? Sublime? dreamwear webstorm? hbulider 我們這里用hbulider來介紹
?
?
一.網(wǎng)頁是由什么構(gòu)成的
title 主題，題目，
Url 網(wǎng)址
Body 網(wǎng)站內(nèi)容
?
?
二.標(biāo)簽
標(biāo)簽分為雙標(biāo)簽和單標(biāo)簽 單標(biāo)簽也叫空標(biāo)簽?
結(jié)構(gòu)為單標(biāo)簽：<單標(biāo)簽/>? ?
? ? ? ? ? ?雙標(biāo)簽：<雙標(biāo)簽開始></雙標(biāo)簽結(jié)束>
單標(biāo)簽舉例：<img src=""/>(插圖片用的標(biāo)簽)
雙標(biāo)簽舉例：<p></p>(段落標(biāo)簽)
?
?
三.網(wǎng)頁的骨架
?
?
四.標(biāo)簽的屬性
這里用圖片標(biāo)簽來解釋一下<標(biāo)簽名 屬性=“屬性值”/>
?
?
五.常用的標(biāo)簽
雙標(biāo)簽 html? title? head? body? h1-h6? p? a?
b（加粗標(biāo)簽）strong被H5舍棄了? i 傾斜標(biāo)簽? sup 上標(biāo)標(biāo)簽? sub 下標(biāo)標(biāo)簽
em（小圖標(biāo)的）div 盒子標(biāo)簽? span 內(nèi)斂標(biāo)簽? 表格 列表 等標(biāo)簽
單標(biāo)簽 <img />?? <hr/>(分割線)?? <br/>(換行)? <meta /> (網(wǎng)頁元信息)
注釋：Html特有的注釋? <!--被注釋的內(nèi)容-->
?
1.插圖片用的標(biāo)簽：
img:<img src="本地資源或網(wǎng)絡(luò)資源"/>(插圖片用的標(biāo)簽)
Src 是指圖片的路徑
圖片的資源分為本地資源或網(wǎng)絡(luò)資源
本地資源：就是自己保存的圖片
網(wǎng)絡(luò)資源：在網(wǎng)站上的圖片
?
2.超鏈接
a:<a href=" "></a>(超鏈接)
a有兩個屬性?一個是 href? 屬性值為 需要跳轉(zhuǎn)的頁面地址比如(http://www.baidu.com)或者本地頁面地址
另一個是target屬性值為 跳轉(zhuǎn)頁面打開的方式 常用的兩個屬性值為 _blank(在一個新的網(wǎng)頁打開?) 或? _self(默認(rèn)的)
?
3.起名方式
1）標(biāo)簽名
2）id起的? 使用的時(shí)候加#
3）class類 使用的時(shí)候加.
起名的目的就是為了給他添加樣式? style ?其實(shí)也是屬性
屬性:代表事物的一些特征，比如 width height color background 等
?
4.style用法
書寫規(guī)范 {} 是shift [ 出來 {}
起名規(guī)范? 不能用漢字起 第一個字母不能是特殊符號 第一個字母必須是英文字母
?
5.表格標(biāo)簽<tabale></table>
Border 是決定邊框粗細(xì)的屬性
cellspacing 是單元格空間的屬性?
cellpadding 是單元格內(nèi)部的邊距的屬性。
表格的行:<tr></tr>? ?列:<td></td>
比如插入一個像這樣
?
的表格
就是三個<tr></tr>在每個<tr></tr>中間插三個<td></td>
為
?
?
Img插入table中
會發(fā)現(xiàn)出現(xiàn)余白，怎么解決？
colspan? 水平合并單元格的個數(shù)
rowspan? 垂直合并單元格的個數(shù)
?
案例
表格中插入表格
圖：
思路：插入一個三行三列600X600的表格? 合并1 2 3在123中插入一個兩行六列的表格
答案：
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=1j11ab&title=從零開始的全棧工程師——html篇1
總結(jié)
以上是生活随笔為你收集整理的从零开始的全栈工程师——html篇1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用CSS实现无滚动条滚动
- 下一篇： html5中如何去掉input type