JavaWeb笔记:Html总结
JavaWeb筆記:Html總結
目錄
JavaWeb筆記:Html總結
一、html簡介
二、html基本標簽
?
三、html表單標簽(重點)
一、html簡介
?
?? ?1、html是什么
?? ??? ?Html是用來描述網頁的一種語言。
?? ??? ??? ?(1)HTML 指的是超文本標記語言 (Hyper Text Markup Language)
?? ??? ??? ?(2)HTML 不是一種編程語言，而是一種標記語言(markup language,標記語言是一套標記標簽(markup tag));
?? ??? ??? ?(3)HTML 使用標記標簽來描述網頁
?? ??? ??? ?
?? ??? ?超文本 標記 語言
?? ??? ??? ?語言：
?? ??? ??? ??? ?人與計算機交互的工具
?? ??? ??? ?超文本：
?? ??? ??? ??? ?(1)普通文本不能實現的，超文本可以實現，能實現普通文本不能實現的功能
?? ??? ??? ??? ?(2)包括超鏈接的文本
?? ??? ??? ?標記：
?? ??? ??? ??? ?就是標簽，不同的標簽能實現不同的功能
?? ??? ??? ??? ?
?? ?2、html能做什么
?? ??? ?html通過標簽的形式將信息展示給用戶
?? ??? ?
?? ?3、html書寫規范?? ?
?? ??? ?(1)html結構
?? ??? ??? ?<html>
?? ??? ??? ??? ?<head>
?? ??? ??? ??? ??? ?包括資訊信息：整個頁面的屬性、指導瀏覽器解析的標簽、引入外部文件的標簽
?? ??? ??? ??? ?</head>
?? ??? ??? ??? ?<body>
?? ??? ??? ??? ??? ?我們需要展示的信息
?? ??? ??? ??? ?</body>
?? ??? ??? ?</html>
(2)html標簽是以尖括號包裹關鍵字成對出現的，有開始標簽和結束標簽，支持正確的嵌套
?? ??? ?(3)大部分標簽有屬性 格式：屬性=“屬性值”（多個屬性之間用空格隔開）
?? ??? ?(4)空標簽：功能比較單一 ，例如：<br></br> === <br/>
?? ??? ?(5)html不區分大小寫，建議使用小寫
?? ??? ?
?? ??? ?需求：寫一段文字，將其中的部分文字變成紅色，字號變大
?? ??? ?<html>
?? ??? ??? ?<head></head>
?? ??? ??? ?<body>
?? ??? ??? ??? ?我請大家吃狗不理<font color="red" size="5">包子</font>，
?? ??? ??? ??? ?<br/>
?? ??? ??? ??? ?大家很高興！！！
?? ??? ??? ?</body>
?? ??? ?</html>
?
二、html基本標簽
?
?
?? ?1、文件標簽(結構標簽)
?? ??? ?<html><html>:根標簽
?? ??? ?<head>
?? ??? ??? ?<title></title>:頁面的標題
?? ??? ?</head>
?? ??? ?<body></body>：內容
?? ??? ??? ?屬性：
?? ??? ??? ??? ?text:文本的顏色
?? ??? ??? ??? ?bgcolor:背景色
?? ??? ??? ??? ?background:背景圖片
?? ??? ??? ??? ??? ?
?? ??? ??? ?顏色的三種表示方式：
?? ??? ??? ??? ?(1)單詞：red green black?
?? ??? ??? ??? ?(2)rgb三原色：reg(0,0,0) ?0-255
?? ??? ??? ??? ?(3)#000000 ?#ffffff ?#325687 ? #377405
?? ??? ?
?? ?2、排版標簽
?? ??? ?(1)注釋標簽：<!--注釋-->
?? ??? ?(2)換行標簽：<br/>
?? ??? ?(3)段落標簽：<p>文本文字</p>?
?? ??? ??? ?特點：段與段之間有空行
?? ??? ??? ?屬性：
?? ??? ??? ??? ?align:對齊方式（有三個屬性值：left ?center ? right）
?? ??? ?(4)水平線標簽：<hr/>
?? ??? ??? ?屬性：
?? ??? ??? ??? ?width:長度
?? ??? ??? ??? ?size:粗度
?? ??? ??? ??? ?color：顏色
?? ??? ??? ??? ?align:對齊方式
?? ??? ??? ?
?? ??? ??? ?尺寸的寫法：
?? ??? ??? ??? ?（1）像素：10px
?? ??? ??? ??? ?（2）百分比：占據副標簽的百分比，會隨著副標簽的大小進行變化
?? ??? ??? ??? ?
?? ?3、塊標簽
?? ??? ?<div></div>:行級塊標簽
?? ??? ?<span></span>:行內塊標簽
?? ??? ?
?? ??? ?作用：
?? ??? ??? ?（1）<div></div>：div+css布局
?? ??? ??? ?（2）<span></span>：進行友好提示
?? ??? ??? ?
?? ?4、文字標簽
?? ??? ?基本文字標簽：<font></font>
?? ??? ??? ?屬性：
?? ??? ??? ??? ?color:顏色
?? ??? ??? ??? ?size:大小（最大值:7，最小值:1，默認值:3）
?? ??? ??? ??? ?face:字體類型，即字體，直接寫文字就可以
?? ??? ?標題標簽：<h1></h1>-<h6></h6>
?? ??? ??? ?隨著數字的增大逐漸變小，字體是加粗的，內置字號 默認占據一行
?? ??? ??? ?
?? ?5、清單標簽（也稱為列表標簽）
?? ??? ?無序列表：<ul></ul>
?? ??? ??? ?<li></li>:列表項
?? ??? ??? ?屬性：
?? ??? ??? ??? ?type：有三個值，分別為disc、 square和circle
?? ??? ?
?? ??? ??? ?示例：
?? ??? ??? ?<ul >
?? ??? ??? ??? ?<li>列表項</li>
?? ??? ??? ??? ?<li>列表項</li>
?? ??? ??? ??? ?<li>列表項</li>?? ??? ??? ??? ?
?? ??? ??? ?</ul>
?? ??? ??? ?
?? ??? ?有序列表：<ol></ol>
?? ??? ??? ?<li></li>:列表項
?? ??? ??? ?屬性：
?? ??? ??? ??? ?type：1、A、a、I、i（數字、字母、羅馬數字）
?? ??? ??? ??? ?start:數字，代表首項開始位置
?? ??? ??? ?
?? ??? ??? ?示例：
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>列表項</li>
?? ??? ??? ??? ?<li>列表項</li>
?? ??? ??? ??? ?<li>列表項</li>?? ?
?? ??? ??? ?</ol>
?? ??? ??? ?
?? ??? ?列表標簽的作用：實現菜單項（可以實現橫向或者縱向菜單）
?? ??? ?無序列表標簽怎么去掉小圓點？HTML中不能直接去掉，沒有這個屬性值，需要在CSS中給li標簽添加樣式list-style:none;
?? ??? ??? ?
?? ?6、圖形標簽：<img />（自關閉標簽）
?? ??? ?屬性：
?? ??? ??? ?src:圖形地址
?? ??? ??? ?width:寬度
?? ??? ??? ?height:高度
?? ??? ??? ?border:邊框
?? ??? ??? ?align:對齊方式，代表圖片與相鄰的文本的相對位置（有三個屬性值：top middle bottom）
?? ??? ??? ?alt:圖片的文字說明
?? ??? ??? ?
?? ?7、鏈接標簽：<a></a>
?? ??? ?屬性：
?? ??? ??? ?href:跳轉頁面地址
?? ??? ??? ?name:名稱，錨點
?? ??? ??? ?target:_self(自己) _blank(新頁面,之前的頁面還有)， 默認是_self
?? ??? ?作用：
?? ??? ??? ?（1）頁面跳轉，注意：要調到外網必須要加協議
?? ??? ??? ?（2）訪問錨點；回到錨點（頂部、底部、中間），在訪問錨點時的書寫格式：#name的值；
?? ??? ?
?? ?8、表格標簽
?? ??? ?<table></table>:
?? ??? ??? ?屬性：
?? ??? ??? ??? ?border:表格邊框
?? ??? ??? ??? ?width:表格的寬度
?? ??? ??? ??? ?align:表格的對齊方式（<tr align="center">單元格里面的內容居中對齊<tr>）
?? ??? ??? ??? ?bgcolor:背景顏色
?? ??? ?<tr></tr>: 代表行
?? ??? ?<td></td>：代表單元格
?? ??? ??? ?屬性：
?? ??? ??? ??? ?colspan:列合并
?? ??? ??? ??? ?rowspan:行合并
?? ??? ?<th></th>：相等于<td>, 只是內置樣式加粗居中
?? ??? ?<caption></caption>：表格的標題，即表頭
?? ??? ??? ?
?? ??? ?表格的作用：
?? ??? ??? ?(1)簡單的實現一個表格樣式
?? ??? ??? ?(2)進行頁面布局
?? ??? ??? ?
?? ??? ?示例：
?? ??? ?<table>
?? ??? ??? ?<tr><!--行-->
?? ??? ??? ??? ?<th>表格標頭</th>
?? ??? ??? ??? ?<td>普通單元格</td>
?? ??? ??? ?</tr>
?? ??? ?</table>
?? ??? ?
?? ??? ?<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
?? ??? ?作用：分塊加載，用戶體驗比較好
?
三、html表單標簽(重點)
?
?
?? ?1、form標簽：<form></form>
?? ??? ?屬性：?? ?
?? ??? ??? ?name:表單名稱
?? ??? ??? ?action:提交的路徑地址
?? ??? ??? ?method:提交方式（get和post）
?? ??? ??? ?
?? ??? ??? ?get和post的區別（重點）：
?? ??? ??? ??? ?(1)get提交將數據加在地址欄的后面，格式?name=value&name=value；post提交將數據封裝在請求體中
?? ??? ??? ??? ??? ??username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
?? ??? ??? ??? ?(2)get提交相對不安全；post提交相對安全
?? ??? ??? ??? ?(3)get提交有大小限制，根據瀏覽器不同而不同；post不限制大小
?? ??? ??? ??? ?
?? ??? ?示例：
?? ??? ?<form>?
?? ??? ??? ?<table>
?? ??? ??? ??? ?<!--form里面嵌套table-->?? ??? ??? ?
?? ??? ??? ?</table>?? ??? ??? ?
?? ??? ?</form>
?? ??? ?
?? ?2、input標簽：<input type=" "/>
?? ??? ?type屬性:根據type屬性實現各種不同功能的表單項；
?? ??? ??? ?text：普通的文本輸入框；
?? ??? ??? ??? ?name：username value="張三"<!--張三是默認值-->
?? ??? ??? ?password：密碼輸入框；特點是顯示的是掩碼
?? ??? ??? ?radio：單選按鈕
?? ??? ??? ??? ?name：如果想讓一組單選按鈕互斥，就用指定同意name屬性值，需要加value屬性值；
?? ??? ??? ??? ?checked：默認被選中；?? ??? ??? ??? ?
?? ??? ??? ?checkbox：復選框；
?? ??? ??? ??? ?name：組的概念，需要加value屬性值。
?? ??? ??? ??? ?checked：默認被選中；
?? ??? ??? ?file：上傳文件的控件
?? ??? ??? ?button：普通按鈕，沒有任何內置的功能；
?? ??? ??? ?submit：內置功能，點擊會按照action地址提交
?? ??? ??? ?reset：重置，點擊會清空之前填寫的內容
?? ??? ??? ?image：圖片按鈕，功能類似與submit
?? ??? ??? ??? ?src：加載圖片
?? ??? ??? ??? ?alt:圖片的提示文字
?? ??? ??? ?hidden:隱藏表單，作用是在提交數據的時候，服務器需要這個數據，但是不需要用戶看到。
?? ??? ?
?? ??? ?注意：name屬性必須要寫。
?? ?
?? ?3、select標簽(<select></select>)：下拉菜單
?? ??? ?屬性：
?? ??? ??? ?name;表單項的名稱
?? ??? ?option標簽：可選項（下拉菜單之間的級聯）
?? ??? ??? ?屬性：
?? ??? ??? ??? ?value，表單項的值
?? ??? ??? ??? ?selected：默認被選中
?? ??? ?
?? ?4、textarea:文本域標簽
?? ??? ?屬性：
?? ??? ??? ?cols：列數
?? ??? ??? ?rows：行數
?? ??? ?注意：默認的文本值在標簽體當中
?? ?
四、html框架標簽及其他
?? ?1、框架標簽
?? ??? ?frameset:
?? ??? ??? ?屬性：
?? ??? ??? ??? ?rows；按行劃分
?? ??? ??? ??? ?cols：按列劃分
?? ??? ??? ??? ?劃分格式： rows="120,*"
?? ??? ?frame:
?? ??? ??? ?屬性：?? ?
?? ??? ??? ??? ?name：名稱，方便target根據name值進行定位
?? ??? ??? ??? ?src:加載的頁面地址；
?? ??? ??? ??? ?
?? ?2、其他標簽
?? ??? ?<meta>
?? ??? ??? ?<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
?? ??? ??? ?<meta http-equiv="description" content="this is my page">
?? ??? ??? ?<meta http-equiv="content-type" content="text/html; charset=UTF-8">
?? ??? ?<link>
?? ??? ??? ?<link rel="stylesheet" type="text/css" href="./styles.css">
?? ??? ??? ??? ?href：引入css文件的地址
?? ??? ?<script>
?? ??? ??? ?<script type="text/javascript" src=""></script>
?? ??? ??? ??? ?src：js的文件地址
?? ??? ?
?? ?3、特殊字符
?? ??? ? 空格
?? ??? ?> ? 大于號
?? ??? ?< ? 小于號
?? ??? ?© 版權符號
?? ??? ?® ?注冊符號
?? ??? ?
?? ??? ??? ??? ??? ?
?
總結
以上是生活随笔為你收集整理的JavaWeb笔记:Html总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 介绍几个专门面向中文的命名实体识别和关系
- 下一篇： Maven:构建web工程出现Faile