《戴森球計劃》環線混料建材超市佈局參考
阿新 • • 發佈：2021-03-02
認識Web
Web標準三層
結構（HTML）、表現(CSS)、行為（JavaScript）
| 結構：結構用於對網頁元素進行整理和分類，咱們主要學習的是HTML |
|---|
| 表現：表現用於設定網頁元素的辦事、顏色、大小等外觀樣式 |
| 行為：網頁模型的定義及互動的編寫 |
網頁基本資訊
<!--DOCTYPE:告訴瀏覽器，我們要使用什麼規範 -->
<!DOCTYPE html>
<html lang="en">
<!--head標籤標示網頁頭部-->
<head>
<!--meta標籤描述性標籤，它用來描述我們網站的一些資訊--> 網頁基本標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標籤學習</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1> 影象標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影象標籤學習</title>
</head>
<body>
<!--img學習
src：圖片地址（相對地址(推薦使用)，絕對地址）
../ ——上一級目錄
alt：當圖片沒有顯示時，圖片上所顯示的內容
title:當滑鼠放在圖片上所顯示的文字
-->
<img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600" height="300">
</body>
</html>
連結標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結標籤學習</title>
</head>
<body>
<!--使用name作為標記-->
<a name="top">頂部</a>
<!--a標籤
href：必填，表示要跳轉到哪一個頁面
target：表示視窗在那裡開啟
_blank：在新標籤中開啟
_self:在自己的網頁中開啟 是預設的
-->
<a href="我的第一個網頁.html" target="_blank">點選跳轉到頁面一</a>
<a href="https://www.baidu.com" target="_self">點選跳轉到頁面二</a>
<br/>
<!--圖片超連結-->
<a href="2.影象標籤學習.html"><img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600"
height="300"></a>
<br/>
<p><a href="2.影象標籤學習.html"><img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600"
height="300"></a></p>
<p><a href="2.影象標籤學習.html"><img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600"
height="300"></a></p>
<p><a href="2.影象標籤學習.html"><img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600"
height="300"></a></p>
<p><a href="2.影象標籤學習.html"><img src="../resources/image/1.jpg" alt="考試地址" title="懸停文字" width="600"
height="300"></a></p>
<!--錨鏈接--頁面間跳轉
1.需要一個標記
2.跳轉標記
3.前面要寫一個#
-->
<a href="#top">回到頂部</a>
<!--從一個頁面跳到另一個頁面的指定地方-->
<a name="down">down</a>
<!--功能性連結
郵件連結：mailto：
QQ連結：
-->
<a href="mailto：[email protected]">點選聯絡我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2::53" alt="你好加我領取小電影" title="你好加我領取小電影"/></a>
</body>
</html>
表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學習</title>
</head>
<body>
<!--
表格標籤：table
行標籤：tr
列標籤：td
跨行：rowspan
跨列：colspan
-->
<table border="2px">
<tr>
<td colspan="3"> 學生成績</td>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
</table>
</body>
</html>
列表標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表標籤學習</title>
</head>
<body>
<!--無序列表
應用範圍：導航，側邊欄.....
-->
<ul>
<li>Java</li>
<li>python</li>
<li>運維</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<br/>
<!--有序列表
應用範圍：試卷，問答....
-->
<ol>
<li>Java</li>
<li>python</li>
<li>運維</li>
<li>前端</li>
<li>C/c++</li>
</ol>
<br/>
<!--自定義列表
dl：標籤
dt：列表名稱
dd: 列表內容
公司網站底部
-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>c</dd>
<dd>d</dd>
<dd>e</dd>
<dt>溫州</dt>
<dt>雲南</dt>
<dt>杭州</dt>
</dl>
</body>
</html>
媒體元素學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素學習</title>
</head>
<body>
<!--音訊和視訊
src：資源路徑
controls：控制條
autoplay：自動播放
-->
<video src=""></video>
<audio src=""></audio>
</body>
</html>
內聯框架iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--iframe內聯框架
src：地址
w-h：寬度 高度
-->
<iframe src="5.列表.html" frameborder="0" name="hello" width="1000" height="800"></iframe>
<a href="2.影象標籤學習.html" target="hello">點選</a>
</body>
</html>
表單
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學習表單</title>
</head>
<body>
<!--表單 form
action：表單提交的位置，可以是網站，也可以是一個請求處理的地址
method： post，get 提交方式
get方式提交：我們可以在url上看到我們提交的資訊，不安全，高效
post：比較安全，傳輸大檔案
-->
<form action="1.基本標籤.html" method="post">
<!--文字輸入框 input
value 預設屬性
maxlength 最長能寫幾個字元
size=30 文字框的長度
name 表示組 名字一樣表示一個組
readonly 只讀
disabled 禁選
hidden 隱藏
placeholder 提示資訊
required非空判斷
pattern 正則表示式
-->
<p>名字：<input type="text" name="username" placeholder="請輸入使用者名稱" required maxlength="10" size="30" ></p>
<p>密碼：<input type="password" name="password" ></p>
<p>單選框：
<!--這是三個屬性必須寫-->
<input type="radio" value="boy" name="sex" disabled />男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多選框
checkbox 多選
他們的name組最好一樣
-->
<p>多選框：
<input type="checkbox" value="sleep" name="hobby"/>睡覺
<input type="checkbox" value="eating" name="hobby"/>吃飯
<input type="checkbox" value="watching" name="hobby">看電視
<input type="checkbox" value="playing" name="hobby">玩遊戲
</p>
<!-- 按鈕
input type="button" 普通按鈕
input type="image" 圖片按鈕
<input type="submit"> 提交按鈕
<input type="reset"> 清空按鈕
-->
<p>按鈕：
<input type="button" value="點選變長" name="btn1">
<!-- <input type="image" src="../resource/image/1.jpg">-->
</p>
<!--下拉框，列表框
select
selected 表示預設選項
-->
<p>國家：
<select name="國家" >
<option value="China" selected>中國</option>
<option value="USA" >美國</option>
<option value="India">印度</option>
<option value="Japan">日本</option>
</select>
</p>
<!-- 文字域-->
<p>
<textarea name="textarea" cols="30" rows="10">文字內容</textarea>
</p>
<!-- 檔案域-->
<p>
<input type="file" value="檔案" name="files">
<input type="button" value="上傳" name="upload">
</p>
<!-- 郵箱驗證-->
<p>郵箱:
<input type="email" name="email">
</p>
<!-- 自定義郵箱-->
<p>自定義郵箱：
<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!-- url驗證-->
<p>URL:
<input type="url" name="url">
</p>
<!-- 數字驗證
step 數字間隔
-->
<p>數量：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑塊
input type="range"
-->
<p>音量：
<input type="range" name="volume" max="100" min="0" step="1">
</p>
<!-- 搜尋-->
<p>搜尋：
<input type="search" name="search">
</p>
<!--增強滑鼠可用性-->
<p>
<label for="mark">你點我試試</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表單">
</p>
</form>
</body>
</html>
Div和span標籤
<div id="自定義模板名稱">.....</div>
<div class="自定義class名稱">.....</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div標籤</title>
</head>
<style>
.jianxi{
background-color: blue;
width: 500px;
height: 100px;
}
</style>
<body>
<div id="shengping" class="jianxi">孔子（公元前551年9月28日～公元前479年4月11日），子姓，孔氏，名丘，字仲尼，魯國陬邑（今山東省曲阜市）人，
祖籍宋國慄邑（今河南省夏邑縣），中國古代思想家、政治家、教育家，<strong><span>儒家學派創始人</span></strong>、“大成至聖先師”。</div>
<div id="zhuopin">孔子開創私人講學之風，倡導仁義禮智信。有弟子三千，其中賢人七十二。曾帶領部分弟子周遊列國十四年，
晚年修訂六經（《詩》《書》《禮》《樂》《易》《春秋》）。去世後，其弟子及再傳弟子把孔子及其弟子的言行語錄
和思想記錄下來，整理編成《論語》。該書被奉為儒家經典。</div>
<div id="rongyu">孔子是當時社會上最博學者之一，在世時就被尊奉為“天縱之聖”“天之木鐸”，更被後世統治者尊為孔聖人、至聖、至
聖先師、大成至聖文宣王先師、萬世師表。其思想對中國和世界都有深遠的影響，其人被列為“世界十大文化名人”之首。
隨著孔子影響力的擴大，祭祀孔子的“祭孔大典”一度成為和中國祖先神祭祀同等級別的大祀。</div>
</body>
</html>
路徑
相對路徑：
- 影象檔案和HTML檔案位於同一資料夾，只需輸入影象檔案的名稱即可，如"
"
- 影象檔案和HTML檔案位於下一級資料夾，輸入資料夾名和檔名，如"
"
- 影象檔案和HTML檔案位於上一級資料夾，在檔名之前加入“…/”，如果是上兩級，則需使用“…/…/ 以此類推，”如"
"
絕對路徑：
- 即使圖片在文件中的路徑
HTML5新增標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="請輸入明星" list="star">
<datalist id="star">
<!-- datalist裡面用id 來實現和input的連線 input用list-->
<option value="Lucas"></option>
<option value="Simon"></option>
<option value="L1"></option>
<option value="Lu"></option>
<option value="Luc"></option>
<option value="Sin"></option>
<option value="Siome"></option>
</datalist>
<!--fieldset 和 legend 搭配使用-->
<fieldset>
<legend>使用者名稱</legend>
</fieldset>
</body>
</html>
表單綜合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<fieldset>
<legend>學生檔案</legend>
<label >姓名:<input type="text" placeholder="請輸入學生姓名" /></label><br/><br/>
<label>電話：<input type="tel"/></label><br/><br/>
郵箱：<input type="email"/><br/><br/>
所屬學院：<input type="text" placeholder="請選擇學院" list="school" />
<datalist id="school">
<option value="Java學院"></option>
<option value="PhP學院"></option>
<option value="前端學院"></option>
<option value="設計學院"></option>
</datalist><br/><br/>
出生日期：<input type="date"/><br/><br/>
成績：<input type="number" step="2"><br/><br/>
畢業時間：<input type="date"/><br/><br/>
<input type="submit"/>
<input type="reset"/>
</fieldset>
</form>
</body>
</html>
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-7SoQ0jO9-1616042790854)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210316181107170.png)]