2. 程式人生 > 其它 >HTML常用標記以及基礎知識

HTML常用標記以及基礎知識

阿新 • • 發佈：2020-12-30

技術標籤：html

一、html文件結構：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>


<html>標記：沒有實際意義，但是是html檔案不可缺失的。不區分大小寫
<head>標記：HTML檔案的頭標記，放置HTML檔案資訊，如定義的CSS樣				式的程式碼。
<title>標記：網頁標題標記
<body>標記：HTML頁面的主體標記，本身也具有一定的控制功能例如控制頁面背景圖案和顏色。

二、HTML常用標記

換行標記<br/>
段落標記<p></p>
標題標記<h1~6> </h1-6>其中數字越小標題越大
居中標記<center> </center>
超連結標記<a href=""></a>
圖片標記<img src>
<div></div>每段
<span></spam>不換行
文字列表標記：
<!DOCTYPE html>
<html>
	<head>
		<
 
meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>手機數碼</li>
			<li>電腦辦公</li>
			<li>家居飾品</li>
		</ul>
		<ol>
			<li>手機數碼</li>
			<li>電腦辦公</li>
			<li>家居飾品</li>
		</
 
ol>
	</body>
</html>
表格標記：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="100%"><!--table具有很多屬性width表示表格寬度，border用來設定表格的邊框 align用來設定對齊方式 bgcolor用來設定背景色-->
		<!--標題用<caption>..</caption>開頭,可以設定對齊方式align垂直居中valign等-->
		<!--表頭以<th>..</th>進行標記可以設定對齊方式align，背景background，合併列來表示colspan和垂直居中valign來表示-->
		<!--表格行標記<tr>..</tr>-->
		<!--表格單元格標記用<td>..</td>-->
		<!--表格標記中colspan是合併列，rowspan是合併列-->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			<tr>
				<td colspan="2">1</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td rowspan="2">6</td>
				<td>7</td>
				<td colspan="2" rowspan="2">8</td>
				<td>10</td>
			</tr>
			<tr>
				<td>12</td>
				<td>15</td>
			</tr>
		</table>
	</body>
</html>


			<tr><!---->
				<th>姓名</th>
				<th>數學</th>
				<th>語文</th>
				<th>總分</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>100</td>
				<td>100</td>
				<td>200</td>
			</tr>
			<tr>
				<td>小紅</td>
				<td>100</td>
				<td>100</td>
				<td>100</td>
			</tr>
		</table>
	</body>
</html>

三、HTML表單標記
<form>..</form>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--表單點選提交按鈕，提交資料時
		？引數列表
		引數列表格式：
			引數1=引數值1&引數2=引數值2&引數3=引數值3
			on表示選中
			
			？sex=on
			
			單選框：使用者只能選擇不能輸入要指定value屬性,否則提交的都是on
			文字框：使用者可以自由輸入不一定指定屬性
		-->
		
		<form><!--其中form處理表單資料中的URL資訊action處理表單中的URL地址，method資料傳送到伺服器的方式即get和post，其中get會將資料追加到acton後面，適合不需要保密的小量資料。post會將輸入資料傳送到伺服器，適合大量資料name是表單名字 onsubmit使用者提交表單後發生的事件-->
			使用者名稱：<input type="text" name="username" /> <br />
			&nbsp;&nbsp;&nbsp;&nbsp;</strong>密碼：<input type="password" name="password" value="123"/> <br />
			&nbsp;&nbsp;&nbsp;&nbsp;性別：<input type="radio" name="sex" value="man" checked="checked"/>男
				  <input type="radio" name="sex" value="woman"/>女<!--表單輸入標記可以向頁面中新增單行文字。多行文字等按鈕屬性有：type新增的欄位型別 disabled用於密碼checked表示是否在被選中狀態，其中的被勾選屬性型別是checkedbox當屬性是img的圖片時src為圖片來源alt表示圖片無法顯示時顯示的文字，其中type的屬性需要是image,value,當欄位型別是checkbox或者radio(表單中的單選按鈕)時不可以忽略value指定的是資料項選定的值當type是button reset或者submit指定的是按鈕上顯示的文字hidden是使用者看不見的select表示下拉框<select>..<..select>其中mutiple表示是否可以多選，每一個選項是<option>..</option>-->
<!--多行文字標記-->			
			      <!--<input type="radio" name="sex2" />公
				  <input type="radio" name="sex2" />母-->
				  
			<br />
			<input type="submit">
		</form>
	</body>
</html>
<-----------------------我是分割線------------------------->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			使用者ID：<input type="hidden"><br />
			使用者名稱：<input type="text" name="uname" /> <br /> 
			姓名：<input type="text" name="uname" /> <br />
			愛好：<input type="checkbox" name="hobby" value="code" checked="checked"/>閱讀 
			      <input type="checkbox" name="hobby" value="read"/>讀書 
			      <input type="checkbox" name="hobby" value="run"/>電影
				<br />
				照片：<input type="file" name="photo"/> <br />
				<input type="submit" value="註冊">
				<input type="reset">
				<input type="button" value="我是按鈕">
		</form>
	</body>
</html>

相關推薦

HTML常用標記以及基礎知識

技術標籤：html 一、html文件結構： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

學習java的常用網址及基礎知識

作者：終端研發部連結：https://www.zhihu.com/question/36673373/answer/2086199349來源：知乎著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

K8S的安裝部署以及基礎知識

Kubernetes(K8S)概述# Kubernetes又稱作k8s，是Google在2014年釋出的一個開源專案。 最初Google開發了一個叫Borg的系統（現在命名為Omega），來排程近20多億個容器。 在積累了數十年的經驗後，Google決定重寫這

HTML基礎——常用標籤以及列表

<!DOCTYPE html>//告訴瀏覽器我們使用的HTML版本是HTML5，這樣瀏覽器就按照HTML5的規則解析

前端進階筆記之核心基礎知識---那些HTML標籤你熟悉嗎？

目錄 1、互動實現 1.1 meta標籤：自動重新整理/跳轉 1.2 title標籤：訊息提醒 2、效能優化

老司機帶你玩轉面試（1）：快取中介軟體 Redis 基礎知識以及資料持久化

引言 今天週末，我在家坐著掐指一算，馬上又要到一年一度的金九銀十招聘季了，國內今年上半年受到 YQ 衝擊，金三銀四泡湯了，這就直接導致很多今年畢業的同學會和明年畢業的同學一起參加今年下半年的秋招，這個競爭

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML+CSS+JavaScript基礎知識

# HTML5 ``` * 基本程式碼： *<html> *<head> *<title>title</title> *<head>

python 建立字典以及操作字典----這是基礎知識

當你程式設計久了，發現所有的東西都是建立在基礎之上的，龐大的程式碼 你要識別出它的型別是什麼 或者返回後型別是什麼！？

爬蟲入門一 基礎知識 以及request

title: 爬蟲入門一 基礎知識 以及request date: 2020-03-05 14:43:00 categories: python tags: crawler

多執行緒基礎(建立、常用方法以及執行緒的生命週期和風險)

執行緒的建立 寫一個類去繼承Thread類，重寫run()方法 寫一個類去實現Runable介面

html,css,jquery基礎知識

開發工具與關鍵技術：html,css,jquery,基礎知識 撰寫時間：2020-10-08 ①單選框、多選框的 相連的單選框name值相同：

html&css基礎知識彙總，新人必看！

轉載自https://blog.csdn.net/qwe5810658/article/details/80149757 html的基本標籤 1、<hn>標題標籤

HTML基礎知識筆記

一、HTML介紹 HTML：Hyper Text Markup Language 超文字標記語言 它是用來描述網頁的一種標記語言。

HTML基礎知識

一個完美的web前端攻城獅，所具備的專業素養有：HTML5、XHTML、CSS3、JavaScript、JQuery、PS、PHP等。所以說，我要學的東西還有很多。。。

HTML基礎知識Day1

技術標籤：html HTML基礎知識Day1 1 HTML是什麼？2 HTML網頁的基本結構3 HTML常用標籤

HTML基礎知識day4

技術標籤：html 今天我們學習了html中表單的相關知識，表單在網頁中的主要功能是資料採集，一個表單通常有三個部分組成：表單域、表單標籤、表單按鈕。

機器學習筆記之scikit learn基礎知識和常用模組

0x00 概述 本文對機器學習scikit-learn包內的常用工具進行基礎介紹。 0x01估計器（Estimator）

Web基礎01 html常用標籤

技術標籤：web網頁設計htmlcsshtml5webjs 在這裡總結一下前端html常用的標籤 //標題標籤 數字越小 字型越大

【9】HTML基礎（3）——HTML常用標籤⑤

技術標籤：前端學習中htmlhtml5 【9】HTML基礎（3）——HTML常用標籤⑤ ★文章內容學習來源：拉勾教育大前端就業集訓營