整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 表格實例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實例
表格
這個例子演示如何在 HTML 文檔中創建表格。
HTML 表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
更多實例
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標題的表格
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標簽
| 標簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
<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></div> 表示分割分區 用來布局 一行一個 大盒子
<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> 元素中的文本通常呈現為粗體并且居中。
表格屬性：
align left center right 規定表格相對于周圍元素的對齊方式
border 1or"" 規定表格單元是否擁有邊框默認為"",表示沒有邊框
cellpadding 像素值 規定單元邊沿與其內容的空白，默認1像素
cellspacing 像素值 規定單元格直接的空白 默認2像素
with 像素值or百分比 規定表格的寬度
合并單元表格方式：
跨行合并：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="value">
<input type="屬性值" />屬性值：
button | 定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。 |
checkbox | 定義復選框。 |
file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。 |
<label> 標簽為 input 元素定義標注（標記）。 label是標注的意思
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
html圖像
在htmtl中,圖像由<img>標簽定義.<img>是空標簽,它只包含屬性,并且沒有閉合標簽.
要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統一資源定位符).
定義圖像的語法是:
<img src="url"/>
url指存儲圖像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果圖像無法顯示,則alt屬性用來為圖像定義一串預備的可替換的文本.alt屬性是必需的.
height(高度)與width(高度)屬性用于設置圖像的高度與寬度.該屬性值可以以像素或百分比形式指定,默認單位為像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border屬性規定圖像周圍的邊框的寬度.默認情況下,圖像是沒有邊框的
border屬性的屬性值的單位是像素.表示邊框的寬度
實例:帶有2個像素粗邊框的圖像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html鏈接
html使用標簽<a>來設置超文本鏈接.
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分.
在標簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標地址
鏈接的html代碼很簡單.格式如下:
<a href="url">鏈接文本</a>
上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)
●使用target屬性,你可以規定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項卡中打開.
<a href="url" target="_blank">鏈接文本</a>
三 html列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記
無序列表使用<ul>標簽,與<li>標簽一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
瀏覽器顯示效果如下:
有序列表也是一列項目,列表項目使用數字進行標記.
有序列表始于<ol>標簽,每個列表項目始于<li>標簽.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
運行效果如下:
四 html表格
表格由<table>標簽定義.
每個表格均有若干行(由<tr>標簽定義,table row),每行被分割為若干單元格(由<td>標簽定義,table division)
下面是一個包含兩行兩列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
運行效果:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
