【Html】基础
在專業(yè)課上學(xué)過一點(diǎn)Dreamweaver和JSP的東西，平時也總是用網(wǎng)頁，前段時間剛敲完牛腩里面也有一些關(guān)于html的東西,總是感覺對這個東西很模糊，所以總結(jié)一下！
Html基礎(chǔ)：HTML 是用來描述網(wǎng)頁的一種語言。全稱超文本標(biāo)記語言 (Hyper Text Markup Language)，它 不是一種編程語言，而是一種標(biāo)記語言 (markup language)，具有一套標(biāo)記標(biāo)簽 (markup tag)，html語言通過使用標(biāo)記標(biāo)簽來描述網(wǎng)頁！
html文本之所以稱為超文本是因為它具有普通文本不具有的超鏈接功能，在瀏覽html文檔時，可通過關(guān)鍵字來跳轉(zhuǎn)界面
要讓超鏈接可以正常工作，需要通過URL統(tǒng)一資源定位符來定位internet上的資源
URL由三部分組成：協(xié)議，主機(jī)名稱，文件目錄或文件名
http://www/sunxin.org/vidio/vidio.asp
http：表示超文本傳輸協(xié)議
從主機(jī)名或域名www.sunxin.org上訪問video目錄下的video。asp文件
建立超鏈接
href用于指定鏈接的目標(biāo)，目標(biāo)的地址由URL定位
例子：
<a href="form.html">表單的例子</a> 當(dāng)前目錄下
<a href="../form.html">表單的例子</a> 上一級目錄下
<a href="E:/JSPLesson/form.html">表單的例子</a> 本地的絕對路徑
<a href="http://www.sunxin.org">孫鑫的個人網(wǎng)站</a>
html中嵌入圖形
GIF：不需要大量顏色的圖片
JPEG：圖片質(zhì)量較高
<img src="URL" width=n height=n>不指定高度會使用加載時的寬高
html中基本元素
HTML元素的四種形式
屬性+內(nèi)容+起止標(biāo)記
1.空元素 <br>
2.帶有屬性的元素 <hr color="blur">
3..帶有內(nèi)容的元素 <tittle>http://www.sunxin,org</title>
4.帶有內(nèi)容和屬性的元素 <font color="red">http://www.sunxin.org</font>
<html> //開始html文檔<head> //開始文檔頭部<title> //開始文檔標(biāo)題this is first page. //標(biāo)題內(nèi)容</title> //結(jié)束文檔標(biāo)題</head> //結(jié)束文檔頭部<body> //開始文檔體hello world! //文檔體內(nèi)容</body> //結(jié)束文檔體
</html> //結(jié)束html文檔
如果不按照這樣的方式也能很好解析內(nèi)容
屬性內(nèi)容賦值加雙引號或不加
標(biāo)簽的屬性和姓名是大小寫無關(guān)的
其他元素
<p> paragrahp段 align:段落的對齊方式 left center right justify
<br> link bread 換行
<hr> horizontal rule水平線 color屬性：預(yù)定義顏色；16進(jìn)制顏色值，顏色加#00（Red)00(Green)00(Blue)(十進(jìn)制0~255)
<center></center> 文本居中顯示
<hn align="#"> <hn>文檔標(biāo)題1~6依次減小
<font size=n color="clr"> </font> size字體大小 n(1~7)
<b></b> 文本加粗
<i></i> 文本斜體
不間斷空格，回車符；html的保留字符；鍵盤中不存在特殊字符—引用輸入
引用的方式有兩種：字符引用和實體引用（&開始，;結(jié)束)
字符引用：&#十進(jìn)制/十六進(jìn)制;
實體引用：&助記符;(區(qū)分大小寫)
列表 —建立數(shù)字編號的列表
<ol> start屬性設(shè)置起始的序號
<li> value屬性改變列表內(nèi)編號順序
type:編號系統(tǒng)的類型
表單
網(wǎng)頁中重要的一個東西是表單，用來想服務(wù)提交請求，服務(wù)器將處理后的數(shù)據(jù)返回，通過瀏覽器將內(nèi)容轉(zhuǎn)為html文檔來查看
表單元素+嵌入其中的控件
發(fā)送表單是所使用的http方法：get方法（url的一部分）和post方法（數(shù)據(jù)塊）
type:創(chuàng)建控件的類型
name:控件名稱
size:表單中控件的初始寬度
value:指定控件的初始值
單行文本輸入控件<type=“text”>
提交按鈕<type=“submit”>
重置按鈕<type=“reset”>
口令輸入控件<type=“password”>
單選按鈕<type=“radio”>
復(fù)選框<type=“checkbox”>
隱藏控件<type=“hidden”>
列表框元素創(chuàng)建，列表框中的各個元素用提供
多行文本輸入控件
rows:可視區(qū)域的文本行數(shù)
cols:可視區(qū)域的文本寬度
表單的例子
<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>最高學(xué)歷：</td><td><select size="1" name="education"><option value="" selected> <option><option value="高中">高中</option><option value="大學(xué)">大學(xué)</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邊框?qū)挾?align 對其方式 alignment:left center right
bgcolor背景色
<caption></caption> 表格標(biāo)題
<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>數(shù)學(xué)</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> 總結(jié)
- 上一篇： 【Docker】Ubuntu18.04国
- 下一篇： 【K8S实践】关于Kubernetes