前端(一)-Html

来源:https://www.cnblogs.com/xiaoqigui/archive/2022/06/28/16419025.html
-Advertisement-
Play Games

1、網頁基本信息 | <!DOCTYPE html> | 瀏覽器使用的規範 | | | | | <head> | 網頁頭 | | <body> | 主體部分 | | <meta> | 元數據 | meta的name屬性（瞭解） | Keyword（關鍵字） | 為搜索引擎提供的關鍵字列表 | | | ...


1、網頁基本信息

<!DOCTYPE html> 瀏覽器使用的規範
<head> 網頁頭
<body> 主體部分
<meta> 元數據

meta的name屬性（瞭解）

Keyword（關鍵字） 為搜索引擎提供的關鍵字列表
Description（簡介） description用來告訴搜索引擎你的網站主要內容
author（作者） 標註網頁的作者
copyright（版權） 標註版權
generator 說明網站採用什麼編輯器製作。

2、網頁基本標簽

<h1></h1> ...<h6></h6> 標題標簽，序號越小字體越大
<P></p> 段落標簽
<br/> 換行標簽
<hr/> 水平線
<strong></strong> 字體加粗
<em></em> 斜體

3、特殊符號

&nbsp ; 空格
&gt ; 大於號 >
&lt ; 小於號 <
&quot ; 引號“
&copy ; @版權符號

4、塊元素與行內元素

  • 塊元素：獨占一行，比如:段落標簽(p),標題標簽(h1~h6),自帶換行;
  • 行內元素，可以在一行寫多個的標簽，靠內容撐開寬度;(a,strong,em...)

註意：塊元素可以嵌套多個行內元素標簽，但行內元素不能嵌套塊元素，會改變行內元素的佈局，且標簽之間不可以交叉；

5、圖像標簽

<img src="img/girl01.png" alt="動漫女孩" title="小女孩" width="200px" height="300">
scr 圖片的資源路徑
alt 圖片顯示不時顯示此文字
title 標懸停圖片顯示文字
width 寬度
hight 高度

6、鏈接標簽

超鏈接標簽，a，時對標簽，也是行內元素 ，可以鏈接到任意可以訪問的資源，標簽可以使用文本或者圖片;

<a href="https://www.baidu.com" target="_blank">百度</a> <br/>
href 資源路徑
target 在頁面打開資源還是新頁面

target

target="_self" 本頁面打開資源
target="_blank" 新頁面打開資源

6.1 頁面鏈接

<a href="https://www.baidu.com"">

6.2 錨鏈接 (例如回到頂部功能)

<a href="#" name="head_a">頂部</a>
...
<a href="#head_a">回到頂部</a>

6.3 功能鏈接

<a href="mailto:[email protected]">功能鏈接 聯繫我們</a>

6.4 內聯框架

iframe 單頁面內聯

<!--
src：引用頁面地址
name：框架標識名
-->
<iframe src="path" name="mainFrame" ></iframe>

iframe屬性（實現頁面間的相互跳轉）

<!-- 
在被打開的框架上加name屬性
-->
<iframe name="mainFrame"></iframe>
在超鏈接上設置target目標視窗屬性為希望顯示的框架視窗名
<a href="https://www.baidu.com/" target="mainFrame">載入</a>

7、列表

7.1 無序列表

<h2>無序列表</h2>
<ul>
    <li>行宮</li>
    <li>登黃鶴樓</li>
    <li>相思</li>
    <li>靜夜詩</li>
</ul>
  • 行宮
  • 登黃鶴樓
  • 相思
  • 靜夜詩

7.2 有序列表

<h2>有序列表</h2>
<ol>
    <li>行宮</li>
    <li>登黃鶴樓</li>
    <li>相思</li>
    <li>靜夜詩</li>
</ol>
  1. 行宮
  2. 登黃鶴樓
  3. 相思
  4. 靜夜詩

7.3 自定義列表

<h2>自定義列表</h2>
<dl>
    <dt>王維</dt>
        <dd>相思</dd>
        <dd>雜詩</dd>
    <dt>李白</dt>
   	 	<dd>靜夜詩</dd>
</dl>
王維
相思
雜詩
李白
靜夜詩

8、表格

8.1 基本標簽

<table> </table> 表標簽
<tr> </tr> 行標簽
<th></th> 表頭標簽
<td></td> 列標簽

8.2 表格一些屬性

align="center" 居中
border="1px" 邊框粗細
cellspacing="0" 表格間隙
width="90%" 長度

8.3 跨行跨列

rowspan="x" 跨行
clospan="x" 跨列

案例

<table border="1px" align="center" width="90%" cellspacing="0">
    <tr align="center">
        <th>學號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>班級</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>001</td>
        <td>張三</td>
        <td>18</td>
        <td rowspan="2">KH96</td>
        <td><a href="#">修改</a>&nbsp;<a href="#">刪除</a></td>
    </tr>
    <tr align="center">
        <td>002</td>
        <td>李四</td>
        <td>20</td>
        <!-- <td>KH96</td> -->
        <td><a href="#">修改</a>&nbsp;<a href="#">刪除</a></td>
    </tr>
    <tr align="center">
        <td colspan="5">
            <a href="#">首頁</a>
            <a href="#">上一頁</a>
            <a href="#">下一個</a>
            <a href="#">尾頁</a>
        </td>
    </tr>
</table>
學號 姓名 年齡 班級 操作
001 張三 18 KH96 修改 |  刪除
002 李四 20 修改 | 刪除
首頁 上一頁 下一個 尾頁

9、媒體元素

9.1 音頻

<!-- 
src：指定要播放的視頻文件的路徑
controls：提供播放、暫停和音量的控制項
autoplay：自動播放屬性
loop：視頻的迴圈播放
-->
<video src="視頻路徑" controls autoplay></video>

9.2 視頻

<!--
src：指定要播放的音頻文件的路徑
trols：提供播放、暫停和音量的控制項
-->
<audio src="音頻路徑" controls autoplay></video>

10、表單

10.1 method

規定如何發送表單數據常用值：get post 在實際網頁開發中通常採用post方式提交表單數據;

get 不安全，在搜索欄提交，有大小限制
post 安全，在請求體中提交，沒有大小限制

10.2 action

表示向何處發送表單數據;

10.3 表單元素

10.3.1 text 文本框

<!--type="text"
name：文本框名稱(必填)
value：文本框初始值
size：文本框長度
maxlength：文本框可輸入最多字元
-->
<input type="text" name="userName" value="用戶名" size="30" maxlength="20"/>

10.3.2 password 密碼框

向密碼框中輸入字元時，顯示的效果，密碼字元以黑色實心的圓點來顯示。

<!--type="password"
name：密碼框名稱(必填)
size：密碼框長度
-->
<input type="password" name="pass" size="20"/>

10.3.3 單選按鈕

同一組單選按鈕，name屬性值必須相同，才能在選中單選按鈕時達到互斥；

<!--
type="radio"
name：單選框名稱(必填)，一組的名稱需要相同
checked：單選按鈕選中狀態
value：單選框的值
-->
<input name="gen" type="radio" value="男" id="nan"/><label for="nan">男</label>
<input name="gen" type="radio" value="女" id="nv"/><label for="nv">女</label>
<!-- label點擊文字的時候也可以選中 -->

10.3.4 checkbox覆選框

同一組覆選框，根據需要可設置name屬性值相同；

<!--
type="checkbox"
name：覆選框名稱(必填)，一組的名稱需要相同
checked：覆選按鈕選中狀態
value：覆選框的值
-->
<input type="checkbox" name="interest" value="sports"/>運動
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戲

10.3.5 select下拉列表

希望在頁面載入時有預設選中的選中項，則必須使用selected屬性，如果沒有預設選中項則第一個選項 預設被選中；

<!--select:下拉列表框-->
<!--option：選項-->
<select name="列表名稱" size="行數">
	<option value="選項的值" selected="selected">…</option >
	<option value="選項的值">…</option >
</select>

10.3.6 按鈕

<!--重置按鈕-->
<input type="reset" name="butReset" value="reset按鈕">
<!--提交按鈕-->
<input type="submit" name="butSubmit" value="submit按鈕">
<!--普通按鈕-->
<input type="button" name="butButton" value="button按鈕"/>
<!--圖片按鈕-->
<input type="image" src="images/login.gif" />

10.3.7 textarea多行文本框

<!--
textarea：多行文本域
cols：顯示的列數
rows：顯示的行數
-->
<textarea name="showText" cols="x" rows="y">文本內容 </textarea>

10.3.8 file文件域

在表單中使用文件域時，必須設置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數據 分為多部分提交。

<!--- enctype：表單編碼屬性 -->
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上傳" />
</p>
</form>

10.3.9 email郵箱

會自動驗證Email地址格式是否正確;

郵箱:<input type="email" name="email"/>

10.3.10 url網址

會自動驗證URL地址格式是否正確；

請輸入你的網址:<input type="url" name="userUrl"/>

10.3.11 number數字

min：最小值
max：最大值
step：步長
value:預設值
請輸入數字:<input type="number" name="num" value="18" min="0" max="100" step="10"/>

10.3.12 range滑塊

type值為range即為滑塊。

請輸入數字:<input type="range" name="range1" min="0" max="10" step="2"/>

10.3.13 search搜索框

type值為search即為搜索框。

請輸入搜索的關鍵詞:<input type="search" name="sousuo"/>

10.3.14 color顏色

喜歡的顏色：<input type="color" name="userColor">

10.4 表單的高級應用

10.4.1 hidden隱藏域

在瀏覽器中看不到隱藏域，但是在提交表單時可以看到隱藏域的內容被提交至伺服器

<input type="hidden" value="666" name="userid">

10.4.2 只讀、禁用

<!--
講解只讀和禁用的語法，強調不能單寫readonly或disabled，必須寫readonly
＝”readonly”和disabled=“disabled”，介紹只讀和禁用的使用場合
-->
<input name="name" type="text" value="張三" readonly>
<input type="submit" disabled value="保存" >

10.4.3 表單元素的標註,增強滑鼠的可用性

增強滑鼠的可用性，自動將焦點轉移到與該標註相關的表單元素上

<!--它的for屬性對應的id與表單元素id一致-->
<label for="male">標註的文本</label>
<input type="radio" name="gender" id="male"/>

10.5 表單初級驗證的方法

10.5.1 placeholder

提示語預設顯示，當文本框中輸入內容時提示語消失;

<input type="search" name="sousuo" placeholder="請輸入要搜索的關鍵字"/>

10.5.2 required

規定文本框填寫內容不能為空，否則不允許用戶提交表單;

<input type="text" name="username" required/>

10.5.3 pattern

用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單;

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

11、頁面結構元素

11.1結構標簽

header 頁面或頁面中某一區塊的頁眉，通常是一些引導和導航信息
nav 可以作為頁面導航的連接組
section 頁面中的一個內容區塊，通常由內容及其標題組成
article 代表一個獨立的，完整的相關內容塊，可獨立於頁面其他內容使用
aside 非正文的內容，與頁面的主要內容是分開的，被刪除而不會影響到頁面的內容
footer 頁面或頁面中某一個區塊的腳註

11.2舉例

<!DOCTYPE html>
<html>
	<head>
        </head>
	<body>
		<h2 align="center">網頁佈局-使用h5新標簽</h2>
		<!-- div就是一個盒子，主要用於頁面佈局，是塊元素 -->
		<div class="box">
			<header class="header">頭部header</header>
			<main class="main">
				<nav class="nav">導航nav</nav>
				<section class="content">
					<aside class="aside">側邊欄aside</aside>
					<article class="article">正文article</article>
				</section>
			</main>
			<footer class="footer">尾部footer</footer>
		</div>
	</body>
</html>

運行結果


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 運動App如何實現端側後臺保活，讓運動記錄更完整？
    你在鍛煉健身時，有沒有遇到這樣的情況？辛辛苦苦鍛煉了幾小時，卻發現App停止了運行，本次運動並沒有被記錄到App上，從而失去了一個查看完整運動數據的機會？ 運動類App是通過手機或者穿戴設備的感測器，來識別運動狀態並反饋給用戶的，App能否在手機後臺時刻保持運行是影響運動數據完整性的關鍵因素。為了滿 ...
  • 【前端面試】（四）JavaScript var let const的區別
    視頻鏈接： JavaScript var let const的區別 - Web前端工程師面試題講解 參考鏈接： JavaScript 變數 JavaScript Let JavaScript Const 練習網站： codepen.io 初步認識： 功能實現 HTML的部分： <input type ...
  • CSS畫三角形，圓形，橢圓，圓角長方形
    1、CSS畫一個三角形：（div寬高為0，border存在且顏色不一） step1: 設置寬度，高度為 0 的一個div盒子； step2: 為了方便理解，將盒子的 4 個邊框分別設置一樣的寬度boder，不同的顏色； step3: transparent將其他三個 邊框隱藏掉，就能看到效果了。 如 ...
  • Vue 項目實踐指南
    Vue 框架通過數據雙向綁定和虛擬 DOM 技術，幫我們處理了前端開發中最臟最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 項目中仍然存在項目首屏優化、Webpack 編譯配置優化等問題，所以我們仍然需要去關註 Vue 項目性能方面的優化，使 ...
  • 一種JavaScript響應式系統設計與實現
    一種JavaScript響應式系統實現 根據VueJs核心團隊成員霍春陽《Vue.js設計與實現》第四章前三節整理而成 1. 響應式數據與副作用函數 1.1 副作用函數 會產生副作用的函數。 如下示例所示： function effect () { document.body.innerText = ...
  • 抽獎動畫 - 鯉魚跳龍門
    pageClass: home-page-class 鯉魚跳龍門動畫 1. 需求 年中618營銷活動要求做一個鯉魚跳龍門的動畫，產品參考了支付寶上的一個動畫，要求模仿這個來做一個類似的動畫。產品提供的截屏視頻如下： 圖1 從這個視頻里得到的信息，我們可以把動畫分解一下： 321倒計時結束，動畫開始播 ...
  • 記錄--TS封裝axios
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 寫在前面 雖然說Fetch API已經使用率已經非常的高了，但是在一些老的瀏覽器還是不支持的，而且axios仍然每周都保持2000多萬的下載量，這就說明瞭axios仍然存在不可撼動的地位，接下來我們就一步一步的去封裝，實現一個靈活、可復用 ...
  • 前端 Git-Hooks 工程化實踐
    前言 前段時間，部門的前端項目遷移到 monorepo 架構，筆者在其中負責跟 git 工作流相關的事情，其中就包括 git hooks 相關的工程化的實踐。用到了一些常用的相關工具如 husky、lint-staged、commitizen、commit-lint 等，以此文記錄一下整個的實踐過程 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類