html
初識html
什麼時HTML
- HTMl
- Hyper Text Markup Language （超文本標記語言）
為什麼學習HTML
- 市場需求
- 跨平台
- 微軟
- 蘋果
- Opera
- Mozilla
W3c 百度了解。用有道
html的基本結構
<html></html> 這個叫網頁頭部
<body> 開放標籤
這個叫主體部分
</body>閉合標籤
<hr/> 自閉和標籤
網頁基本資訊
html 的自帶的幾個標籤的基本資訊
<!--DOCTYPE:告訴瀏覽器，我們要使用什麼規範
html： 使用的規範
去掉這一行也行<!DOCTYPE html> ，因為默認時html，這行只是告訴我們用什麼規範
-->
<!DOCTYPE html>
<!--html總標籤-->
<html lang="en">
<!--head網頁頭部-->
<head>
<!--meta描述標籤，它用來描述我們網站的一些資訊-->
<!--meta 一般用來做SEO-->
<!--屬性
name:標題
content：資訊
description：描述
-->
<meta charset="UTF-8">
<meta name="yinbangchi" content="尹幫熾學java">
<meta name="description" content="尹幫熾，靜態動態">
<!--網頁標題-->
<title>第一個html</title>
</head>
<!--body網頁主體-->
<body>
Hoold hoda
</body>
</html>
html 中的幾個簡單標籤
<!--標題標籤-->
<h1></h1>
<h2></h3>
<!--段落標籤-->
<p>
這個行之間的間隔比較大
</p>
<!--換行標籤 行之間的間隔緊密-->
<br/>
<!--字體樣式標籤-->
<strong>粗體</strong>
<em>斜體</em>
<!--符號-->
空格
>大於號
< 小於號
©版權符號
<!---->
<!---->
<!---->
<!---->
<!---->
圖標標籤
<!--
src： 路徑
兩個路徑
絕對路徑：E:\IdeaMaven\HTML\resoucess\images\1.png
1. 創建個資源目錄：resoucess，圖片目錄images
相對路徑： ../resoucess/images/1.png
建議使用相對路徑
alt：圖片路徑錯誤或圖片不存在等，返回數據
title：滑鼠停留在圖片上時出現欄位。
-->
<img src="../resoucess/images/1.png" alt="圖片不存在" title="懸停欄位">
鏈接標籤
<!--
href： 路徑
target: 表示窗口在那裡打開
_blank： 打開一個新窗口
_self:本地刷新
-->
<a href="1.我的第一個html.html" target="_blank">欄位鏈接</a>
<a href="1.我的第一個html.html" target="_self">欄位鏈接</a>
<!--使用·圖片鏈接-->
<a href="1.我的第一個html.html" target="_self">
<img src="../resoucess/images/1.png" alt="圖片不存在" title="懸停欄位">
</a>
<!--錨鏈接 可以跳頁面-->
<a name="namm"></a>
<a href="#name"></a>
<!--郵件鏈接
mailto: 郵件地址
-->
<a href="mailto:[email protected]">點擊聯繫我</a>
<!--QQ鏈接
百度搜素qq推廣，登錄 推廣
-->
列表
列表
<ol>
<li>有序</li>
</ol>
<ul>
<li>無序</li>
</ul>
<!--自定義列表
dl：標籤
dt：列表名稱
dd:列表內容
-->
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表格
<!--table
tr: 行
td： 列
屬性：
border="1px"
colspan="4" 跨列:站四個格子
rowspan="2" 跨行
-->
音頻影片
音頻影片
- 影片元素
- video
- 音頻元素
- audio
<!--
src： 資源路徑
controls：控制條
autoplay:自動播放
-->
<video src="../resoucess/video/【狂神說Java】HTML5完整教學通俗易懂%20-%2018.HTML18：表單初級驗證(Av55631961,P18).mp4" controls ></video>
<!--同理 屬性基本一樣-->
<audio src="" controls></audio>
頁面結構分析
頁面結構結構分析
| 元素名 | 描述 |
|---|---|
| header | 標題頭部區域的內容（用於頁面或頁面中的一塊區域） |
| footer | 標記腳部區域的內容（用於整個頁面或頁面的一塊區域） |
| section | Web頁面中的一塊獨立區域 |
| article | 獨立的文章內容 |
| aside | 相關內容或應用（常用於側邊欄） |
| nav | 導航類助內容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構分析</title>
</head>
<body>
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體</h2>
</section>
<footer>
<h2>網頁腳部</h2>
</footer>
</body>
</html>
iframe 內聯框架
嗶哩嗶哩有自動生成的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!--
scr：可以內嵌的窗口路徑
name：可以點擊鏈接確定內嵌的窗口的窗口不過iframe的src必須為空
w-h： 可設置大小
-->
<iframe src="內聯frame.html" ></iframe>
<iframe src="" name="htllo"></iframe>
<a href="內聯frame.html" target="htllo"></a>
</body>
</html>
表單
表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
p： 塊元素
get:可以看到數據，不安全，高效，用於測試
post:比較安全，傳輸大文件。比get安全。不過也可以看到。
-->
<form action="影片.html" method="get">
<!--
value: 默認值
maxlength：限制字元數
size：大小
reset：重置
-->
<!--
checked： 默認
-->
<p>名字： <input type="text" name="username"></p>
<p>密碼： <input type="password" name="pwd"></p>
<!--
name：表示組
valu：單選框的值
-->
<p>性別：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="gifl" name="sex"/>女
</p>
<!--圖片按鈕-->
<p>
<input type="image" scr/>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
下拉框
<!--
checked： 默認
-->
<p>
<select name="列表名稱">
<option value="1">dfao</option>
<option value="2">dfao</option>
<option value="3">dfao</option>
<option value="4">dfao</option>
<option value="5">dfao</option>
</select>
</p>
文件域與文本域
<!--
textarea:文本域
cols: 列
rows： 行
-->
<p>回饋：
<textarea name="textarea" cols="10" rows="20">文本內容</textarea>
</p>
<!--文件域
上傳文件
-->
<p>
<input type="file" name="files">
</p>
驗證
<p>郵箱：
<input type="email"name="email">
</p>
<!--必須時郵箱格式-->
<!--
驗證屬性：
email： 郵箱
url： 網址
-->
<!--
number:數字驗證
max：最大值
min：最小值·
step：在10的之內的初始值和未尾值 如：0 10 20 30等也可用於商品增加
-->
<p>數字：
<input type="number"name="num" max="100" min="0" step="10">
</p>
滑塊
<!--滑塊
range
-->
<p>音量：
<input type="range" name="audio" max="100" min="0" step="2">
</p>
搜索
<!--搜素-->
<p>搜索：
<input type="search" name="search">
</p>
input 中的極大標籤
readonly: 只讀 只能看，不能改
disabled：禁用。 用於選擇時，如不能選擇男，如按鈕
hidden： 隱藏
required： 不能為空
pattern：正則表達式
placeholder=「請輸入用戶名」
pattern：正則表達式
<p>
<input type="text" name="tdd">
</p>
滑鼠的可用性
<p>
<label for="kk">你點</label>
</p>
<!--
再到text文本跨中添加一個 id=「kk」
滑鼠點擊你點，就會移動打掃text文本框中。
-->
正則表達式網址：
