主頁 > 企業開發 > html篇

html篇

2020-09-16 08:29:18 企業開發

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=https://www.cnblogs.com/jackw1/p/"theme.js"></script>
		
		<script type="text/javascript">
			// js代碼
		</script>

		
		<link rel="stypesheet" type="text/css" href="theme.css"/>
		
		<style type="text/css">
			/* css代碼 */
		</style>
	

	
	<body>
	

塊級標簽
顯示為"塊"狀,瀏覽器會在其前后顯示折行,常用的塊級元素包括:<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=https://www.cnblogs.com/jackw1/p/"超鏈接地址" target="目標視窗">點擊


提示文字


文本等行級內容



> < " ?

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

  • 創建各個子視窗對應的html檔案
  • 創建整個框架檔案,分別參考子視窗檔案

框架的使用

<!-- 
frameset:框架集標簽,不能與body標簽同時使用,除非與noframes標簽聯合使用時
將瀏覽器分割成多個框架頁,來加載多個html頁面
frame:框架標簽
cols:pixels, %, * 定義框架集中列的數目和尺寸
rows:pixels, %, * 定義框架集中行的數目和尺寸
noresize:設定框架尺寸不可調整
border:設定框架邊框寬度
-->
<frameset rows="25%,*" border="1" noresize="noresize">
	<frame src=https://www.cnblogs.com/jackw1/p/"top.html">上邊/frame>
	<frameset cols="25%,*">
		
		<frame src="left.html" name="leftFrame">左邊
		<frame src="right.html" name="rightFrame">右邊
	
	
	
	
		&lt;body>
			您的瀏覽器無法處理框架!
		</body>
	

iframe內嵌框架

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

	
	<iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe>
	

新浪

百度

</iframe>

表格

使用場景

  • 主要用于規則的資料顯示;
  • 適當的可以在表單頁面中使用;

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

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

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

  • 不利于搜索引擎搜索查找資料;

      <!-- 定義表格頭 -->
      <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=https://www.cnblogs.com/jackw1/p/"0" />
			   女
復選框:籃球 足球 排球
影像域:
檔案上傳:
提交按鈕:
重置按鈕:
普通按鈕:

使用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=https://www.cnblogs.com/jackw1/p/"選項值" selected="selected">...
 
-->



多行文本框

<!-- 
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=https://www.cnblogs.com/jackw1/p/"/Users/wangzhao/Music/網易云音樂/電臺節目/這個少女不太冷丶 - 牽絲戲.mp3" width="0" height="0" autostart="false" loop="true"> -->







 
 	
 	
 

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/55474.html

標籤:Html/Css

上一篇:CCS中的margin:top塌陷問題

下一篇:css篇

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more