HTML入门之常用标签以及框架写法
生活随笔
收集整理的這篇文章主要介紹了
HTML入门之常用标签以及框架写法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
body中的主要標簽
行內元素
常用標簽屬性：
①href：指定打開的頁面。
②target：用于指定在哪個窗口打開href標簽屬性指定的頁面，常用屬性值有_self （在本頁面窗口中打開）、_blank（在新窗口中打開）。
①src：設置圖片路徑。
②alt：設置圖片不存在時的替代文本。
③height和width：設置圖片的高度和寬度，單位為像素或%。
④title：設定鼠標移到該元素上時顯示的信息。
①span標簽沒有固定的格式表現(xiàn)，只有對它應用CSS樣式時才會產生視覺上的變化。
②span標簽的定義方便了通過CSS樣式格式化標簽內的內容。
塊級元素
可以通過該標簽中的text-align樣式屬性設置樣式，其屬性值有：
跟p標簽一樣，也可以用text-align屬性設置樣式。
①type：指定ol子標簽li的編號類型，其屬性值有：
②start：指定ol子標簽li序號起始點，默認為1，必須為整形數(shù)字。
③reversed：HTML5新增標簽屬性，用于設定列表順序為降序，其屬性值為reversed。
①type：指定ul子標簽li的編號類型，其屬性值有：
表格標簽
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>表格</title><style>table{/*為所有table標簽添加樣式*/width: 720px;/*設置table寬度*/margin: 0 auto;/*設置table水平居中*/border: black 1px solid;/*添加邊框*/border-spacing: 0px;/*去掉table標簽以及其子標簽邊框之間的空隙*/border-collapse: collapse;/*去掉重合線*/}th{/*為所有th標簽添加樣式*/border: black 1px solid;/*添加邊框*/}td{/*為所有td標簽添加樣式*/border: black 1px solid;/*添加邊框*/}</style></head><body><table><tr><th>學號</th><th>姓名</th><th>手機號</th><th>家庭地址</th></tr><tr style="text-align: center;"><!--一行數(shù)據都水平居中--><td>001</td><td>Jim</td><td>13527685948</td><td>河南省鄭州市</td></tr><tr style="height: 100px;"><!--一行數(shù)據高度均為100px--><td style="vertical-align: top;">002</td><!--某一個數(shù)據垂直居中--><td>Kate</td><td style="text-align: center;">18328574678</td><!--某一個數(shù)據水平居中--><td>北京市朝陽區(qū)</td></tr></table></body> </html>表單標簽
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--action：指定表單數(shù)據的目的地method：設置使用哪個方法處理請求get-doGet；post-doPostget：地址欄顯示數(shù)據，導致數(shù)據不安全；post：地址欄不會顯示數(shù)據，安全，量可以很大enctype：默認為application/x-www-form-urlencoded，若要上傳文件則需改成multipart/form-data--><form action="" method="" enctype="multipart/form-data"><!--hidden：設置隱藏框，頁面不顯示，主要用于向服務器端傳遞隱含數(shù)據name：設置隱藏框的name值，將來Servlet用于獲取該框的數(shù)據value：用于設置默認值id：用于唯一標識該隱藏框，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同--><input type="hidden" name="id" value="000001" id="id"/><!--text：默認值，設置文本框name：用于Servlet獲取該框的數(shù)據placeholder：設置提示信息value：用于設置默認值，此時placeholder不再顯示id：用于唯一標識該文本框，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同maxlength：設置可以輸入的最長字符個數(shù)readonly：設置文本框只讀，但是數(shù)據仍可以被Servlet獲取disabled：禁用文本框，數(shù)據不能被Servlet獲取--><input type="text" name="user_name" placeholder="請輸入數(shù)據" value="damin" id="user_name" maxlength="5" readonly="readonly" disabled="disabled"/><!--password：設置密碼框name：用于Servlet獲取該框的數(shù)據placeholder：設置提示信息value：用于設置默認值，此時placeholder不再顯示id：用于唯一標識該密碼框，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同maxlength：設置可以輸入的最長字符個數(shù)readonly：設置密碼框只讀，但是數(shù)據仍可以被Servlet獲取disabled：禁用密碼框，數(shù)據不能被Servlet獲取--><input type="password" name="password" placeholder="請輸入數(shù)據" value="123456" id="password" maxlength="6" readonly="readonly" disabled="disabled" /><!--name：用于Servlet獲取該框的數(shù)據id：用于唯一標識該下拉列表，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同mutiple：設置下拉列表多選，此時Servlet應調用request.getParameterValues()來獲取數(shù)據--><select name="province" id="province" multiple="multiple"><option>---請選擇---</option><!--value：設置選項值，將來該值被Servlet獲取disable：禁用下拉項，使其不能被選擇selected用于設置默認選擇項--><option value="henan" disabled="disabled">河南省</option><option value="beijing" selected="selected">北京市</option><option value="chongqing">重慶市</option></select></form></body> </html>單選框和復選框
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--radio：設置單選框name：用于Servlet獲取該框的數(shù)據value：用于設置選項值，此值會被Servlet獲取id：用于唯一標識該單選框disabled：禁用單選框，數(shù)據不能被Servlet獲取checked：用于設置默認選中項--><input type="radio" name="sex" value="0" id="female" disabled="disabled" /><label for="female">女</label><input type="radio" name="sex" value="1" id="male" checked="checked" /><label for="male">男</label><!--checkbox：設置單選框name：用于Servlet獲取該框的數(shù)據value：用于設置選項值，此值會被Servlet獲取id：用于唯一標識該單選框disabled：禁用單選框，數(shù)據不能被Servlet獲取checked：用于設置默認選中項--><input type="checkbox" name="hobby" value="0" id="basketball" disabled="disabled" /><label for="basketball">籃球</label><input type="checkbox" name="hobby" value="1" id="pingpang" /><label for="pingpang">乒乓球</label><input type="checkbox" name="hobby" value="2" id="football" checked="checked" /><label for="football">足球</label></body> </html>文件框
<!--file：設置文件框name：用于Servlet獲取該框的數(shù)據id：用于唯一標識該密碼框，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同disabled：禁用文件框，數(shù)據不能被Servlet獲取multiple：用于設置文件多選--><input type="file" name="" id="" multiple="multiple" />文本域
<!--textarea：文本域name：用于Servlet獲取該框的數(shù)據，request.getParameter()id：用于唯一標識該文本框，整個頁面不唯一，不允許重復；在確保唯一的前提下，常與name的屬性值相同resize：CSS樣式屬性，用于設置是否禁止調整文本域大小readonly：設置文本域只讀，但是數(shù)據仍可以被Servlet獲取disabled：禁用文本域，數(shù)據不能被Servlet獲取--><textarea name="" id="" cols="120" rows="30" style="resize: none;">鄭州大學</textarea>提交按鈕、重置按鈕、普通按鈕
<!--submit：提交表單value：設置提交按鈕信息id：用于唯一標識該按鈕disabled：禁用提交按鈕--><input type="submit" value="提交" id="" disabled="disabled" /><!--reset：重置表單value：設置重置按鈕信息id：用于唯一標識該按鈕disabled：禁用重置按鈕--><input type="reset" value="重置" id="" /><!--button：按鈕value：設置按鈕信息id：用于唯一標識該按鈕disabled：禁用按鈕--><input type="button" value="按鈕" id="" />fieldset和legend
當表單信息很多時，可以使用fieldset和legend來對表單內容進行分類：
<form action="" method="post"><!--基本信息--><fieldset><legend>基本信息</legend><input type="text"/> <br /><input type="text"/> <br /><input type="text"/> <br /></fieldset><!--問卷調查--> <fieldset><legend>問卷調查</legend><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /></fieldset><input type="submit" value="提交"/></form>框架
三個分頁面：
頭部頁面：
左邊頁面：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>left</title><style>body{background-color: black;}span{font-size: 36px;color: white;font-family: 華文行楷;}</style></head><body><span>左邊</span><a href="http://www.baidu.com" target="right">百度一下，你就知道</a><!--在name為right的頁面打開鏈接--></body> </html>右邊頁面：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>right</title><style>body{background-color: firebrick;}span{font-size: 36px;color: green;font-family: 宋體;}</style></head><body><span>右邊</span></body> </html>總頁面：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>index</title></head><!--框架--><frameset rows="20%,*"><!--上方占比20%，下方為剩下的--><frame src="top.html" /><frameset cols="20%,*"><!----><frame src="left.html" /><frame src="right.html" name="right"/></frameset></frameset> </html>結果：
iframe：
總結
以上是生活随笔為你收集整理的HTML入门之常用标签以及框架写法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第八届蓝桥杯Java A组决赛第一题
- 下一篇： SpringBoot 博客开发 个人学