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>

注釋和特殊符號

空格：&nbsp;
大于：&gt;
小于：&lt;
著作權：&copy;

對特殊符號的記憶：輸入&后在輸入一個字母會出現相關資訊

影像標簽

常見影像格式：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/shujuku/157638.html

標籤：其他

上一篇：CSS（第一篇）

下一篇：python基礎—串列決議式簡單應用