《仁王2》奈落深處30層簡單實用通關方法
阿新 • • 發佈:2021-03-18
認識Web
Web標準三層
結構(HTML)、表現(CSS)、行為(JavaScript)
結構:結構用於對網頁元素進行整理和分類,咱們主要學習的是HTML |
---|
表現:表現用於設定網頁元素的辦事、顏色、大小等外觀樣式 |
行為:網頁模型的定義及互動的編寫 |
網頁基本資訊
<!--DOCTYPE:告訴瀏覽器,我們要使用什麼規範 -->
<!DOCTYPE html>
<html lang="en">
<!--head標籤標示網頁頭部-->
<head>
<!--meta標籤描述性標籤,它用來描述我們網站的一些資訊-->
<!--meta一般來做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神說java,西部開源">
<meta name="description" content="來這個地方可以學習Java">
<!--title網頁標題-->
<title>我的第一個網站</title>
</head>
<!--body標籤代表網頁主體-->
<body>
Hello World!
</body>
</html>
網頁基本標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標籤學習</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<!--段落標籤-->
<p>兩隻老虎,兩隻老虎,</p>
<p>跑得快,跑得快,</p>
<p>一隻沒有眼睛,一隻沒有尾巴,</p>
<p>真奇怪,真奇怪,</p>
<p>兩隻老虎,兩隻老虎,</p>
<p>跑得快,跑得快,</p>
<p>一隻沒有眼睛,一隻沒有尾巴,</p>
<p>真奇怪,真奇怪,</p>
<!--水平線標籤-->
<hr/>
<!--換行標籤-->
兩隻老虎,兩隻老虎,<br/>
跑得快,跑得快,<br/>
一隻沒有眼睛,一隻沒有尾巴,<br/>
真奇怪,真奇怪,<br/>
兩隻老虎,兩隻老虎,<br/>
跑得快,跑得快,<br/>
一隻沒有眼睛,一隻沒有尾巴,<br/>
真奇怪,真奇怪,<br/>
<!--粗體 斜體標籤-->
<h1>字型樣式標籤</h1>
<strong>I Love You</strong>
<em>I Love You</em>
<br/>
<!--特殊符號-->
空 格:空 格
<br/>
大於:>
<br/>
小於:<
<br/>
版權符號:©
<!--
特殊符號記憶法:
& ;
-->
</body>
</html>
影象標籤
<!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)]