前端(一)-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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類