前端CSS表格的基本屬性

. 表格屬性

屬性名稱用途取自border-collapse設置或檢索表格的行和單元格的邊是合并還是獨立。separate：邊框獨立 collapse：相鄰邊被合并border-spacing邊框獨立時，單元格與單元格之間的間距數字，不允許負值empty-cells設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框。hide：隱藏該單元格的邊框。 show：顯示該單元格的邊框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格屬性</title>
		<style>
		
			.separate{
				width: 200px;
				height: 200px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells: hide;
				}
		</style>
	</head>
	<body>
		<table border="1" class="separate">
			<tr  id="tr1">
				<td>separate--邊框獨立</td>
				<td>separate--邊框獨立</td>
				<td>separate--邊框獨立</td>
			</tr>
			<tr>
				<td>collapse--相鄰邊被合并</td>
				<td>collapse--相鄰邊被合并</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

2. 布局屬性

屬性名稱用途取值display設置或檢索對象是否及如何顯示。none：隱藏對象。不為被隱藏的對象保留其物理空間
block：指定對象為塊元素visibility定義了元素是否可見visible：設置對象可視保留物理空間
hidden：設置對象隱藏
collapse：主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對于表格外的其他對象，其作用等同于hidden。float定義了元素向左或者向右浮動放置none：設置元素不浮動
left：設置元素浮在左邊
right：設置元素浮在右邊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
		 .table{
				width: 300px;
				height: 300px;
				background-color: red;
				display: block;
			}
		   img{
		   	width: 300px;
		   	height: 300px;
		   	visibility: visible;
		   }
		</style>
		-->
		<style>
			.test{
				width: 300px;
				height: 300px;
				float: right;
				background-color: red;
			}
			.table{
				width: 300px;
				height: 300px;
				float: right;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="test">我將出現(xiàn)在屏幕右方1</div>
		<div class="table">我將出現(xiàn)在屏幕右方2</div>
		<br>
		<img src="css1.jpg"/>
	</body>
</html>

3. 定位屬性

屬性名稱用途取值position指定一個元素在文檔中的定位方式。static：默認。
relative:相對定位[對象遵循常規(guī)流,不會影響常規(guī)流中的任何元素]
absolute：絕對定位 [對象脫離常規(guī)流]top定義了元素的上外邊距邊界與其包含塊上邊界之間的偏移數字，不允許負值right定義了元素的右外邊距邊界與其包含塊右邊界之間的偏移數字，不允許負值bottom定義了元素的底外邊距邊界與其包含塊底邊界之間的偏移數字，不允許負值left定義了元素的左外邊距邊界與其包含塊左邊界之間的偏移數字，不允許負值z-index定義一個元素在文檔中的層疊順序數字【數值越大就會在最上面】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
			#div1{
				width: 200px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 100px;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
		-->
		<style>
			#test1,#test2,#test3,#test4 {
				position: absolute;
				width: 200px;
				height: 100px;
				padding: 5px 10px;
				color: #fff;
				text-align: right;
			}
			#test1{
				z-index: 1;
				font-size: 10px;
				background-color: red;
			}
			#test2{
				z-index: 2;
				font-size: 10px;
				top: 30px;
				left: 30px;
				background-color: blue;
			}
			#test3{
				z-index: 3;
				font-size: 10px;
				top: 60px;
				left: 60px;
				background-color: black;
			}
			#test4{
				z-index: 4;
				font-size: 10px;
				top: 90px;
				left: 90px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!--
		<div id="div1">	
		</div>
		<div id="div2">	
		</div>
		-->
		<div id="test1">z-index:1</div>
		<div id="test2">z-index:2</div>
		<div id="test3">z-index:3</div>
		<div id="test4">z-index:4</div>
	</body>
</html>

變換屬性設置
2D Transform Functions：
matrix()：【矩陣變換】以一個含數值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a,b,c,d,e,f]變換矩陣
translate()：指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
scale()：指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值
rotate()指定對象的2D rotation（2D旋轉），需先有 <’’ transform-origin '> 屬性的定義
3D Transform Functions：
matrix3d()：以一個4x4矩陣的形式指定一個3D變換
translate3d()：
指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
rotate3d()：指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
scale3d()：指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略

TML標簽：

基本標簽：

<html></html>雙標簽開頭結尾 HTML標簽為最大的標簽稱為根標簽

<head></head> 文檔頭部標簽且必須設置title

<title></title> 頁面標題

<body></body> 文檔的主體包含頁面的內容

<h1>-<h6> HTML提供6個等級的頁面標題有大到小

<p></p> p標簽用于定義段落可以將頁面分為若干個段落根據窗口大小自動換行

<br/>單標簽換行標簽（break打斷）

格式化標簽：

加粗 <strong></strong>or<b></b>

斜線 <em></em>or<i></i>

刪除線 <del></del>or<s></s>

下劃線 <ins></ins>or<u></u>

div和span標簽：

沒有語義屬于一種盒子來裝內容

<div></div> 表示分割分區(qū) 用來布局一行一個大盒子

<span></span>意為跨度，跨距一行可以哦有多個小盒子

圖像標簽：

<img src="圖像路徑(url)"/> 定義頁面中的圖像

圖像標簽包含多個屬性

src 圖片路徑必須屬性

alt 文本替換文本圖像不能顯示的文字

title 文本鼠標放到圖像上顯示文字

width 像素寬度

height 高度

border 邊框

相對路徑和絕對路徑

相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑

分類：下級路徑/ 上級路徑../

絕對路徑：是指目錄下的絕對位置，如硬盤中的路徑或網路地址

超鏈接標簽：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href用于指定鏈接目標的url地址(必須屬性)

target用于指定鏈接打卡方式 _self為默認值 _blank為在新窗口打開方式

錨點鏈接：可以快速到頁面某個位置

在鏈接文本中的href屬性中，設置屬性值為#名字的形式，如<a href="#two">目標</a>

找到目標位置標簽，里面添加一個id屬性=名字，如：<h3 id="two">目標</h3>

注釋：

快捷鍵CTRL + /

特殊字符：

HTML 原代碼	顯示結果	描述
<	<	小于號或顯示標記
>	>	大于號或顯示標記
&	&	可用于顯示其它特殊字符
"	“	引號
?	?	已注冊
?	?	版權
?	?	商標
		半個空白位
		一個空白位
		不斷行的空白

表格標簽：

<table></table> 是用于定義表格的標簽

<tr></tr> 標簽用于定義表格中的行，必須嵌套在<table></table>標簽中

<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標簽中

<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數據(table data)，即數據單元格的內容

表頭單元格標簽：

<th>標簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

表格屬性：

align left center right 規(guī)定表格相對于周圍元素的對齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認為"",表示沒有邊框

cellpadding 像素值規(guī)定單元邊沿與其內容的空白，默認1像素

cellspacing 像素值規(guī)定單元格直接的空白默認2像素

with 像素值or百分比規(guī)定表格的寬度

合并單元表格方式：

跨行合并：rowspan="合并單元格的個數"

跨列合并：colspan="合并單元格的個數"

列表標簽：

<ul>標簽表示無序列表里面只能包含li

<ol>有序標簽里面只能包含li

<li>相當于一個容器定義列表項與<ui>or<li>嵌套使用 li里面可以包含任何標簽

<dl>標簽用于定義描述列表(或自定義列表),該標簽會與<dt>(定義項目和名字)和<dd>(描述每一個項目名字)一起使用

表單標簽：

標簽	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義了 <input> 元素的標簽，一般為輸入標題
<fieldset>	定義了一組相關的表單元素，并使用外框包含起來
<legend>	定義了 <fieldset> 元素的標題
<select>	定義了下拉選項列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個點擊按鈕
<datalist> New	指定一個預先定義的輸入控件選項列表
<keygen> New	定義了表單的密鑰對生成器字段
<output> New	定義一個計算結果

<input>標簽用于收集用戶信息包含一個type屬性可以有多種樣式

<input type="屬性值" />

屬性值：

button	定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。
checkbox	定義復選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit	定義提交按鈕。提交按鈕會把表單數據發(fā)送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。

<label>標簽

<label> 標簽為 input 元素定義標注（標記）。 label是標注的意思

label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

、在exl中編輯好你想要的表格形式，復制有內容的表格到dw右側，如圖：

2、將途中寬度去除，選中一個寬度，按Ctrl+F,點擊“替換全部”。如圖：

3、途中選中部分換成表格的表頭代碼：

表頭代碼：<table align="center" border="1" cellpadding="0" cellspacing="1" class="biaoge" style="text-align:center" width="100%">

<tbody>

4、將表格標題中的td和/td改成th和/th。如圖：

5、選中右側表格中有鏈接的表格，選擇上方窗口中的屬性面板，在html狀態(tài)下，目標選擇”_blank”。

6、左側代碼就是匯總表格的代碼，復制到后臺內容頁的源碼狀態(tài)下即可。

在線咨詢

上一篇：根據markdown文件反向轉換成chrome瀏覽器
下一篇：一款超贊的Java工具類庫，GitHub星標11.6

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商