<\/p>href:要連接的資源路徑 格式如下: href=\"http:\/\/www.baidu.com\" \r\n\r\ntarget: _blank : 在新的窗口打開(kāi)超鏈接. 框架名稱: 在指定框架中打開(kāi)連接內(nèi)容.\r\n\r\nname: 定義一個(gè)頁(yè)面的書(shū)簽.\r\n\r\n用于跳轉(zhuǎn) href : #id.（錨）<\/pre>示例：<\/p>
\r\n校花網(wǎng)<\/a>>\r\n?；ňW(wǎng)<\/a>>\r\n校花網(wǎng)<\/a>> #實(shí)現(xiàn)打開(kāi)圖片自動(dòng)跳轉(zhuǎn)到?；ňW(wǎng)\r\n<\/body><\/pre>四 列表標(biāo)簽：<\/p>
: 無(wú)序列表\r\n\r\n: 有序列表\r\n - :列表中的每一項(xiàng).\r\n\r\n
定義列表\r\n\r\n - 列表標(biāo)題\r\n
- 列表項(xiàng)<\/pre>
示例：<\/p>
\r\n\r\n#unorder list\r\n
#快捷鍵，輸入ul，再按tab鍵會(huì)自動(dòng)補(bǔ)全\r\n - 111<\/li>\r\n
- 222<\/li>\r\n
- 333<\/li>\r\n<\/ul>\r\n\r\n#older list\r\n
\r\n - 111<\/li>\r\n
- 222<\/li>\r\n
- 333<\/li>\r\n<\/ol>\r\n\r\n#定義列表\r\n
\r\n - 第一章<\/dt>\r\n
- 第一節(jié)<\/dd>\r\n
- 第二節(jié)<\/dd>\r\n<\/dl>\r\n\r\n<\/body><\/pre>
執(zhí)行效果：<\/p>
![\"Front-end](\"https:\/\/img.php.cn\/\/upload\/image\/271\/499\/241\/1486783738769096.png\" "\\"Front-end")
<\/p>
五 表格標(biāo)簽:
<\/p>border: 表格邊框.\r\n\r\ncellpadding: 內(nèi)邊距\r\n\r\ncellspacing: 外邊距.\r\n\r\nwidth: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）\r\n\r\n: table row\r\n\r\n | : table head cell\r\n\r\n | : table data cell\r\n\r\nrowspan: 單元格豎跨多少行\(zhòng)r\n\r\ncolspan: 單元格橫跨多少列（即合并單元格）\r\n\r\n | : table header |
(不常用): 為表格進(jìn)行分區(qū).<\/pre>示例：<\/p>
\r\n\r\n\r\n \r\n Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!--表格-->\r\n\r\n<!--布局-->\r\n<table border=\"1px\" cellpadding=\"5px\" cellspacing=\"5px\">\r\n <thead>\r\n <tr>\r\n <!--標(biāo)題加粗-->\r\n <th>111<\/th>\r\n <th>222<\/th>\r\n <th>333<\/th>\r\n <\/tr>\r\n\r\n <\/thead>\r\n\r\n <tbody>\r\n <tr>\r\n <!--內(nèi)容正常顯示，不加粗-->\r\n <td rowspan=\"2\">111<\/td>\r\n <td>222<\/td>\r\n <td>333<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td>111<\/td>\r\n <td>222<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td>111<\/td>\r\n <td colspan=\"2\">222<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html><\/pre><p>執(zhí)行結(jié)果：<\/p><p><img src=\"https:\/\/img.php.cn\/\/upload\/image\/929\/189\/457\/1486783775921291.png\" title=\"Front-end html language\" alt=\"Front-end html language\" style=\"max-width:90%\" style=\"max-width:90%\"\/><\/p><p style=\"margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, \"ms song\", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);\">六 表單標(biāo)簽<form><\/p><p> 表單用于向服務(wù)器傳輸數(shù)據(jù)。<\/p><p> 表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。<\/p><p> 表單還可以包含textarea、select、fieldset和 label 元素。<\/p><p>1.表單屬性<\/p><p> HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中.<\/p><p> action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https:\/\/www.sogou.com\/web<\/p><p> method: 表單的提交方式 post\/get 默認(rèn)取值 就是 get（信封）<\/p><p> get: 1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長(zhǎng)度有限制.<\/p><p> post:1.提交的鍵值對(duì) 不在地址欄，數(shù)據(jù)封裝在form Data 請(qǐng)求體里面。 2.安全性相對(duì)較高. 3.對(duì)提交內(nèi)容的長(zhǎng)度理論上無(wú)限制.<\/p><p> get\/post是常見(jiàn)的兩種請(qǐng)求方式.<\/p><p>2.表單元素<\/p><p> <input> 標(biāo)簽的屬性和對(duì)應(yīng)值 <\/p><pre class='brush:php;toolbar:false;'>type: text 文本輸入框\r\n\r\n password 密碼輸入框\r\n\r\n radio 單選框\r\n\r\n checkbox 多選框 \r\n\r\n submit 提交按鈕 \r\n\r\n button 按鈕(需要配合js使用.) button和submit的區(qū)別？\r\n\r\n file 提交文件：form表單需要加上屬性enctype=\"multipart\/form-data\" \r\n\r\n name: 表單提交項(xiàng)的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客\r\n 戶端編程，而在css和javascript中使用的\r\n value: 表單提交項(xiàng)的值.對(duì)于不同的輸入類型，value 屬性的用法也不同：\r\n2\r\n4\r\n\r\n\r\n\r\ntype=\"button\", \"reset\", \"submit\" - 定義按鈕上的顯示的文本\r\n \r\ntype=\"text\", \"password\", \"hidden\" - 定義輸入字段的初始值\r\n \r\ntype=\"checkbox\", \"radio\", \"image\" - 定義與輸入相關(guān)聯(lián)的值 \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n checked: radio 和 checkbox 默認(rèn)被選中\(zhòng)r\n\r\n readonly: 只讀. text 和 password\r\n\r\n disabled: 對(duì)所用input都好使.<\/pre><p>示例：寫(xiě)一個(gè)注冊(cè)頁(yè)面<\/p><p>代碼1：<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n<h1>注冊(cè)頁(yè)面<\/h1>\r\n\r\n<!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認(rèn):get-->\r\n<!--<form action=\"http:\/\/127.0.0.1:8080\/index\" method=\"post\">-->\r\n\r\n<!--上傳文件加這句-->\r\n<form action=\"http:\/\/127.0.0.1:8080\/index\" method=\"post\" enctype=\"multipart\/form-data\">\r\n\r\n<!--輸入框-->\r\n<!--type=\"\" 隨便輸入一個(gè)內(nèi)容-->\r\n<p>用戶名:<input type=\"test\" name=\"username\" placeholder=\"姓名\"><\/p>\r\n\r\n<!--password:不顯示密碼-->\r\n<p>密碼:<input type=\"password\" name=\"password\" placeholder=\"密碼\"><\/p>\r\n\r\n<!--password:不顯示密碼,只讀不能寫(xiě)密碼-->\r\n<!--<p>密碼:<input type=\"password\" name=\"password\" placeholder=\"密碼\" readonly=\"readonly\"><\/p>-->\r\n\r\n<!--多選框-->\r\n<p>愛(ài)好： 音樂(lè)<input type=\"checkbox\" name=\"hobby\" value=\"music\"> 電影<input type=\"checkbox\" name=\"hobby\" value=\"movie\"><\/p>\r\n\r\n<!--單選框-->\r\n<p>性別： 男<input type=\"radio\" name=\"gender\" value=\"men\"> 女<input type=\"radio\" name=\"gender\" value=\"women\"><\/p>\r\n\r\n<!--重置 -->\r\n<p><input type=\"reset\" value=\"重置\"><\/p>\r\n\r\n<!--提交：會(huì)觸發(fā)事件，提交給服務(wù)端-->\r\n<p><input type=\"submit\" value=\"提交注冊(cè)\"><\/p>\r\n\r\n<!--提交按鍵：不會(huì)觸發(fā)內(nèi)容-->\r\n<p><input type=\"button\" value=\"提交注冊(cè)\"><\/p>\r\n\r\n<!--選擇文件-->\r\n<p><input type=\"submit\" value=\"提交注冊(cè)\"><\/p>\r\n\r\n\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html><\/pre><p>代碼2 1 <!DOCTYPE html><\/p><pre class='brush:php;toolbar:false;'><html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1>注冊(cè)頁(yè)面<\/h1>\r\n<!--<strike>用戶注冊(cè)<\/strike>--> #劃掉“用戶注冊(cè)”幾個(gè)字\r\n<!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認(rèn):get-->\r\n<!--<form action=\"http:\/\/127.0.0.1:8080\/index\" method=\"post\">-->\r\n\r\n<!--上傳文件加這句-->\r\n<form action=\"http:\/\/127.0.0.1:8080\/index\" method=\"post\" enctype=\"multipart\/form-data\">\r\n\r\n<!--輸入框-->\r\n<!--type=\"\" 隨便輸入一個(gè)內(nèi)容-->\r\n<p>用戶名:<input type=\"test\" name=\"username\" placeholder=\"姓名\" disabled><\/p>\r\n\r\n<!--password:不顯示密碼-->\r\n<p>密碼:<input type=\"password\" name=\"password\" placeholder=\"密碼\"><\/p>\r\n\r\n<!--password:不顯示密碼,只讀不能寫(xiě)密碼-->\r\n<!--<p>密碼:<input type=\"password\" name=\"password\" placeholder=\"密碼\" readonly=\"readonly\"><\/p>-->\r\n\r\n<!--多選框-->\r\n<p>愛(ài)好： 音樂(lè)<input type=\"checkbox\" name=\"hobby\" value=\"music\" checked> 電影<input type=\"checkbox\" name=\"hobby\" value=\"movie\"><\/p>\r\n\r\n<!--單選框-->\r\n<p>性別： 男<input type=\"radio\" name=\"gender\" value=\"men\"> 女<input type=\"radio\" name=\"gender\" value=\"women\"><\/p>\r\n\r\n<!--重置 -->\r\n<p><input type=\"reset\" value=\"重置\"><\/p>\r\n \r\n<!--提交：會(huì)觸發(fā)事件，提交給服務(wù)端-->\r\n<p><input type=\"submit\" value=\"提交注冊(cè)\"><\/p>\r\n\r\n<!--提交按鍵：不會(huì)觸發(fā)內(nèi)容-->\r\n<p><input type=\"button\" value=\"提交注冊(cè)\"><\/p>\r\n\r\n<!--選擇文件-->\r\n<p><input type=\"submit\" value=\"提交注冊(cè)\"><\/p>\r\n \r\n<\/form>\r\n\r\n<\/body>\r\n<\/html><\/pre><p>執(zhí)行結(jié)果：<\/p><p><img src=\"https:\/\/img.php.cn\/\/upload\/image\/476\/688\/347\/1486783825238681.png\" title=\"Front-end html language\" alt=\"Front-end html language\" style=\"max-width:90%\" style=\"max-width:90%\"\/><\/p><p>實(shí)現(xiàn):返回頂部功能<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n<div id=\"www\"><\/div>\r\n<img src=\"1.jpg\" alt=\"截圖\" title=\"京東\" width=\"800\" style=\"max-width:90%\"><br>\r\n<a href=\"#www\">返回頂部<\/a>\r\n<\/body>\r\n<\/html><\/pre><p>執(zhí)行效果：<\/p><p><img src=\"https:\/\/img.php.cn\/\/upload\/image\/485\/821\/885\/1486783877494907.png\" title=\"Front-end html language\" alt=\"Front-end html language\" style=\"max-width:90%\" style=\"max-width:90%\"\/><\/p><p>示例：實(shí)現(xiàn)上傳文件功能<\/p><p>在服務(wù)端里面添加這段代碼：<\/p><pre class='brush:php;toolbar:false;'>#實(shí)現(xiàn)上傳文件效果\r\n\r\ndef index(request):\r\n print request.POST\r\n print request.GET\r\n print request.FILES\r\n for item in request.FILES:\r\n fileObj = request.FILES.get(item)\r\n f = open(fileObj.name, 'wb')\r\n iter_file = fileObj.chunks()\r\n for line in iter_file:\r\n f.write(line)\r\n f.close()\r\n return HttpResponse('ok')<\/pre><p>前端頁(yè)面代碼：<\/p><p>實(shí)現(xiàn)：上傳文件功能<\/p><pre class='brush:php;toolbar:false;'><body>\r\n\r\n<form>\r\n\r\n<!--上傳文件-->\r\n<p><input type=\"file\" ><\/p>\r\n\r\n<\/form>\r\n\r\n<\/body><\/pre><p> <select> 下拉選標(biāo)簽屬性<\/p><pre class='brush:php;toolbar:false;'>name:表單提交項(xiàng)的鍵.\r\n\r\n size：選項(xiàng)個(gè)數(shù)\r\n\r\n multiple：multiple \r\n\r\n <option> 下拉選中的每一項(xiàng) 屬性：\r\n\r\n value:表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中\(zhòng)r\n\r\n <optgroup>為每一項(xiàng)加上分組<\/pre><p> 示例:<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\n 省<select name=\"\" id=\"\">\r\n <option value=\"\">北京市<\/option>\r\n <option value=\"\">河北市<\/option>\r\n <option value=\"\">河南市<\/option>\r\n <option value=\"\">山西市<\/option>\r\n <\/select>\r\n\r\n\r\n 省<select name=\"province\" multiple size=\"2\">\r\n <option value=\"beijing\">北京市<\/option>\r\n <option value=\"hebei\">河北市<\/option>\r\n <!--默認(rèn)選中河南省selected-->\r\n <option value=\"henan\" selected=\"selected\">河南市<\/option>\r\n <option value=\"shanxi\">山西市<\/option>\r\n <\/select>\r\n\r\n <!--選擇框-->\r\n 省<select name=\"province\" >\r\n <optgroup label=\"廣東省\">\r\n <option value=\"beijing\">廣州<\/option>\r\n <option value=\"hebei\">東莞<\/option>\r\n <!--默認(rèn)選中河南省selected-->\r\n <option value=\"henan\" selected=\"selected\">中山市<\/option>\r\n <option value=\"shanxi\">珠海市<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n\r\n<\/body>\r\n<\/html><\/pre><p>執(zhí)行結(jié)果:<\/p><p><img src=\"https:\/\/img.php.cn\/\/upload\/image\/936\/882\/183\/1486783979953380.png\" title=\"Front-end html language\" alt=\"Front-end html language\" style=\"max-width:90%\" style=\"max-width:90%\"\/><\/p><p> <textarea> 文本域 <\/p><pre class='brush:php;toolbar:false;'>name: 表單提交項(xiàng)的鍵.\r\ncols: 文本域默認(rèn)有多少列\(zhòng)r\nrows: 文本域默認(rèn)有多少行<\/pre><p> <label> <\/p><pre class='brush:php;toolbar:false;'><label for=\"www\">姓名<\/label>\r\n<input id=\"www\" type=\"text\"><\/pre><p><fieldset><\/p><pre class='brush:php;toolbar:false;'><fieldset>\r\n <legend>登錄吧<\/legend> \r\n <input type=\"text\">\r\n<\/fieldset><\/pre><p>示例：<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\n <!--文本框-->\r\n 簡(jiǎn)介<textarea name=\"desc\" id=\"\" cols=\"30\" rows=\"10\"><\/textarea>\r\n\r\n <fieldset>\r\n <legend>登錄吧<\/legend>\r\n <input type=\"text\">\r\n <\/fieldset>\r\n\r\n <!--特效-->\r\n <label for=\"www\">姓名<\/label>\r\n <input id=\"www\" type=\"text\">\r\n\r\n<\/body>\r\n<\/html><\/pre><p>執(zhí)行結(jié)果:<\/p><p><img src=\"https:\/\/img.php.cn\/\/upload\/image\/350\/270\/979\/1486784103431636.png\" title=\"Front-end html language\" alt=\"Front-end html language\" style=\"max-width:90%\" style=\"max-width:90%\"\/><\/p><p>最后總結(jié)：<\/p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<form>\r\n\r\n <!--提交數(shù)據(jù)到服務(wù)端(方式有g(shù)et and post)-->\r\n <form action=\"http:\/\/127.0.0.1:8080\/index\" method=\"post\">\r\n\r\n <!--input標(biāo)簽的屬性和對(duì)應(yīng)值-->\r\n <input type=\"test\" name=\"username\">\r\n <input type=\"password\" name=\"pwd\">\r\n <input type=\"checkbox\" name=\"hobby\" value=\"musci\">\r\n <input type=\"radio\" name=\"gender\" value=\"man\">\r\n <input type=\"file\" name=\"filename\" >\r\n <input type=\"submit\" name=\"提交\" >\r\n <input type=\"button\" name=\"提交\" >\r\n <input type=\"reset\" name=\"重置\" >\r\n\r\n\r\n <!--下拉選標(biāo)簽屬性-->\r\n <select name=\"\">\r\n <option value=\"\"><\/option>\r\n <option value=\"\"><\/option>\r\n <\/select>\r\n\r\n <!--文本域-->\r\n 簡(jiǎn)介<textarea name=\"\" id=\"\" cols=\"30\" rows=\"10\"><\/textarea>\r\n \r\n<\/form>\r\n\r\n<\/body>\r\n<\/html><\/pre><p>更多Front-end html language相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！<\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://m.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://m.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://m.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://m.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://m.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://m.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://m.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://m.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://m.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Front-end html language</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Front-end html language</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/member/13.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/013/6177b5643d1eb119.png" src="/static/imghw/default1.png" alt="高洛峰">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/member/13.html" class="author_name">高洛峰</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 11, 2017 am 11:36 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> Front-end Overview</p>
<p>Hypertext Markup Language (English: HyperText Markup Language, referred to as: HTML) is a standard markup language used to create web pages. </p>
<p>You can use HTML to build your own WEB site. HTML runs on the browser and is parsed by the browser. </p>
<p>Server code: </p>
<pre class="brush:php;toolbar:false">#!/usr/bin/env?python
#?-*-?coding:utf-8?-*-?
#Author:?nulige
import?socket
def?main():
????sock?=?socket.socket(socket.AF_INET,?socket.SOCK_STREAM)
????sock.bind(('localhost',8080))
????sock.listen(5)
????while?True:
????????connection,?address?=?sock.accept()
????????buf?=?connection.recv(1024)
????????f=open("test.html","rb")??#以讀的方式打開(kāi)test.html文件
????????data=f.read()
????????connection.sendall(bytes("HTTP/1.1?201?OK\r\n\r\n","utf8"))
????????connection.sendall(data)
????????connection.close()
if?__name__?==?'__main__':
????main()</pre>
<p>test.html code</p>
<pre class="brush:php;toolbar:false">nbsp;html>
????<meta>
????<title>nulige</title>
????<title>oldboy</title>
????<link>
????<link>
????<script></script>
<h1>hello?world</h1>>
<h2>hello?world</h2>>
<input>
<p>img?src="file:///D:/python/day42/1.jpg"?width="120"?height="80"?align=</p>
<h1>hello?h1</h1>
<div>style</div>
<!--<script>-->
????<!--alert(window.top.document.compatMode)-->
<!--</script>-->
</pre>
<p>The client is the browser. When accessing test.html through the browser, the effect is as follows: </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/958/258/456/1486783273563746.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"></p>
<p>Example 2: Access Jingdong website</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/508/113/351/1486783288693698.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"></p>
<p> Access Jingdong’s server schematic diagram from the browser</p>
<p> </p>
<p>html css js is called: The Three Musketeers of the Internet</p>
<p>Going online: actually downloading web pages<br>Browser: just an interpreter</p>
<p>There are two common modes:</p>
<p>One is cs mode: c: client s:server<br> One is bs mode: b: browser s: server</p>
<p>Tag language: </p>
<p> Tags are divided into: self-closing tags and non-closing tags </p>
<p>Block-level tags: only occupy a small area of ??their own font</p>
<p>Inline tags: occupy one line</p>
<p> </p> <p>What is HTML? </p>
<p>htyper text markup language Hypertext markup language</p>
<p>Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs. </p>
<p>Markup language: A language composed of tags (tags).</p>
<p> </p>
<p>Web page==HTML document, parsed by the browser, used for display</p>
<p> Static web page: Static resources, such as xxx.html</p>
<p>Dynamic web page: The html code is dynamically generated by a certain development language based on user requests</p>
<p>html document tree structure diagram:</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/360/889/253/1486783314541437.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"></p>
<p>What is a tag </p>
<p> is composed of a pair of words enclosed by angle brackets For example: *The words in all tags cannot start with The </p>
<p> tag is not case-sensitive. and . It is recommended to use lowercase. The </p>
<p> tag is divided into two parts: the opening tag <a> and the closing tag </a>. The part between the two tags is called the tag body.</p>
<p>Some tag functions are relatively simple. Just use one tag. This kind of tag is called a self-closing tag. For example: <br> </p>
<hr> <input> <img src="/static/imghw/default1.png" data-src="hello.js" class="lazy" alt="Front-end html language" ><p> tags can be nested. But they cannot be cross-nested. <a><b></b></a> </p>
<p>The attributes of the </p>
<p> tag usually appear in the form of key-value pairs. For example, the name="alex"</p>
<p> attribute can only appear in the start tag or In self-closing tags, </p>
<p> attribute names are all lowercase. *Attribute values ??must be wrapped in double quotes or single quotes. For example, name="alex"</p>
<p>If the attribute value is exactly the same as the attribute name, directly Just write the attribute name. For example, readonly</p>
<p>Example:</p>
<pre class="brush:php;toolbar:false">?
<input>
</pre>
<p>tag</p>
<p> Due to historical reasons, various browsers have different differences in rendering the page. There are differences, and even the same browser renders the page differently in different versions. Before the <br>W3C standard was introduced, browsers did not have unified standards for rendering pages, resulting in differences (Quirks mode or Compatibility <br>Mode); due to the introduction of the W3C standard, browsers have unified rendering of pages The standard (CSScompat or Strict mode is also called Standards<br>mode), this is the simplest difference between the two. <br> After the W3C standard was launched, browsers began to adopt the new standard, but there was a problem: how to ensure that old web pages could continue to be browsed. Before the standard came out, <br> many pages were written based on the old rendering method , if the standard is used for rendering, it will cause the page to display abnormally. In order to maintain browser rendering compatibility and enable pages before <br> to be browsed normally, browsers retain the old rendering method (such as Microsoft's IE). In this way, Quircks mode<br> and Standars mode are produced in browser rendering. The two rendering methods coexist in one browser. </p>
<pre class="brush:php;toolbar:false">window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁(yè)面。?
//CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。</pre>
<p> Usage example: </p>
<pre class="brush:php;toolbar:false">?<script>
alert(window.top.document.compatMode)
</script></pre>
<p> This attribute will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, then compatMode defaults to BackCompat, </p>
<p>This That is the beginning of the devil - the browser parses and renders the page in its own way, so different styles will be displayed in different browsers. </p>
<p> If you add to your page, it is equivalent to turning on the standards mode, and the browser must parse and render according to W3C's </p>
<p> standards page, so that your page will appear the same in all browsers. </p>
<p>This is what does. </p>
<p>head tag</p>
<p><meta></p>
<p>? ? ? ? ?meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。</p>
<p>? ? ? ? 1: name屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。 ? ??</p>
<pre class="brush:php;toolbar:false"><meta>
?
<meta></pre>
<p>? ? ? ? 2: http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content， ? ? ? ? ? ? ?content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。 ??</p>
<pre class="brush:php;toolbar:false"><meta>?//(注意后面的引號(hào)，分別在秒數(shù)的前面和網(wǎng)址的后面)
?
<meta>
?
<meta></pre>
<p>注意：X-UA-Compatible(兼容：IE6 and IE7)</p>
<pre class="brush:php;toolbar:false">每個(gè)主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業(yè)界標(biāo)準(zhǔn)。以這些作為IE的特色，其中
一個(gè)風(fēng)險(xiǎn)就是舊版本網(wǎng)站無(wú)法正確的顯示。
為了將這個(gè)風(fēng)險(xiǎn)降到最低，IE6允許網(wǎng)頁(yè)開(kāi)發(fā)人員選擇IE編譯和顯示他們網(wǎng)頁(yè)的方式。"Quirks?mode"為預(yù)設(shè)，這會(huì)
使頁(yè)面以舊版本瀏覽器的視點(diǎn)顯示，"Standards?mode"(也稱為"strict?mode")特點(diǎn)是支持業(yè)界標(biāo)準(zhǔn)最為完善。
然而要利用這個(gè)增強(qiáng)的支持功能，網(wǎng)頁(yè)必須包含恰當(dāng)?shù)闹噶睢?
若一個(gè)網(wǎng)頁(yè)沒(méi)有包含指令，IE6會(huì)將它以quirks?mode顯示。若網(wǎng)頁(yè)包含有效的指令但瀏
覽器無(wú)法辨識(shí)，IE6會(huì)將它以IE6?standards?mode顯示。因?yàn)樯贁?shù)網(wǎng)站已經(jīng)包含指令，兼容性模式的
切換相當(dāng)成功。這使網(wǎng)頁(yè)開(kāi)發(fā)人員能選擇將他們的網(wǎng)頁(yè)轉(zhuǎn)移為standards?mode的最佳時(shí)機(jī)。
隨著時(shí)間經(jīng)過(guò)，更多網(wǎng)站開(kāi)始使用standards?mode。它們也開(kāi)始使用IE6的特性和功能來(lái)檢測(cè)IE。舉例來(lái)說(shuō)，IE6
不支持universal?selector(即css之全局選擇器?*?{})，一些網(wǎng)站便使用它來(lái)針對(duì)IE做特定的對(duì)應(yīng)。
當(dāng)?IE7增加了對(duì)全域選擇器的支持，那些依賴IE6特點(diǎn)的網(wǎng)站便無(wú)法偵測(cè)出這個(gè)新版本的瀏覽器。因此那些針對(duì)IE的
特定對(duì)應(yīng)無(wú)法應(yīng)用于IE7，造成這些網(wǎng)站便無(wú)法如他們預(yù)期的顯示。由于只支持兩種兼容性模式，受到影
響的網(wǎng)站擁有者被迫更新他們的網(wǎng)站使其能支持IE7。
IE8?比之前的任何版本瀏覽器都更支持業(yè)界標(biāo)準(zhǔn)，因此針對(duì)舊版本瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)可能無(wú)法如預(yù)期般呈現(xiàn)。為了幫
助減輕所有問(wèn)題，IE8引入文件兼容性的概念，使你能選擇你的網(wǎng)頁(yè)設(shè)計(jì)要對(duì)應(yīng)的特定IE版本。文件兼容性在IE8增加
了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個(gè)網(wǎng)頁(yè)。若你的網(wǎng)頁(yè)無(wú)法在?ie8正確的顯示，你可以更新
你的網(wǎng)站使它支持最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)(優(yōu)先選項(xiàng))或在你的頁(yè)面上新增一個(gè)meta元素用于告訴IE8如何依照舊版本瀏覽器
編譯你的頁(yè)面。
這能讓你選擇將你的網(wǎng)站更新支持IE8新特點(diǎn)的時(shí)機(jī)。
當(dāng)?Internet?Explorer?8?遇到未包含?X-UA-Compatible?標(biāo)頭的網(wǎng)頁(yè)時(shí)，它將使用??指令來(lái)確
定如何顯示該網(wǎng)頁(yè)。?如果該指令丟失或未指定基于標(biāo)準(zhǔn)的文檔類型，則?Internet?Explorer?8?將以?IE5?模式
（Quirks?模式）顯示該網(wǎng)頁(yè)。</pre>
<p>非meta標(biāo)簽</p>
<pre class="brush:php;toolbar:false">????<title>nulige</title>
????<link>
????<link>
????<script></script> </pre>
<p>body標(biāo)簽</p>
<p>設(shè)置標(biāo)簽背景色</p><pre class='brush:php;toolbar:false;'><h3 style="padding: 2px 0px 2px 10px; font-size: 15px; line-height: 24px; background: #009acd; color: #ffffff; font-family: 'comic sans ms', 微軟雅黑, 宋體, 黑體, Arial; height: 24px; width: 507.47px; margin: 12px 0px !important;">body標(biāo)簽</h3></pre><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">一 基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）</p><pre class='brush:php;toolbar:false;'><hn>: n的取值范圍是1~6; 從大到小. 用來(lái)表示標(biāo)題. <h1> hello world <h1>
<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白. （塊級(jí)標(biāo)簽）
<b> <strong>: 加粗標(biāo)簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標(biāo) 和 下角表.
<br>:換行.
<hr>:水平線
<div>
<div> hello world</div> 就是什么都不做（重點(diǎn)）
<span> ：只占一小塊空間 （內(nèi)聯(lián)標(biāo)簽）
內(nèi)聯(lián)標(biāo)簽：只能嵌套內(nèi)聯(lián)標(biāo)簽
塊級(jí)標(biāo)簽：可以嵌套內(nèi)聯(lián)標(biāo)簽</pre><p>示例:演示div標(biāo)簽</p><pre class='brush:php;toolbar:false;'><div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello</div></pre><p>運(yùn)行效果：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/371/546/687/1486783505817081.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p>塊級(jí)標(biāo)簽：<p><h1><table><ol><ul><form><div></p><p>內(nèi)聯(lián)標(biāo)簽：<a><input><img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="Front-end html language" ><sub><sup><textarea><span></p><p>block（塊）元素的特點(diǎn)</p><p> 總是在新行上開(kāi)始；<br/> 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。<br/> 它可以容納內(nèi)聯(lián)元素和其他塊元素</p><p>inline元素的特點(diǎn)</p><p>和其他元素都在一行上；<br/>寬度就是它的文字或圖片的寬度，不可改變<br/>內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素<br/></p><p>特殊字符</p><p> 大于 = < 小于=>；"；©® 空格=nbsp</p><p class="fz18 YaHei lh30 h30 col-gray03 pb10" style="max-width:90%"ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">HTML 特殊符號(hào)編碼對(duì)照表</p><p>參考：http://tool.chinaz.com/Tools/HtmlChar.aspx</p><p>CSS樣式參考:</p><p>http://v3.bootcss.com/</p><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">二 圖形標(biāo)簽: <img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="Front-end html language" > </p><pre class='brush:php;toolbar:false;'>src: 要顯示圖片的路徑.
alt: 圖片沒(méi)有加載成功時(shí)的提示.
title: 鼠標(biāo)懸浮時(shí)的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)</pre><p>示例:打開(kāi)一張圖片</p><pre class='brush:php;toolbar:false;'><body>
<img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="截圖" title="京東" style="max-width:90%" style="max-width:90%">
</body></pre><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">三 超鏈接標(biāo)簽(錨標(biāo)簽) <a></p><pre class='brush:php;toolbar:false;'>href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打開(kāi)超鏈接. 框架名稱: 在指定框架中打開(kāi)連接內(nèi)容.
name: 定義一個(gè)頁(yè)面的書(shū)簽.
用于跳轉(zhuǎn) href : #id.（錨）</pre><p>示例：</p><pre class='brush:php;toolbar:false;'><body>
<a href="http://www.xiaohuar.com">?；ňW(wǎng)</a>>
<a href="http://www.xiaohuar.com" target="_blank">校花網(wǎng)</a>>
<a href="http://www.xiaohuar.com" target="_blank"><img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="">?；ňW(wǎng)</a>> #實(shí)現(xiàn)打開(kāi)圖片自動(dòng)跳轉(zhuǎn)到校花網(wǎng)
</body></pre><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">四 列表標(biāo)簽：</p><pre class='brush:php;toolbar:false;'><ul>: 無(wú)序列表
<ol>: 有序列表
<li>:列表中的每一項(xiàng).
<dl> 定義列表
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)</pre><p>示例：</p><pre class='brush:php;toolbar:false;'><body>
#unorder list
<ul> #快捷鍵，輸入ul，再按tab鍵會(huì)自動(dòng)補(bǔ)全
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
#older list
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
#定義列表
<dl>
<dt>第一章</dt>
<dd>第一節(jié)</dd>
<dd>第二節(jié)</dd>
</dl>
</body></pre><p>執(zhí)行效果：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/271/499/241/1486783738769096.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">五 表格標(biāo)簽: <table></p><pre class='brush:php;toolbar:false;'>border: 表格邊框.
cellpadding: 內(nèi)邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）
<th>: table header <tbody>(不常用): 為表格進(jìn)行分區(qū).</pre><p>示例：</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格-->
<!--布局-->
<table border="1px" cellpadding="5px" cellspacing="5px">
<thead>
<tr>
<!--標(biāo)題加粗-->
<th>111</th>
<th>222</th>
<th>333</th>
</tr>
</thead>
<tbody>
<tr>
<!--內(nèi)容正常顯示，不加粗-->
<td rowspan="2">111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td colspan="2">222</td>
</tr>
</tbody>
</table>
</body>
</html></pre><p>執(zhí)行結(jié)果：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/929/189/457/1486783775921291.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p style="margin: 10px 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: verdana, "ms song", 宋體, Arial, 微軟雅黑, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">六 表單標(biāo)簽<form></p><p> 表單用于向服務(wù)器傳輸數(shù)據(jù)。</p><p> 表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。</p><p> 表單還可以包含textarea、select、fieldset和 label 元素。</p><p>1.表單屬性</p><p> HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中.</p><p> action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web</p><p> method: 表單的提交方式 post/get 默認(rèn)取值 就是 get（信封）</p><p> get: 1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長(zhǎng)度有限制.</p><p> post:1.提交的鍵值對(duì) 不在地址欄，數(shù)據(jù)封裝在form Data 請(qǐng)求體里面。 2.安全性相對(duì)較高. 3.對(duì)提交內(nèi)容的長(zhǎng)度理論上無(wú)限制.</p><p> get/post是常見(jiàn)的兩種請(qǐng)求方式.</p><p>2.表單元素</p><p> <input> 標(biāo)簽的屬性和對(duì)應(yīng)值 </p><pre class='brush:php;toolbar:false;'>type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區(qū)別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
name: 表單提交項(xiàng)的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
戶端編程，而在css和javascript中使用的
value: 表單提交項(xiàng)的值.對(duì)于不同的輸入類型，value 屬性的用法也不同：
2
4
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
checked: radio 和 checkbox 默認(rèn)被選中
readonly: 只讀. text 和 password
disabled: 對(duì)所用input都好使.</pre><p>示例：寫(xiě)一個(gè)注冊(cè)頁(yè)面</p><p>代碼1：</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注冊(cè)頁(yè)面</h1>
<!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認(rèn):get-->
<!--<form action="http://127.0.0.1:8080/index" method="post">-->
<!--上傳文件加這句-->
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
<!--輸入框-->
<!--type="" 隨便輸入一個(gè)內(nèi)容-->
<p>用戶名:<input type="test" name="username" placeholder="姓名"></p>
<!--password:不顯示密碼-->
<p>密碼:<input type="password" name="password" placeholder="密碼"></p>
<!--password:不顯示密碼,只讀不能寫(xiě)密碼-->
<!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->
<!--多選框-->
<p>愛(ài)好： 音樂(lè)<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie"></p>
<!--單選框-->
<p>性別： 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>
<!--重置 -->
<p><input type="reset" value="重置"></p>
<!--提交：會(huì)觸發(fā)事件，提交給服務(wù)端-->
<p><input type="submit" value="提交注冊(cè)"></p>
<!--提交按鍵：不會(huì)觸發(fā)內(nèi)容-->
<p><input type="button" value="提交注冊(cè)"></p>
<!--選擇文件-->
<p><input type="submit" value="提交注冊(cè)"></p>
</form>
</body>
</html></pre><p>代碼2 1 <!DOCTYPE html></p><pre class='brush:php;toolbar:false;'><html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注冊(cè)頁(yè)面</h1>
<!--<strike>用戶注冊(cè)</strike>--> #劃掉“用戶注冊(cè)”幾個(gè)字
<!--action:就是提交數(shù)據(jù)到服務(wù)端 method{get,post}默認(rèn):get-->
<!--<form action="http://127.0.0.1:8080/index" method="post">-->
<!--上傳文件加這句-->
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
<!--輸入框-->
<!--type="" 隨便輸入一個(gè)內(nèi)容-->
<p>用戶名:<input type="test" name="username" placeholder="姓名" disabled></p>
<!--password:不顯示密碼-->
<p>密碼:<input type="password" name="password" placeholder="密碼"></p>
<!--password:不顯示密碼,只讀不能寫(xiě)密碼-->
<!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->
<!--多選框-->
<p>愛(ài)好： 音樂(lè)<input type="checkbox" name="hobby" value="music" checked> 電影<input type="checkbox" name="hobby" value="movie"></p>
<!--單選框-->
<p>性別： 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>
<!--重置 -->
<p><input type="reset" value="重置"></p>
<!--提交：會(huì)觸發(fā)事件，提交給服務(wù)端-->
<p><input type="submit" value="提交注冊(cè)"></p>
<!--提交按鍵：不會(huì)觸發(fā)內(nèi)容-->
<p><input type="button" value="提交注冊(cè)"></p>
<!--選擇文件-->
<p><input type="submit" value="提交注冊(cè)"></p>
</form>
</body>
</html></pre><p>執(zhí)行結(jié)果：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/476/688/347/1486783825238681.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p>實(shí)現(xiàn):返回頂部功能</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="www"></div>
<img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="截圖" title="京東" style="max-width:90%" style="max-width:90%"><br>
<a href="#www">返回頂部</a>
</body>
</html></pre><p>執(zhí)行效果：</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/485/821/885/1486783877494907.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p>示例：實(shí)現(xiàn)上傳文件功能</p><p>在服務(wù)端里面添加這段代碼：</p><pre class='brush:php;toolbar:false;'>#實(shí)現(xiàn)上傳文件效果
def index(request):
print request.POST
print request.GET
print request.FILES
for item in request.FILES:
fileObj = request.FILES.get(item)
f = open(fileObj.name, 'wb')
iter_file = fileObj.chunks()
for line in iter_file:
f.write(line)
f.close()
return HttpResponse('ok')</pre><p>前端頁(yè)面代碼：</p><p>實(shí)現(xiàn)：上傳文件功能</p><pre class='brush:php;toolbar:false;'><body>
<form>
<!--上傳文件-->
<p><input type="file" ></p>
</form>
</body></pre><p> <select> 下拉選標(biāo)簽屬性</p><pre class='brush:php;toolbar:false;'>name:表單提交項(xiàng)的鍵.
size：選項(xiàng)個(gè)數(shù)
multiple：multiple
<option> 下拉選中的每一項(xiàng) 屬性：
value:表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中
<optgroup>為每一項(xiàng)加上分組</pre><p> 示例:</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
省<select name="" id="">
<option value="">北京市</option>
<option value="">河北市</option>
<option value="">河南市</option>
<option value="">山西市</option>
</select>
省<select name="province" multiple size="2">
<option value="beijing">北京市</option>
<option value="hebei">河北市</option>
<!--默認(rèn)選中河南省selected-->
<option value="henan" selected="selected">河南市</option>
<option value="shanxi">山西市</option>
</select>
<!--選擇框-->
省<select name="province" >
<optgroup label="廣東省">
<option value="beijing">廣州</option>
<option value="hebei">東莞</option>
<!--默認(rèn)選中河南省selected-->
<option value="henan" selected="selected">中山市</option>
<option value="shanxi">珠海市</option>
</optgroup>
</select>
</body>
</html></pre><p>執(zhí)行結(jié)果:</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/936/882/183/1486783979953380.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p> <textarea> 文本域 </p><pre class='brush:php;toolbar:false;'>name: 表單提交項(xiàng)的鍵.
cols: 文本域默認(rèn)有多少列
rows: 文本域默認(rèn)有多少行</pre><p> <label> </p><pre class='brush:php;toolbar:false;'><label for="www">姓名</label>
<input id="www" type="text"></pre><p><fieldset></p><pre class='brush:php;toolbar:false;'><fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset></pre><p>示例：</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--文本框-->
簡(jiǎn)介<textarea name="desc" id="" cols="30" rows="10"></textarea>
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
<!--特效-->
<label for="www">姓名</label>
<input id="www" type="text">
</body>
</html></pre><p>執(zhí)行結(jié)果:</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/350/270/979/1486784103431636.png" class="lazy" title="Front-end html language" alt="Front-end html language" style="max-width:90%" style="max-width:90%"/></p><p>最后總結(jié)：</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--提交數(shù)據(jù)到服務(wù)端(方式有g(shù)et and post)-->
<form action="http://127.0.0.1:8080/index" method="post">
<!--input標(biāo)簽的屬性和對(duì)應(yīng)值-->
<input type="test" name="username">
<input type="password" name="pwd">
<input type="checkbox" name="hobby" value="musci">
<input type="radio" name="gender" value="man">
<input type="file" name="filename" >
<input type="submit" name="提交" >
<input type="button" name="提交" >
<input type="reset" name="重置" >
<!--下拉選標(biāo)簽屬性-->
<select name="">
<option value=""></option>
<option value=""></option>
</select>
<!--文本域-->
簡(jiǎn)介<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html></pre><p>更多Front-end html language相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8637</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1728</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1442</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796822239.html" title="How do I stay up-to-date with the latest HTML standards and best practices?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175037959235285.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I stay up-to-date with the latest HTML standards and best practices?" />
</a>
<a href="http://m.miracleart.cn/faq/1796822239.html" title="How do I stay up-to-date with the latest HTML standards and best practices?" class="phphistorical_Version2_mids_title">How do I stay up-to-date with the latest HTML standards and best practices?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 08:33 AM</span>
<p class="Articlelist_txts_p">The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821966.html" title="How do I use the element to represent the main content of a document?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034575284018.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the element to represent the main content of a document?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821966.html" title="How do I use the element to represent the main content of a document?" class="phphistorical_Version2_mids_title">How do I use the element to represent the main content of a document?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 pm 11:09 PM</span>
<p class="Articlelist_txts_p">The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821965.html" title="How do I create a basic HTML document?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034527243743.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I create a basic HTML document?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821965.html" title="How do I create a basic HTML document?" class="phphistorical_Version2_mids_title">How do I create a basic HTML document?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 pm 11:01 PM</span>
<p class="Articlelist_txts_p">To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821968.html" title="How do I create checkboxes in HTML using the element?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034767289886.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I create checkboxes in HTML using the element?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821968.html" title="How do I create checkboxes in HTML using the element?" class="phphistorical_Version2_mids_title">How do I create checkboxes in HTML using the element?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 pm 11:41 PM</span>
<p class="Articlelist_txts_p">To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796823670.html" title="How do I minimize the size of HTML files?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069761263762.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I minimize the size of HTML files?" />
</a>
<a href="http://m.miracleart.cn/faq/1796823670.html" title="How do I minimize the size of HTML files?" class="phphistorical_Version2_mids_title">How do I minimize the size of HTML files?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:53 AM</span>
<p class="Articlelist_txts_p">To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796824133.html" title="How do I use the element to represent the footer of a document or section?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175078424215034.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the element to represent the footer of a document or section?" />
</a>
<a href="http://m.miracleart.cn/faq/1796824133.html" title="How do I use the element to represent the footer of a document or section?" class="phphistorical_Version2_mids_title">How do I use the element to represent the footer of a document or section?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 25, 2025 am 12:57 AM</span>
<p class="Articlelist_txts_p">It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796823674.html" title="How has HTML evolved over time, and what are the key milestones in its history?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069767173496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How has HTML evolved over time, and what are the key milestones in its history?" />
</a>
<a href="http://m.miracleart.cn/faq/1796823674.html" title="How has HTML evolved over time, and what are the key milestones in its history?" class="phphistorical_Version2_mids_title">How has HTML evolved over time, and what are the key milestones in its history?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:54 AM</span>
<p class="Articlelist_txts_p">HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796823682.html" title="How do I use the tabindex attribute to control the tab order of elements?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069781150026.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How do I use the tabindex attribute to control the tab order of elements?" />
</a>
<a href="http://m.miracleart.cn/faq/1796823682.html" title="How do I use the tabindex attribute to control the tab order of elements?" class="phphistorical_Version2_mids_title">How do I use the tabindex attribute to control the tab order of elements?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:56 AM</span>
<p class="Articlelist_txts_p">ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing</p>
</div>
</div>
<a href="http://m.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/about/us.html">About us</a>
<a href="http://m.miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://m.miracleart.cn/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="rx1kf" class="pl_css_ganrao" style="display: none;"><strong id="rx1kf"></strong><pre id="rx1kf"></pre><strong id="rx1kf"><optgroup id="rx1kf"><nav id="rx1kf"><sup id="rx1kf"></sup></nav></optgroup></strong><label id="rx1kf"><style id="rx1kf"><strong id="rx1kf"><acronym id="rx1kf"></acronym></strong></style></label><label id="rx1kf"><th id="rx1kf"></th></label><thead id="rx1kf"></thead><legend id="rx1kf"><p id="rx1kf"><source id="rx1kf"><dl id="rx1kf"></dl></source></p></legend><abbr id="rx1kf"></abbr><table id="rx1kf"></table><pre id="rx1kf"><pre id="rx1kf"><s id="rx1kf"><fieldset id="rx1kf"></fieldset></s></pre></pre><form id="rx1kf"><em id="rx1kf"><listing id="rx1kf"></listing></em></form><strong id="rx1kf"></strong><fieldset id="rx1kf"><rt id="rx1kf"><source id="rx1kf"><pre id="rx1kf"></pre></source></rt></fieldset><mark id="rx1kf"></mark><i id="rx1kf"><source id="rx1kf"></source></i><menu id="rx1kf"><source id="rx1kf"><form id="rx1kf"><strike id="rx1kf"></strike></form></source></menu><big id="rx1kf"><xmp id="rx1kf"></xmp></big><b id="rx1kf"></b><b id="rx1kf"><rp id="rx1kf"><noframes id="rx1kf"></noframes></rp></b><fieldset id="rx1kf"></fieldset><big id="rx1kf"><xmp id="rx1kf"></xmp></big><center id="rx1kf"><output id="rx1kf"><del id="rx1kf"><b id="rx1kf"></b></del></output></center><td id="rx1kf"></td><fieldset id="rx1kf"></fieldset><div id="rx1kf"></div><td id="rx1kf"></td><center id="rx1kf"><mark id="rx1kf"></mark></center><optgroup id="rx1kf"><th id="rx1kf"><bdo id="rx1kf"><i id="rx1kf"></i></bdo></th></optgroup><div id="rx1kf"></div><label id="rx1kf"><style id="rx1kf"></style></label><center id="rx1kf"></center><object id="rx1kf"><label id="rx1kf"><pre id="rx1kf"></pre></label></object><s id="rx1kf"><strong id="rx1kf"><dl id="rx1kf"></dl></strong></s><button id="rx1kf"><ins id="rx1kf"></ins></button><pre id="rx1kf"></pre><sup id="rx1kf"></sup><table id="rx1kf"></table><center id="rx1kf"></center><span id="rx1kf"><tr id="rx1kf"><div id="rx1kf"></div></tr></span><optgroup id="rx1kf"><label id="rx1kf"><bdo id="rx1kf"></bdo></label></optgroup><strong id="rx1kf"></strong><video id="rx1kf"><ul id="rx1kf"><u id="rx1kf"><tbody id="rx1kf"></tbody></u></ul></video><ruby id="rx1kf"><rp id="rx1kf"></rp></ruby><p id="rx1kf"><td id="rx1kf"><dl id="rx1kf"><address id="rx1kf"></address></dl></td></p><track id="rx1kf"><u id="rx1kf"><form id="rx1kf"></form></u></track><listing id="rx1kf"><strong id="rx1kf"><label id="rx1kf"><strike id="rx1kf"></strike></label></strong></listing><object id="rx1kf"><ol id="rx1kf"></ol></object><table id="rx1kf"><track id="rx1kf"><var id="rx1kf"></var></track></table><small id="rx1kf"><ruby id="rx1kf"><rp id="rx1kf"></rp></ruby></small><pre id="rx1kf"></pre></div>
</html>