序列表和有序列表
用于呈現(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
如何合并單元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 會(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ú)占一行
接上一篇。上回簡(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上傳插件。
舉例工作中開發(fā)物流分車程序的代碼,代碼定義兩列“序號(hào)”、"車號(hào)"