HTML中的列表與表格

序列表和有序列表

用于呈現(xiàn)邏輯上并列的具有相關(guān)性的數(shù)據(jù)內(nèi)容.

<ul>
<li></li>
</ul>

ul元素可以用type屬性設(shè)置不同的列表標(biāo)記:

disc: 實(shí)心圓點(diǎn)

circle: 空心圓圈

square: 實(shí)心正方形

<ol>
<li></li>
</ol>

ol元素也可以設(shè)置不同的標(biāo)記:

1: 阿拉伯?dāng)?shù)字

i: 小寫羅馬數(shù)字

I: 大寫羅馬數(shù)字

A: 大寫字母

a: 小寫字母

定義列表

適用呈現(xiàn)包含主題及描述的數(shù)據(jù)內(nèi)容.

<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表頭

tbody: 表體

tfoot: 表腳

th: 專用于表頭中的單元格, 其具有自動(dòng)加粗并且居中的效果.

表格的屬性控制:

border: 邊框

bordercolor: 邊框顏色

width: 寬度

height: 高度

cellspacing: 單元格間距(外)

cellpadding: 單元格填充(內(nèi))

align: 表格的位置控制

單元格的屬性控制:

align

valign

如何合并單元格/跨行或跨列?

注意: 合并后, 會(huì)引發(fā)單元格數(shù)量的減少!

列表練習(xí)案例源碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

、系統(tǒng)結(jié)構(gòu)：

① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）

Browser支持的語言：HTML、CSS、JavaScript；S是服務(wù)器端Server支持的語言有：C、C++、Java等
B/S架構(gòu)系統(tǒng)有什么優(yōu)點(diǎn)和缺點(diǎn)？ 優(yōu)點(diǎn)：升級(jí)方便，只升級(jí)服務(wù)器代碼即可，維護(hù)成本低。缺點(diǎn)：速度慢、體驗(yàn)不好、界面不炫酷
企業(yè)大部分使用B/S架構(gòu)
B/S架構(gòu)的系統(tǒng)代表有：京東、百度、天貓等

② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）

C/S架構(gòu)的優(yōu)點(diǎn)和缺點(diǎn)？
優(yōu)點(diǎn)：速度快、體驗(yàn)好、界面炫酷（娛樂性多數(shù)是C/S架構(gòu)）
缺點(diǎn)：升級(jí)麻煩、維護(hù)成本較高。
C/S架構(gòu)的系統(tǒng)代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運(yùn)行HTML?

① HTML：Hyper Text Markup Language（超文本標(biāo)記語言）

?由大量的標(biāo)簽組成，每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。

?超文本：圖片、聲音、視頻等

② HTML開發(fā)使用普通的文本編輯器就行，創(chuàng)建擴(kuò)展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運(yùn)行

④ HTML是誰制定的？

④ W3C：世界萬維網(wǎng)聯(lián)盟

?W3C制定了HTML的規(guī)范：每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼

?HTML規(guī)范目前最高的版本是：HTML5.0，簡(jiǎn)稱H5

?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）

為了方便中國(guó)Web前端程序員開發(fā)，提供了大量幫助文檔。為開發(fā)提供方便。

?w3school：先出現(xiàn)的，和W3C無關(guān)

?w3cschool：后出現(xiàn)的，和W3C無關(guān)

?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……

3、第一個(gè)HTML

4、基本標(biāo)簽

p：段落標(biāo)記
h1~h6：標(biāo)題字，與word的標(biāo)題字相同
br：換行標(biāo)記（獨(dú)目標(biāo)記）
hr：橫線（獨(dú)目標(biāo)記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預(yù)留格式
del：刪除字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標(biāo)
sub：下標(biāo)
font：字體標(biāo)簽
color：字體顏色
size：字體大小（1~7）

頁面效果圖：

5、實(shí)體符號(hào)：為了避免和標(biāo)簽沖突，所以需要使用實(shí)體符號(hào)

<：<
>：>
空格：
注：html中按多個(gè)空格鍵，在網(wǎng)頁中只顯示一個(gè)空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個(gè)格占兩個(gè)位置）
注：row合并的時(shí)候，刪除下面的單元格
合并列：colspan（一個(gè)格占兩個(gè)位置）
注：col合并的時(shí)候，刪除哪個(gè)沒有要求

7、thead、tbody、tfoot標(biāo)簽

thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標(biāo)簽

src：圖片的路徑
只設(shè)置width，height會(huì)等比例縮放
只設(shè)置height，不起作用
title：鼠標(biāo)懸停時(shí)顯示的信息
alt：設(shè)置圖片加載失敗時(shí)顯示的提示信息

10、超鏈接或熱鏈接

href：hot references 熱引用；
后面一定是一個(gè)資源的地址。
后面的路徑可以是絕對(duì)路徑也可以是相對(duì)路徑，可以是網(wǎng)絡(luò)某個(gè)資源的路徑。
target：
_blank：新窗口
_self：當(dāng)前窗口（默認(rèn)）
_top：頂級(jí)窗口
_parent：父級(jí)窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。

11、request與response的概念

request：瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)（請(qǐng)求）
B --》S
response：服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)（響應(yīng)）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
無序列表：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點(diǎn)）

action：寫提交的URL地址
method：默認(rèn)get；還有post
表單有什么用？
答：收集用戶的信息。表單展現(xiàn)之后，用戶填寫表單，點(diǎn)擊提交。（submit）
怎么畫一個(gè)表單？
答：用form標(biāo)簽
一個(gè)網(wǎng)頁可以有多個(gè)表單form
表單最終是需要提交數(shù)據(jù)給服務(wù)器的，form標(biāo)簽有一個(gè)action屬性，這個(gè)屬性用來指定服務(wù)器地址。
action屬性用來指定數(shù)據(jù)提交給哪個(gè)服務(wù)器
action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請(qǐng)求（request）
http://192.168.111.3:8080/oa/save 這是請(qǐng)求路徑，
表單提交數(shù)據(jù)最終提交給192.168.111.3機(jī)器上的8080端口對(duì)應(yīng)的軟件。
input中的type取值:
radio：?jiǎn)芜x控件
checkbox：多選控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密碼控
file：文件控件
上傳文件專用
hidden：隱藏域
網(wǎng)頁上看不到，但是表單提交的時(shí)候數(shù)據(jù)會(huì)自動(dòng)提交給服務(wù)器。
input中的value屬性用來指定按鈕上顯示的文本信息。
超鏈接a與表單form的區(qū)別？
答：表達(dá)form可以收集信息，而超鏈接a無法收集信息。
表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
表單是以什么格式提交數(shù)據(jù)給服務(wù)器的？
格式：action?name=value&name=value&name=value..
HTTP協(xié)議規(guī)定的，必須以這種格式提交給服務(wù)器
java中String split('&');
重點(diǎn)強(qiáng)調(diào)：表單項(xiàng)寫了name屬性的，一律會(huì)提交給服務(wù)器。不想提交就不要寫name屬性。
文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
當(dāng)name沒有寫的時(shí)候，該項(xiàng)不會(huì)提交給服務(wù)器
但是當(dāng)value沒有寫的時(shí)候，value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動(dòng)輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認(rèn)選項(xiàng)需要使用，checked="checked"（簡(jiǎn)寫：checked）
④ select中的option屬性：? selected="selected" 為默認(rèn)選中 ?size：顯示條目數(shù)量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
數(shù)據(jù)不會(huì)提交
maxlength：設(shè)置文本框中輸入的字符數(shù)量。

15、HTML中的結(jié)點(diǎn)

在HTML文檔中，任何元素（結(jié)點(diǎn)）都有id屬性，id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔中id值不能重復(fù)。
注意：表單提交數(shù)據(jù)的時(shí)候，只和name有關(guān)系，和id無關(guān)
id有什么作用？
javascript語言：可以對(duì)HTML文檔中的任何節(jié)點(diǎn)進(jìn)行增刪改操作。
獲取節(jié)點(diǎn)時(shí)，通常通過id來獲取節(jié)點(diǎn)
HTML文檔是一棵樹，樹上有很多節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層。
有什么用？
圖層的作用為了保證頁面可以靈活的布局。
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標(biāo)即可。
div和span的區(qū)別？
di獨(dú)占一行
span不會(huì)獨(dú)占一行

ootstrap-Table文檔

接上一篇。上回簡(jiǎn)單介紹了BootstrapTable的常用函數(shù)，這回主要介紹屬性設(shè)置。

<link href="*.css"><!--CSS 引用bootstrap.min.css和bootstrap-table.min.css-->
  <script src="*.js"><!--JS包引用， jquery.min.js，bootstrap.min.js，bootstrap-table.min.js-->

<table id="ID"></table>   <!--html代碼-->

$("#ID").bootstrapTable({鍵:值,鍵:值,鍵:值,鍵:值……}）//bootstrapTable函數(shù)

以上簡(jiǎn)寫成“骨架”。分三步用，

1.引用，

注意點(diǎn)：js的引用順序，js包里面可以理解為從上到下的程序集，BootstrapTable以Jquery為基礎(chǔ)的，所以一定以Jquery引用為先，接著是bootsrtap.js,最后是Bootstrap-Table.js。

2.HTML標(biāo)簽

注意點(diǎn)：一般寫在Table標(biāo)簽里，數(shù)據(jù)放到哪個(gè)Table呢，這里用的Jquery獲取DOM id為ID的對(duì)象。當(dāng)然也可以使用類選擇器，最好是唯一，建議用id選擇器標(biāo)識(shí)。

3.使用函數(shù)

這里舉例的是其中一個(gè)最最常用的bootstrapTable({...})，以Ajax形式取數(shù)據(jù)的函數(shù)。

屬性Url:"路徑"。路徑。

可以是本地JSON文件，
可以是預(yù)定義的JSON數(shù)據(jù)，
也可以是路由到后端（后臺(tái)）取數(shù)據(jù)的方法，

例如通過服務(wù)器路由到達(dá)MVC中的Controller里的GetData(string id)

屬性queryParams，可選參數(shù)，如剛才所說GetData方法中的id

queryParams：function(){return id:"123"}//這里是一個(gè)function

也可以直接寫{id:"123"}

屬性columns:定是各列數(shù)據(jù)。是JSON格式[{},{},{}……]

定義每一列以這樣的形式{鍵:值}，

常用的有：

{field:"后臺(tái)返回JSON數(shù)據(jù)或?qū)ο蟮膶傩悦?#34;,

title:"顯示在表格上的列名",

}

以上定義列中還會(huì)有一些可選屬性formatter、editable，如editable需要另外引入相應(yīng)的js文件。

Bootstrap-table的入門分享到這里，認(rèn)為遠(yuǎn)遠(yuǎn)不止這些，動(dòng)手才是入門的正式開始，一起加油吧！

建議看看文檔例子。

謝謝閱讀。下回繼續(xù)分享Bootstrap File Input上傳插件。

fileinput上傳插件

舉例工作中開發(fā)物流分車程序的代碼，代碼定義兩列“序號(hào)”、"車號(hào)"

在線咨詢

上一篇：HTML中的塊級(jí)元素與內(nèi)聯(lián)元素-零基礎(chǔ)自學(xué)網(wǎng)頁制作
下一篇：HTML的基本語法以及如何使用HTML來創(chuàng)建網(wǎng)頁

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商