前端學習之旅漫長悠遠，猶如千日磨劍一朝起，寒光乍現驚九州，故而需耐下性子苦學基礎，多學多記多練，方可成功。

目錄

常用標簽? （h1 , p , hgroup , em與strong , q , br , del與s , center , hr , div , span）

布局標簽

?塊元素（block element） 常用來布局

?行內元素（inline element）

行內塊元素

列表（list）

a：超鏈接標簽

img：圖片

圖片的格式

audio：音頻

video：視頻

---

*瀏覽器默認字體大小是16px，默認字體最小為12px

meta：字節數標簽；? charset:字符集；? utf-8：萬國碼；? &nbsp，&emsp,&ensp：空格；? &gt：大于號；?

&lt：小于號；? &copy：版權符號；

常用標簽? （h1 , p , hgroup , em與strong , q , br , del與s , center , hr , div , span）

h1-6；標題標簽：塊元素，有默認樣式

p；落標簽：塊元素，有默認樣式，p標簽含有默認的margin-top和margin-bottom,大小都為1em,即當前標簽的字體大小（默認為16px)，一般用來包裹文字或圖片，標簽里不能放塊元素

hgroup；分組標簽：包裹起來的內容化為一組，表面沒有變化

em；傾斜（強調）

strong；加粗（強調）

strong與em強調的區別：strong強調內容；em強調語言語調

q；雙引號標簽：雙引號在文中選不中，因為用到了偽類

br；換行標簽

del；與s；刪除線標簽

center；居中標簽

hr；分割線標簽

布局標簽

header：頭部標簽； main：主題標簽； footer： 底部標簽； nav：導航標簽；

aside：側邊欄標簽； artide：文章標簽； section：獨立塊區，以上都不適用時，用這個

?塊元素（block element） 常用來布局

? ? ? ? ? 1、獨占一行,自上而下一行一行的排列

? ? ? ? ? 2、塊元素的寬度默認是父元素寬度的100%

? ? ? ? ? 3、塊元素的高度默認是被內容撐開的

? ? ? ? ? 常用塊元素：div ?p ?h1-h6 ?ul ?li ?ol ?header ?footer ?main nav

?行內元素（inline element）

? ? ? ? ? 1、不會獨占一行,自左向右排列，一行滿了，就挪到下一行，再自左向右

? ? ? ? ? 2、行內元素的寬高都是被內容撐開的，不可以自定義高度

? ? ? ? ? 常用行內元素：span ?a ?i ? em ?strong ?del ?s

行內塊元素

? ? ? ? ? 兼具行內元素，塊元素特點

? ? ? ? ? 又不會獨占一行，又可以設置寬高

? ? ? ? ? 常用行內塊元素：img

display ?實現不同元素的相互轉換

? ? ? ? ? 可選值：?none ?block ?inline ?inline-block ?

注意：

? ? ? ? ? 1、塊元素是布局元素，里面什么都能放，能方塊元素，能放行內元素，行內塊元素

? ? ? ? ? 2、行內元素 ?一般就用來包裹文字

? ? ? ? ? 3、特殊的塊元素 ?p ? ? 不能放塊元素

? ? ? ? ? 4、特殊的行內元素 ?a ? 里面什么都能放，除了它自己

列表（list）

? ? ? ? ? ? ?一組一組 ?

? ? ? ? ? ? 1:有序列表 ?用ol標簽創建，li表示列表項

? ? ? ? ? ? 2:無序列表 ?用ul標簽創建，li表示列表項

? ? ? ? ? ? ? ? ? disc，默認值，實心的圓點

? ? ? ? ? ? ? ? ? square，實心的方塊

? ? ? ? ? ? ? ? ? circle，空心的圓

? ? ? ? ? ? 3:定義列表 ?用dl標簽創建，使用dd對內容進行解釋說明

? ? 注意：列表之間是可以互相嵌套的

? ? ? ? ? 可以使用type屬性 ?更改項目符號

? ? ?默認樣式，li有項目符號，上下外邊距，左內邊距

a：超鏈接標簽

功能：

• 1? 跳轉至新頁面
• 2? 當前頁面跳轉（樓梯導航）
• 3? 下載

href：指向跳轉的目標地址；

targrt：控制打開網址方式

• 1? target_self：當前頁面打開
• 2? target_blank：新頁面打開

空鏈接寫法：target：“#”

img：圖片

• src：引入圖片的路徑
• alt：圖片懸停時顯示內容

一般不同時設置寬高，會變形

錨點功能

? ? ? ?給對應的位置，打一個id屬性值

? ? ? ?在href的屬性值里，寫：#id屬性值

id屬性值不能以數字開頭，最好不要是漢字，獨一無二的存在

圖片的格式

? ? ? ? ? ? ? ? JPEG(JPG)

? ? ? ? ? ? ? ? ? ? - JPEG圖片支持的顏色比較多，圖片可以壓縮，但是不支持透明

? ? ? ? ? ? ? ? ? ? - 一般用來保存照片等顏色豐富的圖片? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? GIF

? ? ? ? ? ? ? ? ? ? - GIF支持的顏色少，只支持簡單的透明，支持動態圖

? ? ? ? ? ? ? ? ? ? - 圖片顏色單一或者是動態圖時可以使用gif? ? ? ? ? ? ?

? ? ? ? ? ? ? ? PNG

? ? ? ? ? ? ? ? ? ? - PNG支持的顏色多，并且支持復雜的透明，不支持動圖

? ? ? ? ? ? ? ? ? ? - 可以用來顯示顏色復雜的透明的圖片

? ? ? ? ? ? ? ? ? ? ? 專為網頁而生的

? ? ? ? ? ? ? ? webp

? ? ? ? ? ? ? ? ? ?-谷歌新推出的專門用來表示網頁的一種格式

? ? ? ? ? ? ? ? ? ?-它具有其他圖片格式的所有優點，而且文件格式還很小

? ? ? ? ? ? ? ? ? ?-缺點：兼容性不好? ? ? ??

? ? ? ? ? ? ? ? base64

? ? ? ? ? ? ? ? ? ?-講圖片使用base64編碼，這樣可以將圖片轉換為字符，通過字符形式來引入

? ? ? ? ? ? ? ? ? ?-一般都是需要和網頁一起加載的圖片才會使用base64

圖片的使用原則：

? ? ? ? ? ? ? ? 效果不一致，使用效果好的

? ? ? ? ? ? ? ? 效果一致，使用小的

網頁加載流程

? ? ? ? ? ? ? ?第一次請求：加載網頁本身

? ? ? ? ? ? ? ?第二次之后請求，加載外部資源

audio：音頻

video：視頻

• controls：控制用戶是否可以播放
• autoplay：自動播放（基本不用）
• loop:循環播放

總結

以上是生活随笔為你收集整理的前端剑法第一式———砺锋的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。