HTML
基礎
什么是 HTML?
1.HTML是一門語言,所有的網頁都是用HTML這門語言編寫出來的
2.HTML(HyperText Markup Language):超文本標記語言。
? ? ? >超文本:超越了文本的限制,比普通文本更強大。除了文字信息,還可以定義圖片、音頻、視頻等內容
? ? ?>標記語言:由標簽構成的語言
3.HTML運行在瀏覽器上,HTML標簽由瀏覽器來解析
4.HTML 標簽都是預定義好的。
https://www.w3school.com.cn/
5.基本結構
<!--html的版本-->
<!DOCTYPE html>
<!--告知瀏覽器該網頁是一個英語網頁-->
<html lang="en">
<head><!-- 定義字符集--><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
標簽
基礎標簽
圖片、音頻、視頻標簽
1.img:定義圖片
? ? ? ?>src:規定顯示圖像的 URL(統一資源定位符)
? ? ? ?>height:定義圖像的高度
? ? ? ?>width:定義圖像的寬度
2.audio:定義音頻。支持的音頻格式:MP3、WAV、OGG
? ? ? ?>src:規定音頻的 URL
? ? ? ?>controls:顯示播放控件
3.video:定義視頻。支持的音頻格式:MP4,WebM,OGG
? ? ? ?>src:規定視頻的 URL
? ? ? ?>controls:顯示播放控件
<img src="a.jpg" width="300" hoight="400><audio src="b.np3" controls></audio><video src="c.mp4" controls width="500" height= "300"></video>
超鏈接標簽
<a>
描述: 定義超鏈接,用于鏈接到另一個資源
? ? ? ?>href:指定訪問資源的URL
? ? ? ?>target:指定打開資源的方式
? ? ? ? ? ? ? ? _self:默認值,在當前頁面打開
? ? ? ? ? ? ? ? _blank:在空白頁面打開
<a href="https://www.csdn.net/" target="_blank">csdn</a>
列表標簽
定義有序列表: <ol>
定義無序列表: <ul>
定義列表項<li>
type:設置項目符號
?
<ol><li>咖啡</li><li>茶</li><li>牛奶</li>
</ol><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul>
表格標簽
<table>? ? ??定義表格
<tr>? ? ? ? ? ?定義行
<td>? ? ? ? ? 定義單元格
<th>? ? ? ??定義表頭單元格
table:? >border:規定表格邊框的寬度
? ? ? ? ? ?> width :規定表格的寬度
? ? ? ? ? ?>cellspacing:規定單元格之間的空白
tr:? >align:定義表格行的內容對齊方式
td:? >rowspan:規定單元格可橫跨的行數
? ? ? >colspan:規定單元格可橫跨的列數
<table width="50%" border="1" cellspacing="0"><tr height="50"><th>序號</th><th>品牌名稱</th><th>企業名稱</th></tr><tr align="center" ><td>010</td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td>009</td><td>優衣庫</td><td>優衣庫</td></tr><tr align="center"><td>008</td><td>小米</td><td>小米科技有限公司</td>
</tr>
</table>
布局標簽
<div>:? 定義 HTML文檔中的一個區域部分,經常與CSS一起使用,用來布局網頁
<span>:? 用于組合行內元素
表單標簽
表單:在網頁中主要負責數據采集功能,使用<form>標簽定義
表單表單項(元素):不同類型的 input 元素、下拉列表、文本域等
標簽
<form>? ? ??定義表單
<input>? ? ?定義表單項,通過type屬性控制輸入形式
<label>? ? ?為表單項定義標注
<select>? ??定義下拉列表
<option>? ??定義下拉列表的列表項
<textarea>? ?定義文本域
form:? >action:規定當提交表單時向何處發送表單數據,URL又
? ? ? ? ? >method :規定用于發送表單數據的方式
? ? ? ? ? ? ? ?get:瀏覽器會將數據直接附在表單的 action URL之后。大小有限制
? ? ? ? ? ? ? ? post:瀏覽器會將數據放到http請求消息體中。大小無限制
JSON
JSON簡述
介紹:
JSON(JavaScript Object Notation,Js對象簡譜)是一種輕量級的數據交換格式。它基于
ECMAScript(歐洲計算機協會制定的S規范)的一個子集,采用完全獨立于編程語言的文本格式來存
儲和表示數據。簡潔和清晰的層次結構使得ISON成為理想的數據交換語言。易于人閱讀和編寫,
同時也易于機器解析和生成,并有效地提升網絡傳輸效率。
JSON的特點:
1.JSON是一種輕量級的數據交換格式。
2.JSON采用完全獨立于語言的文本格式,就是說不同的編程語言JSON數據是一致的。
3.JSON易于人閱讀和編寫,同時也易于機器解析和生成(一般用于提升網絡傳輸速率)。
?
XML與JSON的區別
1.XML:可擴展標記語言,是一種用于標記電子文件使其具有結構性的標記語言。
2.JSON:JSON(avaScript Object Notation,JS對象簡譜)是一種輕量級的數據交換格式。
3.相同點:它們都可以作為一種數據交換格式。
3.區別:
XML是重量級的,ISON是輕量級的,XML在傳輸過程中比較占帶寬ISON占帶寬少,易于壓縮。
XML和JSON都用在項目交互下,XML多用于做配置文件,JSON用于數據交互。
JSON的語法格式
<script>let person = {"id":110,"name":"tom","sex":"女","age":18};console.log(person);//用數組存儲json數據let persons = {"persons":[{"id":110,"name":"tom","sex":"女","age":18},{"id":111,"name":"to","sex":"女","age":18},{"id":112,"name":"tm","sex":"女","age":18}]};console.log(persons);//集合存儲json數據let list = [{"id":110,"name":"tom1","sex":"女","age":18},{"id":111,"name":"to2","sex":"女","age":18},{"id":112,"name":"tm3","sex":"女","age":18}];console.log(list);
</script>
JSON數據的轉換
Fastison是阿里巴巴提供的一個java語言編寫的高性能功能完善的JSON庫,是目前Java語言中最快的JSON庫,可以實現Java對象和JSON字符串的相互轉換。
使用:.
1.導入坐標
<dependency>
? ? ? <groupld>com.alibaba</groupld>
? ? ? <artifactld>fastjson</artifactld>
? ? ? <version>1.2.62</version>
</dependency>
2.Java對象轉JSON
String jsonStr=JsoN.toJSONString(obj);
3.JSON字符串轉Java對象
User user=jsON.parseObject(jsonStr, User.class);