web前端學習 10節
HTML 學習如何搭建頁面結構和内容 (蓋房子 毛坯房)
CSS 學習如何美化頁面 (裝修)
JavaScript 學習如何給頁面添加動态效果
jQuery JS語言架構,簡化原生JS開發
Bootstrap 前端架構對html/css/JavaScript/jQuery進行封裝,目的是提高前端頁面的開發效率
項目頁面
HTML
HyperTextMarkupLanguage: 超文本标記語言
超文本:指不僅僅是純文字 還包括各種字型效果和多媒體(圖檔,音頻,視訊)
标記語言格式: <開始标簽 屬性=‘xxx’>标簽體</結束标簽>
學習HTML主要學習有哪些标簽 以及标簽的使用方式.
###建立HTML頁面
###常見的文本标簽
内容标題h1-h6 align=“left/right/center”;
獨占一行, 字型加粗, 自帶上下間距
段落标簽p
獨占一行,自帶上下間距
水準分割線hr
加粗 b
斜體 i
小字 small
删除線 s
下劃線 u
換行 br 在html頁面中回車不是換行 隻能識别成一個空格
###清單标簽
無序清單 ul:type(控制圖示) li
有序清單 ol:type(序号類型) start(起始值) reversed(降序) li
清單嵌套: 有序清單和無序清單可以任意無限嵌套
###圖檔标簽img
src:路徑
相對路徑:通路站内資源時使用
頁面和檔案同級目錄:直接寫圖檔名
檔案在頁面的上一級:…/圖檔名
檔案在頁面的下一級:檔案夾名/圖檔名
絕對路徑:通路站外資源時使用
圖檔盜鍊,節省本站資源,但有可能找不到圖檔(原網站的圖檔路徑發生改變則找不到該圖檔)
alt: 圖檔不能正常顯示時顯示的文本
title: 滑鼠在圖檔上懸停時顯示的文本
width/height: 兩種指派方式:1. 像素 2. 百分比
支援的圖檔格式: jpg/jpeg png gif
###超連結a
a标簽包裹文本是文本超連結,包裹圖檔是圖檔超連結
href:路徑 可以指向頁面也可以指向其它檔案(如果浏覽器支援浏覽此檔案則直接浏覽,如果不支援則下載下傳)
頁面内部跳轉: 回到頂部<a href="#top">回到頂部</a>
###表格标簽table
相關标簽: table tr td th caption
屬性: table:border邊框 cellspacing單元格間距 cellpadding單元格距内容的距離 td:colspan跨列 rowspan跨行
###表單
作用: 擷取使用者輸入的各種資訊并送出給伺服器
學習表單主要學習的就是表單中有哪些控件(文本框 密碼框 送出按鈕 單選 多選 下拉選等)
練習
1.清單練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="square">
<li>裴擒虎</li>
<li>上官婉兒</li>
<li>呂布</li>
<li>馬超</li>
<li>蘇烈</li>
</ul>
<ol type="1" start="10" reverse="reversed">
<li>打開冰箱門</li>
<li>把大象裝進去</li>
<li>關上冰箱門</li>
<li>該吃飯了</li>
</ol>
<ul>
<li>涼菜
<ol>
<li>拍黃瓜</li>
<li>芥末鴨掌</li>
<li>花毛一體
<ul>
<li>花生</li>
<li>毛豆</li>
</ul>
</li>
</ol>
</li>
<li>熱菜
<ol>
<li>紅燒肉</li>
<li>水煮魚片</li>
<li>地鍋雞</li>
</ol>
</li>
</ul>
</body>
</html>
顯示效果：
2.超連結練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a id="top" href="01第一個頁面.html">01第一個頁面</a>
<a href= "http://www.baidu.com">百度</a>
<a href="1.jpg">圖檔</a>
<a href="http://www.tmooc.cn"><img width="20%" height="20%"src="1.jpg"></a>
<img width="20%" height="20%" src="../imgs/1.jpg">
<img width="20%" height="20%" src="../imgs/2.jpg">
<img width="20%" height="20%" src="../imgs/3.jpg">
<img width="20%" height="20%" src="../imgs/4.jpg">
<img width="20%" height="20%" src="../imgs/5.jpg">
>
<!-- #代表目前頁面-->
<a href="#top" >回到頂部</a>
</body>
</html>
