小米總裁王翔：今年晶片供應將恢復正常
阿新 • • 發佈：2022-03-23
HTML筆記
基本標籤
- <!DOCTYPE html>
表示html版本 - <head> </head>
網頁頭部標籤 - <title> </titel>
網頁標題 - <body> </body>
內容標籤 - <h1> </h1>
標題標籤 - <hr/>
自環標籤，水平線標籤 - <p> </p>
段落標籤 - <br/>
換行標籤 - <strong> </strong>
加粗 - <em> <em/>
斜體
特殊字元：
- 空格
- © 版權
- > 大於符號
- < 小於符號
影象標籤
影象格式：
JPG、GIF、PNG、BMP（點陣圖）。。。
<img src="圖片路徑" alt="網頁中顯示的名字" title="懸停文字" width="300" height="400">
其中標籤名img表示影象標籤，src屬性是圖片路徑；推薦使用想對地址。
超連結標籤
a標籤
<a href="連線路徑">超連結中間顯示的文字</a> <!--圖片連結--> <a href="path"> <img src="path" alt="name"> </a> <!-- _bank 在新標籤頁開啟 _self 在本標籤頁開啟 --> <a href="" target="_blank"> <!-- 錨鏈接 需要一個標記，標記也為連結標籤，只不過用name屬性表示其錨鏈接 herf中使用#號加標籤名 --> <a name=""> 錨標籤</a> <a href="#name"> <!-- 郵件連結 qq連結 qq推廣 target 引數可以跳轉至任意一個iframe頁面 --> <a href="mailto:address@address">文字</a>
塊元素和行內元素
- 塊元素：無論內容多少 該元素獨佔一行，p標籤，h標籤
- 行內元素：內容撐開寬度，左右都是行內元素的可以在排在一行，如a標籤 strong標籤 em標籤
列表
使資訊結構化和條理化，並以列表的樣式顯示出來。
列表分為：
- 無序列表
- 有序列表
- 定義列表
<!--有序標籤--> <ol> <li>content1</li> <li>content2</li> <li>content...</li> </ol> <hr/> <!-- 無序標籤 應用範圍：導航欄、側邊欄。。。 --> <ul> <li>content1</li> <li>contion,,,,</li> </ul> <!-- 自定義標籤 dl:標籤 dt:列表名稱 dd:列表內容 公司網站底部 --> <dl> <dt>表名 </dt> <dd>content1</dd> <dd>content2</dd> <dd>content..</dd> </dl>
表格標籤
基本結構：單元格、行、列、跨行、跨列。
<!--表格 table
行 tr
列 td
border 屬性指定邊界寬度
colspan 屬性指定跨列
rowspan 屬性指定跨行
-->
<table border="1px">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
媒體元素
視訊元素：video
音訊元素：audio
<!--
音訊和視訊
video標籤：
src 指定路徑
controls 引數指定視訊控制條
autoplay 指定自動播放
audio標籤：
--->
<video src="視訊資源路徑" controls autoplay></video>
<audio src="路徑" controls autoplay> </audio>
頁面結構分析
<body>
<header> <h2> 網頁頭部 </h2> </header>
<section>
<h2>網頁主體</h2>
</section>
<footer>
<h2>網頁頁尾</h2>
</footer>
<article>
<h2>網頁文章</h2>
</article>
<aside>
<h2>網頁側邊欄</h2>
</aside>
<nav>
<h2>導航類輔助內容</h2>
</nav>
</body>
iframe內聯框架
<!--內聯標籤
src 指明路徑，可以是網頁可以是視訊等等。。
width
height
name
iframe可以內聯一個頁面，也可以作為超鏈載體
-->
<iframe src="路徑" name="name" width="x" height="y"></iframe>
表單
<!--表單標籤 form
method* ：post或get 提交方式 get方式在url中可以看到不安全但是高效，post方式安全，傳輸大檔案
action* ：表單提交的位置，也可以是一個請求處理地址
type屬性表示輸入框型別
-->
<form class="" action="動作地址" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密碼：<input type="password" name="pwd"></p>
<input type="submit" name="submit" value="">
<input type="reset" name="reset" value="">
</form>
表單語法：name 必填。
<body>
<form class="" action="index.html" method="post">
<!--type = text
value為預設初始值
maxlength為最多寫幾個字元
size為文字框長度
-->
<p> <input type="text" name="123" value="123" maxlength="8" size="30"></p>
<!-- type = radio 單選框
value 單選框的值
name 表示組
checked 預設選中
-->
<p>性別：
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<!-- 多選框
checkbox
checked 預設選中
-->
<p>
<input type="checkbox" name="hobby" value="sleep">睡覺
<input type="checkbox" name="hobby" value="code" checked>敲程式碼
<input type="checkbox" name="hobby" value="chat">聊天
<input type="checkbox" name="hobby" value="game">遊戲
</p>
<!-- 按鈕
type="button" 普通按鈕
type="image" 圖片按鈕
type="submit" 提交
type="reset" 重置
type="file" 檔案域
-->
<p>按鈕：
<input type="button" name="btn1" value="點選">
<input type="image" src="path">
</p>
<!-- 下拉框 列表框 -->
<p>下拉框
<select id="" name="列表名稱">
<option value="china">中國</option>
<option value="us">美國</option>
<option value="eth" selected>瑞典</option>
<option value="india">印度</option>
</select>
</p>
<!-- 文字域
rows="8" cols="80"
-->
<p>反饋：
<textarea name="textarea" rows="8" cols="80"></textarea>
</p>
<!-- 檔案域
type="file" name="upload"
-->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="上傳">
</p>
</form>
</body>
功能性標籤：
<p>郵箱驗證
<input type="email" name="email" value="">
</p>
<p>url驗證
<input type="url" name="email" value="">
</p>
<p>數字驗證
<input type="number" name="email" max="100" min="-100" step="10">
</p>
<!-- 滑塊 -->
<p>音量：
<input type="range" name="voice" max="0" min="100" step="2">
</p>
<!-- 搜尋框 -->
<p>搜尋：
<input type="search" name="search">
</p>
只讀屬性：readonly
禁用：disabled
隱藏：hidden
增強滑鼠可用性：
<label for="mark">你點我試試</label>
<input type="text" name="mark" value="text">
表單的初級驗證
placeholder=“something” 提示資訊，用於輸入框
required 非空判斷
pattern 正則表示式
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">