html篇

来源:https://www.cnblogs.com/jackw1/archive/2020/03/27/12582660.html
-Advertisement-
Play Games

,超文本標記語言,不是一種編程語言,而是一種標記語言 _思想:網頁中有很多數據,不同的數據可能需要不同的顯示效果,一個標簽相當於一個容器,想要修改容器內數據的樣式,只需要改變容器的屬性值,就可以實現容器內數據樣式的變化。_ 語言結構介紹: html學習 塊級標簽 顯示為"塊"狀,瀏覽器會在其前後顯示 ...


HTML

Hyper Text Markup Language,超文本標記語言,不是一種編程語言,而是一種標記語言

思想:網頁中有很多數據,不同的數據可能需要不同的顯示效果,一個標簽相當於一個容器,想要修改容器內數據的樣式,只需要改變容器的屬性值,就可以實現容器內數據樣式的變化。

語言結構介紹:

<!-- 聲明文檔頁面使用的html版本,當前是html5 -->
<!DOCTYPE html>

<!-- html文檔的根元素標簽,表示html文檔的開始和結束 -->
<html>
	<!-- html文檔的頭部標簽 -->
	<head>
		<!-- 定義文檔標題 -->
		<title>html學習</title>

		<!-- 
		用於html頁面的元信息
		http-equiv:指定元信息的名稱,該屬性指定的名稱具有特殊意義,它可以向瀏覽器傳回一些有用的信息,幫助瀏覽器正確地處理網頁內容。
		name:指定元信息名稱,該名稱可以隨意指定
		content:指定元信息的值
		 -->
		<!-- 指定文檔的字元編碼 -->
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<!-- 3s後會自動跳轉到baidu主頁 -->
		<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/> 
		<!-- 指定作者 -->
		<meta name="author" content="author_name"/>
		<!-- 指定關鍵字,用逗號隔開(便於搜索引擎進行搜索) -->
		<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3"/>
		<!-- 對關鍵字進行描述 -->
		<meta name="description" content="對關鍵字的描述...">

		<!-- 鏈接外部js資源文件 -->
		<script src="theme.js"></script>
		<!-- 包含js腳本 -->
		<script type="text/javascript">
			// js代碼
		</script>

		<!-- 鏈接外部css資源文件 -->
		<link rel="stypesheet" type="text/css" href="theme.css"/>
		<!-- 定義內部css樣式 -->
		<style type="text/css">
			/* css代碼 */
		</style>
	</head>

	<!-- html文檔主體標簽 -->
	<body>
	</body>
</html>

塊級標簽
顯示為"塊"狀,瀏覽器會在其前後顯示折行。常用的塊級元素包括:<p>, <h1>~<h6>, <div>, <ul>

標題標簽

<!-- 標題標簽,從h1到h6依次文字減小 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

段落標簽

<p>同一個世界,同一個夢想</p>
<p>夢想還是要有的,萬一實現了呢?</p>

水平線標簽

<!-- <hr/> size從1-7,越來越粗 -->
<hr/>

列表

<!-- ol:有序列表 type設置排序方式 1預設,還有a,i.. -->
<ol type="a">
	<li>中國</li>
	<li>日本</li>
	<li>南韓</li>
</ol>

<!-- ul:無序列表 type:circle(空心圓),disc(實心圓),square(實心方塊),預設desc -->
<ul type="circle">
	<li>蘋果</li>
	<li>香蕉</li>
	<li>橘子</li>
</ul>

<!-- dl:definition list,定義列表,最常用 -->
<!-- dl, dt, dd, 可以將or和ul放在dd裡面 -->
<dl>
	<dt>亞洲</dt>
		<dd>中國</dd>
		<dd>日本</dd>
		<dd>北韓</dd>
	<dt>歐洲</dt>
		<dd>英國</dd>
		<dd>法國</dd>
		<dd>德國</dd>	
</dl>

分區標簽

<!-- div標簽一般當作結構化塊狀元素使用,一般最常用的用途是對網頁進行整體分塊佈局,即當容器來使用 -->
<div id="fruit">
	<p>蘋果</p>
	<p>香蕉</p>
	<p>橘子</p>
</div>
<div id="country">
	<p>中國</p>
	<p>日本</p>
	<p>北韓</p>
</div>

行級標簽

按行逐一顯示,前後不會自動換行,常用的行級標簽包括:<b>, <i>, <sub>, <sup>

<!-- 定義粗體文本 -->
<b>粗體文本</b>
<!-- 定義傾斜文本 -->
<i>傾斜文本</i>
<!-- 效果和b類似,語氣較強 -->
<strong>粗體文本</strong>
<!-- 效果和i類似,語氣較強 -->
<em>傾斜文本</em>
<!-- 定義小號文本 -->
<small>小號文本</small>
<!-- 定義下標文本 -->
H<sub>2</sub>o
<!-- 定義上標文本 -->
10<sup>2</sup>
<!-- 定義文本顯示方向,內有dir屬性,只能取值ltr從左到右或rtl從右到左 -->
<bdo dir="rtl">文本內容</bdo>

<!-- 
超鏈接標簽
href:指定超鏈接所關聯的另一個資源
target:指定框架集中的哪個框架來裝載另一個資源,該屬性值有_self, _blank, _top, _parent四個值,分別代表使用自身、新視窗、頂層框架、父框架來裝載新資源
 -->
<a href="超鏈接地址" target="目標視窗">點擊</a>

<!-- 圖像標簽 -->
<img src="圖片地址" alt="提示文字"/>

<!-- span標簽:內部放文本或者行級標簽 -->
<span>文本等行級內容</span>

<!-- 換行標簽 -->
<br/>

<!-- 常用的特殊符號 -->
&nbsp;	<!-- 空格 -->
&gt;	<!-- 大於號(>) -->
&lt;	<!-- 小於號(<) -->
&quot;	<!-- 引號(") -->
&copy;	<!-- 版權符號(©) -->

框架
frameset框架集
創建框架頁面的步驟:

  • 創建各個子視窗對應的html文件
  • 創建整個框架文件,分別引用子視窗文件

框架的使用

<!-- 
frameset:框架集標簽,不能與body標簽同時使用,除非與noframes標簽聯合使用時
將瀏覽器分割成多個框架頁,來載入多個html頁面
frame:框架標簽
cols:pixels, %, * 定義框架集中列的數目和尺寸
rows:pixels, %, * 定義框架集中行的數目和尺寸
noresize:設置框架尺寸不可調整
border:設置框架邊框寬度
-->
<frameset rows="25%,*" border="1" noresize="noresize">
	<frame src="top.html">上邊/frame>
	<frameset cols="25%,*">
		<!-- 如果希望點擊左邊框架的超鏈接,右邊框架顯示超鏈接內容,可以將左邊超鏈接a標簽的target設置成右邊框架的名稱即可 -->
		<frame src="left.html" name="leftFrame">左邊</frame>
		<frame src="right.html" name="rightFrame">右邊</frame>
	</frameset>
	
	<!-- noframe標簽為那些不支持框架的瀏覽器顯示文本,noframes元素位於frameset內部 -->
	<noframes>
		<body>
			您的瀏覽器無法處理框架!
		</body>
	</noframes>
</frameset>

iframe內嵌框架

<!-- 
iframe:內嵌框架,在body標簽內部
frameborder:0, 1 規定是否顯示框架周圍的邊框
name:規定iframe的名稱
scrolling:yes(顯示), no(不顯示), auto(內容超過框架則顯示,否則不顯示) 規定是否在iframe中顯示滾動條
scr:規定在iframe中顯示的文檔的url
width:框架寬度
height:框架高度
 -->
<body>
	<!-- <iframe src="引用頁面地址" name="框架標識名" frameborder="邊框" scrolling="是否顯示滾動條"> -->

	<!-- 和frameset類似,如果希望點擊iframe外的超鏈接,iframe中顯示相應的網頁,可以將超鏈接a標簽的target設置成iframe的名稱即可 -->
	<iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe>
	<p><a href="http://www.sina.com.cn/" target="contentFrame">新浪</a></p>
	<p><a href="http://www.baidu.com/" target="contentFrame">百度</a></p>
	</iframe>
</body>

表格

使用場景

  • 主要用於規則的數據顯示;
  • 適當的可以在表單頁面中使用;

使用表格標簽進行頁面佈局的缺點

  • 代碼量比較大,頁面瀏覽速度比較慢;

  • 層次結構比較複雜,不易於維護和改版;

  • 不利於搜索引擎搜索查找數據;

      <!-- 定義表格頭 -->
      <thead>
      	<!-- 定義表格行,該元素內只能包含th標簽和td標簽 -->
      	<tr>
      		<!-- 定義表格頁眉的單元格 -->
      		<th>球隊名稱</th>
      		<th>老闆</th>
      		<th>當家球星</th>
      	</tr>
      </thead>
      
      <!-- 定義表格的主體 -->
      <tbody>
      	<tr>
      		<!-- 
      		定義單元格,包含兩個主要的屬性
      		colspan:單元格跨多少列
      		rowspan:單元格跨多少行
      		 -->
      		<td>騎士</td>
      		<td>丹尼爾·吉爾伯特</td>
      		<td>勒布朗·詹姆斯</td>
      	</tr>
      	<tr>
      		<td>勇士</td>
      		<td>喬·拉科布</td>
      		<td>斯蒂芬·庫里</td>
      	</tr>
      	<tr>
      		<td>馬刺</td>
      		<td>皮特·霍爾特</td>
      		<td>科懷·倫納德</td>
      	</tr>
      </tbody>
      
      <!-- 定義表格尾部 -->
      <tfoot>
      	<tr>
      		<td colspan="3">總計3支球隊</td>
      	</tr>
      </tfoot>
    
    我喜歡的NBA球隊

表單
基本語法

<!-- 
action:指定表單提交後由伺服器上的哪個處理程式進行處理
enctype:用於指定表單數據的編碼方式
method:指定向伺服器提交的方式 get post
 -->
<form action="表單提交地址" method="提交方法" target="打開方式">
	<!-- 文本框、按鈕等表單元素 -->
</form>

常見的表單元素使用

<!-- 
		input元素中常用屬性:
		checked:設置單選框、覆選框初始狀態是否處於選中狀態,只有當type屬性為checkbox或radio時才可指定
		disabled:設置首次載入時禁用此元素,當type為hidden時不能指定該屬性
		maxlength:指定文本框中所允許輸入的最大字元數
		readonly:指定該文本框內的值不允許修改(可用js腳本修改)
		size:指定該元素的長度
		src:指定圖像域所顯示的圖像url,只有當type的值為image時才可以指定該屬性
		 -->

		<!-- text,單行文本框 -->
		單行文本框:<input type="text" maxlength="10" size="4" /><br/>

		<!-- password,密碼輸入框 -->
		密碼輸入框:<input type="password" disabled="disabled"/><br/>

		<!-- hidden,隱藏域 -->
		隱藏域<input type="hidden"/><br/>

		<!-- radio,單選框 -->
		單選框:男<input type="radio" name="sex" value="0" />
			   女<input type="radio" name="sex" value="1" checked="checked" /><br/>
			
		<!-- checkbox,覆選框 -->
		覆選框:籃球<input type="checkbox" name="hobby" value="0" /> 
			   足球<input type="checkbox" name="hobby" value="1" />
			   排球<input type="checkbox" name="hobby" value="2"><br/>

		<!-- image,圖像域,可以指定width和height屬性,有submit按鈕的功能,會提交表單數據 -->
		圖像域:<input type="image"/><br/>

		<!-- file,文件上傳域 -->
		文件上傳:<input type="file"/><br/>

		<!-- submit、reset、button,提交、重置、普通按鈕 -->
		提交按鈕:<input type="submit" value="提交按鈕"/><br/>
		重置按鈕:<input type="reset" value="重置按鈕"/><br/>
		普通按鈕:<input type="button" value="普通按鈕"/><br/>

使用button定義按鈕

<!-- 
button按鈕與input按鈕相比,提供了更強大的功能和更豐富的內容
disabled:指定是否禁用此元素,該屬性的值只能是disabled或者省略
name:指定按鈕的唯一名稱
type:指定按鈕屬於哪種按鈕,只能是button、reset、submit
 -->
<button type="按鈕類型" name="按鈕名稱">
	普通文本、格式化文本、圖像
</button>

提交按鈕:<button type="submit"><b>提交按鈕</b></button><br/>
重置按鈕:<button type="reset"><i>重置按鈕</i></button><br/>
普通按鈕:<button type="button">普通按鈕</button>

使用label定義標簽

<!-- 
label元素不會向用戶呈現任何特殊效果,不過它為滑鼠用戶改進了可用性。如果在label元素內點擊文本,就會觸發,瀏覽器會自動將焦點轉到和標簽相關的表單控制項上。
for:規定label綁定到哪個表單元素,值為表單元素的id
form:規定label欄位所屬的一個或多個表單
 -->
<!-- <label>文本</label> -->
<label for="text">單行文本框:</label><input type="text" id="text"/>

列表菜單和下拉菜單

<!-- 
select標簽常用屬性:
disabled:指定是否禁用此元素,該屬性的值只能是disabled或者省略
mutiple:設置該列表框是否允許多選
size:指定該列表內同時顯示多少個列表項
 -->
<!-- 
基本語法:
<select name="指定列表名稱" size="行數">
	<option value="選項值" selected="selected">...</option>
</select> 
-->
<!-- 列表菜單:多選項展示,可多選 -->
<select size="3" multiple="multiple" id="country">
	<option value="0">中國</option>
	<option value="1">美國</option>
	<option value="2">日本</option>
	<option value="3">南韓</option>
</select><br/>

<!-- 下拉菜單 -->
<select id="city">
	<option value="0">北京</option>
	<option value="1">上海</option>
	<option value="2">武漢</option>
	<option value="3">廣州</option>
</select><br/>

<!-- 
在<select>標簽內,只能包含如下兩種子元素:
<option>:用於定義列表框選項或菜單項,它的常用屬性如下:
	disabled:指定禁用該選擇,該屬性的值只能是disabled或省略
	selected:指定該列表初始狀態是否處於選中狀態,值只能為selected
	value:指定該選項對應的請求參數值
<optgroup>:用於定義列表項或菜單項組,它的常用屬性如下:
	label:指定該選項組的標簽,必需
	disabled:禁用該選項組裡的所有選項,該屬性值只能為disabled或省略
-->
<select>
	<optgroup label="一線城市">
		<option>北京</option>
		<option>上海</option>
		<option>廣州</option>
	</optgroup>
	<optgroup label="二線城市">
		<option>杭州</option>
		<option>武漢</option>
		<option>南京</option>
	</optgroup>
</select>

多行文本框

<!-- 
textarea:多行文本框,常用屬性如下:
cols:指定文本框的寬度,必填
rows:指定文本框的高度,必填
readonly:指定該文本框只讀,該屬性的值只能是readonly或省略
 -->
<!-- 
基本語法:
<textarea name="..." cols="列寬" rows="行寬">
文本內容
</textarea> 
-->
<textarea name="content" cols="50" rows="5" readonly="readonly">
1) 用戶可通過各種已有和未來新增的渠道註冊賬號及加入付費使用。 
2) 在用戶使用具體某種方式加入付費會員時,須閱讀並確認相關的用戶協議和使用方法。
</textarea>

html多媒體

web上的多媒體指的是音效、音樂、視頻和動畫,現代網路瀏覽器已經支持很多多媒體格式。常見的視頻格式有avi, wmv, mpg/mpeg, mov, rm/ram, mp4等,常用的音頻格式有mid/midi, rm/ram, wav, wma, mp3/mpga等。

html5之前,主要提供兩種元素來進行多媒體的展示,一個是<embed>標簽,另一個是<object>標簽。

<!-- 
embed是html5中新標簽,定義嵌入的內容,比如插件,常用屬性:
height:設置嵌入內容的高度
width:設置嵌入內容的寬度
src:設置嵌入內容的url
type:設置嵌入內容的類型

在html5中提供了audio(音頻)和video(視頻)標簽來進行音頻和視頻的播放,使用比較簡單,功能更強大。
 -->

<!-- embed播放音頻 -->
<!-- <embed src="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3" width="0" height="0" autostart="false" loop="true"></embed> -->

<!-- embed播放flash視頻 -->
<embed src="xxx.swf" width="200" height="200" loop="true" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFrash"></embed>


<!-- object標簽 -->
<!-- 
可以使用<object>標簽來給瀏覽器載入插件,通過載入的插件來播放音頻和視頻
微軟開發,對IE相容性很好,對其他瀏覽器相容一般
 -->
 <object data="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3">
 	<param name="src" value="/Users/wangzhao/Music/網易雲音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3">
 	<param name="autoplay" value="false">
 </object>

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

-Advertisement-
Play Games
更多相關文章
  • 在Flutter預設創建的項目中可以使用系統Material圖標,在 文件中使用圖標設置如下: 系統圖標如下: 如果這裡面沒有我們想要的圖標如何處理呢?這時可以使用第三方圖標庫,下麵以 "阿裡巴巴的圖標" 庫為例。 查找圖標並加入購物車 找到自己想要的圖標後,將滑鼠放置到圖標上,加入購物車,如下圖: ...
  • 本文記錄如何讓網頁中的JS代碼和APP進行交互,簡單的說就是如何在網頁中執行APP的代碼。下麵以在網頁中執行代碼打開撥號鍵盤並輸入電話號碼為例介紹如何實現。 一、設置WebView允許它執行js代碼。 二、通過調用WebView的addJavascriptInterface添加一個對象給js使用,添 ...
  • 表格和邊框屬性, 表格表頭單元格,表格標題<caption>,表格高度和寬度,表格背景,表格空間,合併單元格,表格頭部、主體、頁腳,定義表格,定義表格的行,定義表格列的組定義用於表格列的屬性,定義表格的頁眉,定義表格的主體定義表格的頁腳<table><tbody><tr><th>\定義表格的表頭,<... ...
  • 一、繼續完善之前的頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ ...
  • 最近接手了公司兩個項目,一個PC端後臺管理系統,一個app端項目,當然使用的依然是熟悉“Vue全家桶”那套!但是,當我打開項目時,裡面的代碼是這樣的(路由模塊): 就是所有路由配置都放到一個index.js中,這多少還是讓我有點驚呆的,顯然,項目會越做越大,模塊會越加越多,那這種不分模塊的架構方式明 ...
  • ES6中class的繼承 父類(基類) 子類 extends 關鍵字 //父類 class Human{ //父類的構造函數 constructor(name,age,sex,hobby){ this.name=name this.age=age this.sex=sex this.hobby=ho ...
  • 靜態方法與靜態屬性 不會被類的實例所擁有,只有類自身擁有的屬性和方法 只能通過類來調用、 static 關鍵字(靜態方法) 類名.屬性名=屬性值(靜態屬性) //車類 class Car{ //構造函數 constructor(wheel,color,length,width){//接收參數 //給 ...
  • ,層疊樣式表,將網頁內容和顯示樣式分離,提高程式性能。 _它是一種專門描述結構文檔的表現方式的文檔,主要用於網頁風格設計,包括字體大小、顏色、以及元素的精確定位。在傳統的 網頁設計里,使得 能讓單調的 網頁更富表現力。_ 的引入方式 可以控制 文檔的顯示,但是控制文檔顯示之前,首先應在需要顯示的 文 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...