【Html】基础
在專業課上學過一點Dreamweaver和JSP的東西，平時也總是用網頁，前段時間剛敲完牛腩里面也有一些關于html的東西,總是感覺對這個東西很模糊，所以總結一下！
Html基礎：HTML 是用來描述網頁的一種語言。全稱超文本標記語言 (Hyper Text Markup Language)，它 不是一種編程語言，而是一種標記語言 (markup language)，具有一套標記標簽 (markup tag)，html語言通過使用標記標簽來描述網頁！
html文本之所以稱為超文本是因為它具有普通文本不具有的超鏈接功能，在瀏覽html文檔時，可通過關鍵字來跳轉界面
要讓超鏈接可以正常工作，需要通過URL統一資源定位符來定位internet上的資源
URL由三部分組成：協議，主機名稱，文件目錄或文件名
http://www/sunxin.org/vidio/vidio.asp
http：表示超文本傳輸協議
從主機名或域名www.sunxin.org上訪問video目錄下的video。asp文件
建立超鏈接
href用于指定鏈接的目標，目標的地址由URL定位
例子：
<a href="form.html">表單的例子</a> 當前目錄下
<a href="../form.html">表單的例子</a> 上一級目錄下
<a href="E:/JSPLesson/form.html">表單的例子</a> 本地的絕對路徑
<a href="http://www.sunxin.org">孫鑫的個人網站</a>
html中嵌入圖形
GIF：不需要大量顏色的圖片
JPEG：圖片質量較高
<img src="URL" width=n height=n>不指定高度會使用加載時的寬高
html中基本元素
HTML元素的四種形式
屬性+內容+起止標記
1.空元素 <br>
2.帶有屬性的元素 <hr color="blur">
3..帶有內容的元素 <tittle>http://www.sunxin,org</title>
4.帶有內容和屬性的元素 <font color="red">http://www.sunxin.org</font>
<html> //開始html文檔<head> //開始文檔頭部<title> //開始文檔標題this is first page. //標題內容</title> //結束文檔標題</head> //結束文檔頭部<body> //開始文檔體hello world! //文檔體內容</body> //結束文檔體
</html> //結束html文檔
如果不按照這樣的方式也能很好解析內容
屬性內容賦值加雙引號或不加
標簽的屬性和姓名是大小寫無關的
其他元素
<p> paragrahp段 align:段落的對齊方式 left center right justify
<br> link bread 換行
<hr> horizontal rule水平線 color屬性：預定義顏色；16進制顏色值，顏色加#00（Red)00(Green)00(Blue)(十進制0~255)
<center></center> 文本居中顯示
<hn align="#"> <hn>文檔標題1~6依次減小
<font size=n color="clr"> </font> size字體大小 n(1~7)
<b></b> 文本加粗
<i></i> 文本斜體
不間斷空格，回車符；html的保留字符；鍵盤中不存在特殊字符—引用輸入
引用的方式有兩種：字符引用和實體引用（&開始，;結束)
字符引用：&#十進制/十六進制;
實體引用：&助記符;(區分大小寫)
列表 —建立數字編號的列表
<ol> start屬性設置起始的序號
<li> value屬性改變列表內編號順序
type:編號系統的類型
表單
網頁中重要的一個東西是表單，用來想服務提交請求，服務器將處理后的數據返回，通過瀏覽器將內容轉為html文檔來查看
表單元素+嵌入其中的控件
發送表單是所使用的http方法：get方法（url的一部分）和post方法（數據塊）
type:創建控件的類型
name:控件名稱
size:表單中控件的初始寬度
value:指定控件的初始值
單行文本輸入控件<type=“text”>
提交按鈕<type=“submit”>
重置按鈕<type=“reset”>
口令輸入控件<type=“password”>
單選按鈕<type=“radio”>
復選框<type=“checkbox”>
隱藏控件<type=“hidden”>
列表框元素創建，列表框中的各個元素用提供
多行文本輸入控件
rows:可視區域的文本行數
cols:可視區域的文本寬度
表單的例子
<html>
<head><title>表單的例子</title></head><body><form method="get" action="reg.jsp"><table><tr><td>用戶名：</td><td><input type="text" name="user" value="游客" size="30"></td></tr><tr><td>密碼：</td><td><input type="password" name="pwd"></td></tr><tr><td>性別：</td><td><input type="radio" name="sex" value="1" checked>男<input type="radio" name="sex" value="0" checked>女</td></tr><tr><td>興趣愛好：</td><td><input type="checkbox" name="interest" value="football">足球<input type="checkbox" name="interest" value="basketball">籃球<input type="checkbox" name="interest" value="volleyball">排球<input type="checkbox" name="interest" value="swim">游泳<br></td></tr><tr><td>最高學歷：</td><td><select size="1" name="education"><option value="" selected> <option><option value="高中">高中</option><option value="大學">大學</option><option value="碩士">碩士</option><option value="博士">博士</option></select></td></tr><tr><td align="center"> 個人簡介:</td><td><textarea name="personal" rows="5" cols="30">個人簡介</textarea><br><!--//可以刪除<input type="hidden" name="id" value="001">--> </td></tr><tr><input type="reset" value="重寫"><input type="submit" value="注冊"></tr> </talbe></body>
</html>
<table border=n align="alignment" bgcolor="clr">..</talbe>
border邊框寬度
align 對其方式 alignment:left center right
bgcolor背景色
<caption></caption> 表格標題
<tr align="alignment" valign="alignment"></tr> tr 添加新行
align水平對齊方式 alignment:left center right
valign垂直對齊方式 alignment:top middle bottom
<th> 用于定義表頭
<td> 定義單元格
<html><head><title>表格的例子</title></head> <body> <table border="1" align="center" bgcolor="#ffdddd"><caption>2018年度期末考試成績單</caption><tr align="center" valign="middle"><th>姓名</th><th>語文</th><th>數學</th><th>英語</th></tr> <tr align="center" valign="middle"><td>李四</td><td>99</td><td>55</td><td>88</td></tr> <tr align="center" valign="middle"><td>王五</td><td>98</td><td>78</td><td>67</td></tr> </table> </body>
</html> 總結
- 上一篇： 【Docker】Ubuntu18.04国
- 下一篇： 【K8S实践】关于Kubernetes