html从入门到精通（全）
生活随笔
收集整理的這篇文章主要介紹了
html从入门到精通（全）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 前言
- 1. 基本標簽
- 2. 實體符號
- 3. 表格
- 4. 進階標簽
- 4.1 背景圖片顏色
- 4.2 圖片
- 4.3 超鏈接
- 4.4 列表
- 4.5 表單
- 4.6 控件
- 4.7 div和span
前言
本文是一個綜合闡述，可看我之前寫的一篇文章復習鞏固
html標簽詳細詮釋（全）
整篇文章代碼如下
代碼資源
- HTML: Hyper Text Markup Language （超文本標記語言）
- 由大量的標簽組成，每一個標簽都有開始標簽和結束標簽（但也有單標簽）
1. 基本標簽
段落標記<p> </p>
標題字<h1>標題字</h1> （有h1到h6）
換行標記<br>
橫線<hr>
預留格式<pre> </pre>
刪除字<del>刪除字</del>
插入字體<ins>插入字</ins>
粗體字體<b>粗體字</b>
斜體字體<i>斜體字</i>
數字在右上角10<sup>2</sup>
數字在右下角10<sub>m</sub>
字體標簽
補充
hr還有額外兩個屬性
meta標簽是說明而不是編碼
<!doctype html> <html><head><!--這行代碼的作用是告訴瀏覽器采用哪一種字符集打開當前頁面。注意：并不是設置當前頁面的字符編碼方式。--><meta charset="gbk">........2. 實體符號
用來表示html中不能顯示的符號
- 實體符號特點是：以&開始，以;結束
空格
小于號<
大于號>
3. 表格
設置表格的行數和列數以及邊緣寬度高度等
- 表單table
- 行數tr
- 列數td
- 列數th （比td多了居中和加粗）
- 頭thead ，體tbody， 腳tfoot
- row合并的時候，刪除“下面的”單元格
- col合并的時候，對刪除哪個沒有要求
具體代碼完整如下
<!doctype html> <html><head><!--這行代碼的作用是告訴瀏覽器采用哪一種字符集打開當前頁面。注意：并不是設置當前頁面的字符編碼方式。--><meta charset="gbk"><title>thead tbody tfoot 在table中不是必須的，只是這樣做便于后期的JS代碼的編寫。</title></head><body><table border="1px" width="50%"><!--頭--><thead><tr><th>員工編號</th><th>員工薪資</th><th>部門名稱</th></tr></thead><!--體--><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>a</td><td>b</td><td rowspan="2">f</td></tr><tr><td colspan="2">d</td></tr></tbody><!--腳--><tfoot><tr><td>1</td><td>2</td><td>3</td></tr></tfoot></table></body> </html>4. 進階標簽
4.1 背景圖片顏色
設置背景顏色和背景圖片
具體格式如下
4.2 圖片
4.3 超鏈接
超鏈接的特點：
- 有下劃線
- 鼠標停留在超鏈接上面顯示小手形狀
- 點擊超鏈接之后還能跳轉頁面
- href后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡中某個資源的路徑，也可以是本地資源的路徑
超鏈接有一個target屬性：
- _blank : 新窗口
- _self ： 當前窗口（默認就是這種方式。）
- _top ： 頂級窗口
- _parent ： 父窗口
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務器發送請求，瀏覽器向服務器發送數據（請求：request），服務器向瀏覽器發送數據（響應：response），B/S結構的系統：每一個請求都會對應一個響應，用戶點擊超鏈接和用戶在瀏覽器地址欄上直接輸入URL，質上沒有區別，都是向服務器發送請求，從操作上來講，超鏈接使用更方便。
4.4 列表
列表分為有序列表和無序列表
- 有序列表ol
- 無序列表ul
li是列表名
列表的示列完整代碼如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>列表</title></head><body><!--有序列表--><ol type="I"><li>水果<ol type="a"><li>蘋果</li><li>西瓜</li><li>桃子</li></ol></li><li>蔬菜<ol><li>西紅柿</li></ol></li><li>甜點</li></ol><!--無序列表--><ul type="circle"><li>中國<ul type="square"><li>北京<ul type="disc"><li>東城區</li><li>西城區</li><li>海淀區</li><li>朝陽區</li></ul></li><li>天津</li><li>上海</li></ul></li><li>美國</li><li>日本</li></ul></body> </html>截圖如圖所示
補充下拉多選列表
- multiple=“multiple” 支持多選的
- size設置顯示條目數量
4.5 表單
表單的作用是收集用戶信息。表單展現之后，用戶填寫表單，點擊提交按鈕提交數據給服務器
- 通過使用form標簽畫表單
- 一個網頁當中可以有多個表單form
- 表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址：action屬性用來指定數據提交給哪個服務器，action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
例如：
http://192.168.111.3:8080/oa/save 這是請求路徑，表單提交數據最終提交：192.168.111.3機器上的8080端口對應的軟件
一個可以提交表的按鈕與單純不可以提交表單的按鈕對比
<form action="http://192.168.111.3:8080/oa/save"><!-- 畫按鈕可以使用input輸入域，type="submit"的時候表示該按鈕是一個提交按鈕，具有提交表單的能力。--> <!-- 對于按鈕來說，按鈕的value屬性用來指定按鈕上顯示的文本信息。--> <input type="submit" value="登錄"/><!--這是一個普通按鈕，不具備提交表單的能力。--> <input type="button" value="設置按鈕上顯示的文本"/></form>對比表單和超鏈接內在的區別聯系
<a href="http://www.baidu.com">百度</a><!--這個按鈕和普通的超鏈接沒什么太大的區別。（超鏈接和表單都可以向服務器發送請求，只不過表單發送請求的同時可以攜帶數據。）--> <form action="http://www.baidu.com"><input type="submit" value="百度" /> </form>結合以上所學習的內容
將表單與表格結合在一起
截圖如下
補充：
form的一個method屬性，分別為get和post
- get:采用get方式提交的時候，用戶提交的信息會顯示在瀏覽器的地址欄上
- post：采用post方式提交的時候，用戶提交的信息不會顯示在瀏覽器地址欄上
- 當用戶提交的信息中含有敏感信息，例如：密碼，建議采用post方式提交，method屬性不指定，或者指定get，這種情況下都是get。只有當method屬性指定為post的時候才是post請求。剩下所有的請求都是get請求
- post提交的時候提交的數據格式和get還是一樣的，只不過不再地址欄上顯示出來，POST提交的數據還是：name=value&name=value&name=value…
單選按鈕框以及多選按鈕框結合完整代碼如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>用戶注冊的表單</title></head><body><form action="http://localhost:8080/jd/register">用戶名<input type="text" name="username"/><br>密碼<input type="password" name="userpwd" /><br>確認密碼<input type="password"/><br>性別<input type="radio" name="gender" value="1" />男<input type="radio" name="gender" value="0" checked/>女 <!--單選按鈕的value必須手動指定--><br>興趣愛好<input type="checkbox" name="interest" value="smoke"/>抽煙<input type="checkbox" name="interest" value="drink" checked/>喝酒<input type="checkbox" name="interest" value="fireHair" checked/>燙頭<br>學歷<select name="grade"><option value="gz">高中</option><option value="dz">大專</option><option value="bk" selected>本科</option> <!--默認選中--><option value="ss">碩士</option></select><br>簡介 <!--文本域，文本域沒有value屬性，用戶填寫的內容就是value--><textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注冊" /><input type="reset" value="清空" /></form><!--超鏈接也可以提交數據給服務器，但是提交的數據都是固定不變的。--><!--超鏈接是get請求。不是post請求。--><a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a></body> </html>4.6 控件
file控件：文件上傳專用<input type="file" />
<input type="file" /><form action="http://localhost:8080/oa/save"><!--隱藏域：網頁上看不到，但是表單提交的時候數據會自動提交給服務器。--> <input type="hidden" name="userid" value="111" />用戶代碼<input type="text" name="usercode" /><input type="submit" value="提交" /></form>input控件屬性
- 都是只讀不能修改
- 但是readonly可以提交給服務器，disabled數據不會提交（即使有name屬性也不會提交。）
- 設置文本框中可輸入的字符數量
- 任何元素（節點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔當中id值不能重復
- 表單提交數據的時候，只和name有關系，和id無關
- javascript可以對HTML文檔當中的任意節點進行增刪改，那么增刪改之前需要先拿到這個節點，通常我們通過id來拿節點對象。id的存在讓我們獲取元素（節點）更方便
4.7 div和span
- div和span都可以稱為“圖層”，保證頁面可以靈活的布局
- div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可
- div獨自占用一行（默認情況下），而span不會
- div可嵌套
總結
以上是生活随笔為你收集整理的html从入门到精通（全）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 表格列求和_excel表格制作,Exce
- 下一篇： mac更新完后读取不出移动硬盘的问题解决