Html 前端学习
<!DOCTYPE html> < lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <> <!--a标签--> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#tt">看第二章</a> #识别ID <!--<div style="height: 2000px;background-color: red;">第一章</div>--> <!--<div id="tt" style="height: 2000px;background-color: green">第二章</div>--> <h1>id,style,name所有的标签都可以定义的属性</h1> <h1>a,target href</h1> <!--select标签--> <select > <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">天津</option> </select> <select size="2"> <option>北京</option> <option>上海</option> <option>天津</option> </select> <select size="2" multiple="multiple"> <option>北京</option> <option>上海</option> <option>天津</option> </select> <select> <optgroup label="河北省"> <option>石家庄</option> <option>邯郸</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遥</option> </optgroup> </select> <!--inpur标签--> <h1>input标签</h1> <input type="checkbox" /> <input type="checkbox" /> <h4>radio</h4> <p> 男：<input name="gender" type="radio" /></p> <p> 女：<input name="gender" type="radio" /></p> <input type="text" /> <input type="password" /> <input type="button" value="btu" /> <input type="submit" value="sub" /> <h2>Form</h2> <form action="http://127.0.0.1:8000/django_form/"> <div> 主机名:<input name="host" type="text" /> </div> <div> 端口:<input name="port" type="text" /> </div> <div> 类型:<input name="types" type="text" /> </div> <div> 用户 <input name="user" type="text" /> </div> <input type="button" value="提交" /> <input type="submit" value="提交" /> </form> <!--textarea标签--> <textarea>iii</textarea> <input type="text" value="123"/> <div> <label for="cb1">婚否</label> <input id="cb1"type="checkbox"/> </div> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>222</li> </ul> <ol> <li>www</li> <li>wwwooo</li> </ol> <table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> </tbody> </table> </body> </html>
解释
1 块级标签，内联标签 div p h span,a,lable,input,form.img 2 各种符号 3 标签 input系列 select textarea form div span 必须会 a img table H,ul,li,ol,dl,p,br,hr 4 属性 公共属性：id,name（一般只提交数据）,style，class input,text,password <input type='text' value="123"/> input:button,submit <input type='submit' value=''/> input:checkbox <input type="checkbox" checkd="checkd"/> 自动选中 input:radio <input name='gender' type="radio"/> <input name='gender' type="radio"/> name有自己的属性 排斥 checkd="checkd" name='gender' input:file <form enctype='multipart/form-data' method='POST'> </form> form <form action=''> 要提交的所有标签 </form> * action,提交到某一个地址 textarea 如果想提交后台的话 要定义name属性 ================================================= select <select> <option value='9' selected='selected'>ff</option> </select> * option,value,提交数据时,value * selected='selected' table: table, thead,tbody tr:行 td:列 合并单元格, tr: th
html简单的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 48px;background-color: pink;">头部</div>
<div style="background-color: #ddd;">
<div style=" 20%;height: 500px; float: left;background-color: aqua" >左边</div>
<div style=" 80%;height: 500px; float: left">
<h1>form表单提交</h1>
<form action="http://127.0.0.1:8000/django_form/" enctype="multipart/form-data" method="POST">
<p>
<input type="text" name="host" />
<input type="password" name="pwd">
</p>
<div style="background-color: rosybrown;color: white;">
<h6>爱好</h6>
篮球:<input name="favor" type="checkbox" value="1"/>
足球:<input name="favor" type="checkbox" value="2"/>
排球:<input name="favor" type="checkbox" value="3"/>
</div>
<h6>性别</h6>
男：<input name="gender" type="radio" value="1"/>
女：<input name="gender" type="radio" value="0"/>
<div>
<h6>城市</h6>
<select name="city">
<option value="888">上海</option>
<option value="sb888" selected="selected">北京</option>
</select>
</div>
<div>
<textarea name="mono"></textarea>
</div>
<div>
<h4>文件</h4>
<input type="file" name="file_name"/>
</div>
<input type="submit" value="提交" />
</form>
</div>
</div>
</body>
</html>