HTML基礎操作
HTML：Hyper Text Markup Language (超文本標記語言)
HTML5優勢
- 世界知名瀏覽器廠商對HTML5的支持（微軟、Google、蘋果、Opera、Mozilla）
- 市場需求
- 跨平臺
W3C標準
w3c
World Wide Web Consortium(萬維網聯盟)
成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機
構
http://www.w3.org/l
http://www.chinaw3c.orgl
w3C標準包括
結構化標準語言(HTML、XML)
表現標準語言(css)
行為標準(DOM、ECMAScript )
網頁基本標簽
標題標簽
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
段落標簽
<p>
+文本內容
</p>
換行標簽
<br/>
水平線標簽
<hr/>
字體樣式標簽
<!--粗體 斜體-->
粗體：<strong>內容</strong>
斜體：<em>內容</em>
注釋和特殊符號
空格：
大于：>
小于：<
著作權：©
對特殊符號的記憶：輸入&后在輸入一個字母會出現相關資訊
影像標簽
常見影像格式：JPG GIF PNG BMP……
<!--
img標簽
src:圖片地址
相對地址（推薦），絕對地址
../ 回傳上一級目錄
-->
<img src="圖片地址" alt="圖片名字" title="滑鼠懸停文字">
超鏈接標簽
<a href="鏈接地址">鏈接資訊</a>
/*功能性鏈接*/
<a href="mailto:郵箱">文本</a>
/*錨鏈接
1.需要一個錨標記
2.跳轉到標記
*/
<a href="#top">回到頂部</a>
<a href="down">底部</a>
行內元素和塊元素
塊元素
- 無論內容多少，該元素獨占一行
- （p、h1-h6…）
行內元素
- 內容撐開寬度，左右都是行內元素的可以排在一行
- （a，strong，em…）
串列
什么是串列
◆串列就是資訊資源的一種展示形式，它可以使資訊結構化和條理化，并
以串列的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的資訊
串列的分類
◆無序串列
◆有序串列
◆定義串列
<!--有序串列-->
<ol>
<li>例一</li>
<li>例二</li>
<li>例三</li>
<li>例四</li>
</ol>
<!--無序串列-->
<ul>
<li>例一</li>
<li>例二</li>
<li>例三</li>
<li>例四</li>
</ul>
<!--自定義串列-->
<dl>
<dt>串列標題</dt>
<dd>串列內容</dd>
<dd>串列內容</dd>
<dd>串列內容</dd>
<dd>串列內容</dd>
</dl>
表格
<!--表格 table
行 tr
列 td
跨列 colspan
跨行 rowspan
-->
<table border="1px"> /*border表格邊框*/
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
視頻和音頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>視頻音頻練習</title>
</head>
<body>
<!--
video視頻標簽 audio音頻標簽
src: 資源路徑
controls:控制進度
autoplay:自動播放
-->
<video src="資源路徑" controls >視頻</video>
<audio src="資源路徑" controls>音頻1</audio>
<audio src="資源路徑" controls>音頻2</audio>
</body>
</html>
iframe行內框架
<iframe src="path" name="mainFrame"></iframe>
表單
基本語法
<form method="post" action="result.html">
<p>名字: <input name="name" type="text" > </p>
<p>密碼:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
表單元素格式
| 屬性 | 說明 |
|---|---|
| type | 指定元素的型別，text、password、checkbox、radio、submit.reset、file、hidden、image和button，默認為text |
| name | 指定表單元素的名稱 |
| value | 元素的初始值，type為radio時必須指定一個值 |
| size | 指定表單元素的初始寬度，當type為text或password時，表單元 |
| maxlength | type為text或password時，輸入的最大字符數 |
| checked | type為radio或checkbox時，指定按鈕是否是被選中 |
表單初級驗證
placeholder 提示資訊
required 不能為空
pattern 正則運算式
登錄注冊頁面練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄注冊</title>
</head>
<body>
<h2>注冊</h2>
<!--
get: 簡單但是不安全，會看到上傳的資訊，不能傳大檔案
post：比較安全，可以傳大檔案
placeholder 提示資訊
required 非空判斷
pattern 正則運算式
readonly 只讀標簽（只讀不能更改）
hidden 隱藏標簽
-->
<form action="XXXX.html" method="get">
<p>名字: <input type="text" name="username" placeholder="請輸入用戶名" required></p>
<p>密碼: <input type="password" name="psw" required></p>
<p>性別：
<input type="radio" value="boy" name="sex"> 男
<input type="radio" value="girl" name="sex"> 女
</p>
<!--下拉串列-->
<p>國家
<select name="串列名稱">
<option value="China">中國</option>
<option value="Ameriac">美國</option>
<option value="England">英國</option>
</select>
</p>
<!-- 文本域 -->
<p>反饋：
<textarea name="textarea" cols="30" rows="10">文本內容</textarea>
</p>
<!--檔案域-->
<p>
<input type="file" name="files" >
<input type="button" value="上傳" name="upload">
</p>
<!-- 郵件-->
<p>郵件
<input type="email" name="email" required>
</p>
<!-- URL-->
<p>URL
<input type="url" name="url">
</p>
<!--數字-->
<p>數量
<input type="number" name="num" min="0" max="100" step="10">
</p>
<!-- 滑塊-->
<p>音量
<input type="range" name="voice" min="0" max="100">
</p>
<!-- 搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
<!--
input type=button 普通按鈕
input type=submit 提交按鈕
input type=images 圖片按鈕
input type=reset 重置
-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
快捷鍵操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Ctrl+/ 或 Ctrl+Shift+/ ---->注釋（// 或者/*…*/ ）
Shift+F6 ---->重構-重命名
Ctrl+X ----->洗掉行
Ctrl+D --->復制行
Ctrl+G ---->查找行
Ctrl+Shift+Up/Down ---->代碼向上/下移動，
F2 或Shift+F2 ---->高亮錯誤或警告快速定位
寫代碼，按Tab ---->生成代碼
選中文本，按Ctrl+Shift+F7 ------>高亮顯示所有該文本，按Esc高亮消失，
Ctrl+B ------>快速打開游標處的類或方法
Ctrl+E------>最近打開的檔案
Alt+F1------>查找代碼所在位置
Ctrl+Alt+L------>格式化代碼
Ctrl+R------>替換文本
Ctrl+F------>查找文本
Ctrl+P------>方法引數提示
Ctrl+shift+c------>拷貝檔案路徑
Ctrl+alt+shift+c------>拷貝相關資料 包括路徑和所在行
Ctrl+shift+v------>從歷史記錄中粘貼
ctrl+Y ------>洗掉整行
ctrl+shift+enter------>新建行
ctrl+alt+enter------>在當前行前面新建行
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/158840.html
標籤：其他
上一篇：CSS（第一篇）