元素:开始标签,元素内容,结束标签的所有代码
input、a、img、table、p、br、div、span、h1-h6、lable、ul、ol、dl、select、textarea、form
head:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link> <style></style> <script></script> </head>
body:
<body> 空格 >大于号 <小于号 <p>段落<br>段落内换行</p> <h1>lyb</h1> <h2>lyb</h2> <h3>lyb</h3> <h4>lyb</h4> <h5>lyb</h5> <h6>lyb</h6> <span>lyb</span> <span>lyb</span> <span>lyb</span> <div>lyb</div> <div>123</div> ------------------------- 标签分: 块级标签:div(白板,一般配合css)H系列(加大加粗),P标签(段落间有间距) 行内标签(内敛标签):span标签(白板,没有特性,一般配合css使用)、a标签
标签间可以嵌套 标签存在的意义,便于css操作,js操作
表单,提交数据到后台:
<form action="" method="get" enctype="multipart/form-data"> # action指表单提交到的地址,不写默认到当前url,method指提交方式有get,post,默认get方式 <div> <input type="text" name="user" value="这是默认值"> <input type="password" name="pwd" value="这是默认值">
<p>性别</p> 男<input type="radio" name="gender" value="1"> #单选的复选框,name一致用于互斥 女<input type="radio" name="gender" value="2">
<p>爱好</p> 篮球<input type="checkbox" name="ball" value="1"> #多选的复选框 足球<input type="checkbox" name="ball" value="2" checked> # checked 默认勾选 棒球<input type="checkbox" name="ball" value="3"> 台球<input type="checkbox" name="ball" value="4"> 冰球<input type="checkbox" name="ball" value="5">
<p>上传文件</p> #注意form中的enctype=“multipart/form-data” <input type="file" name="fname"> <textarea name="meno">多行文本,这里是提交文本书写处,默认值</textarea> <select name="city" size="10" multiple> #size显示框的多少,multiple可以按ctrl多选 <option value="1">北京</option> <option value="2">上海</option> <option value="3">河南</option> <option value="4">洛阳</option> </select> <input type="submit" value="提交1"> <input type="button" value="提交2"> <input type="reset" value="重置"> #button配合js使用 </div> </form>
a标签作用:跳转、锚
#跳转 target=“_blank”在新页面显示
<a href="http://www.baidu.com" target="_blank">baidu</a>
#锚 在本页跳至指定位置 id是唯一的 <a href="#i1">第1章</a> <a href="#i2">第2章</a> <a href="#i3">第3章</a> <a href="#i4">第4章</a> <div id="i1" style="height: 600px">第章1内容</div> <div id="i2" style="height: 600px">第章2内容</div> <div id="i3" style="height: 600px">第章3内容</div> <div id="i4" style="height: 600px">第章4内容</div>
img:
<a href="http://www.baidu.com"> <img src="1.png" title="大苹果" style="height: 100px; 100px;" alt="苹果" > </a>
列表:ul、ol、dl
<ul> <li>kdjfl</li> <li>ejtrek</li> </ul> <ol> <li>kdjfl</li> <li>ejtrek</li> </ol> <dl> <dt>ewr</dt> #靠外一层 <dd>klfj</dd> <dd>wwwr</dd> </dl>
table:
<table border="1"> <thead> <tr> <th>姓名</th> #th加粗,td不加粗 <th>年龄</th> <th>性别</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td colspan="2">15 男</td> #使用合并要删除多余单元格 <td>爬山</td> </tr> <tr> <td>王莹</td> <td rowspan="2">18</td> <td>女</td> <td>游泳</td> </tr> <tr> <td>李四</td> <td>男</td> <td>旅游</td> </tr> </tbody> </table>
lable配合input
<label for="user">用户:</label> #for后与input关联,点击用户和点击输入框同等效果 <input id="user" type="text" name="username">
</body> </html>