一、Head属性
<meta charset="UTF-8"> # 自闭合标签,设置编码 <meta http-equiv="Refresh" CONTENT="2"/> # 设置每2秒自动刷新 <meta http-equiv="REFRESH" CONTENT="2; url=http://www.baidu.com"/> # 设置自动跳转、2秒后跳转到baidu.com <title>HTML基础</title> # 设置网页title
<link rel="shortcut icon" href="image/favicon.ico"> # title图标
二、Body属性
1.<br><hello></br> # 换行、小于号大于号<a> 2. #空格 3.a标签 <a href="http://www.baidu.com">百度</a> # 超链接,打开百度 <a href="http://www.baidu.com" style="color: red" target="_blank">跳转2</a> # 打开一个新页面,跳转到baidu
a标签锚点
<a href="#i1">第一页</a>
<a href="#i2">第二页</a>
<a href="#i3">第三页</a>
<div id='i1' style="height: 500px">第一页内容</div>
<div id="i2" style="height: 500px">第二页内容</div>
<div id="i3" style="height: 500px">第三页内容</div>
4.<p> 段落标签</p> 5.<div></div>标签 <div style="color: red"> sjkdlfjkaljgljdsl <div style="color: blue;"> jfkdsljgksjl </div> jdksjgljkdlg </div>
6.H标签
<h1>标题H1</h1>
<h2>标题H2</h2>
<h3>标题H3</h3>
<h4>标题H4</h4>
<h5>标题H5</h5>
<h6>标题H6</h6>
三、input系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <!--要提交的数据放在form标签里边--> <form> <!--border:边框 5像素宽度,蓝色--> <div style="border: 5px solid blue;"> <!--input输入框 text 明文--> <p>用户名:<input type="text" /></p> <!--input输入框 password 密文--> <p>密码:<input type="password" /> </p> <!--radio属性实现单选框 name属性值相同实现互斥,可以实现只能选1个,name值可以任意--> <p>性别: <br/>男<input type="radio" name="gender" /> <br/>女<input type="radio" name="gender" /> </p> <!--checkbox属性实现多选复选框--> <p>爱好: <br/>音乐<input type="checkbox" /> <br/>篮球<input type="checkbox" /> <br/>游戏<input type="checkbox" /> <br/>看电影<input type="checkbox" /> </p> <!--select+option属性实现下拉菜单,单选--> <p>城市: <select> <option>上海</option> <option>北京</option> <option>广州</option> <option>深圳</option> </select> <!--select multiple 实现下拉框多个显示,可以多选--> <select multiple> <option>上海</option> <option>北京</option> <option>广州</option> <option>深圳</option> </select> <!--multiple size=n表示下拉框同时出现n个选项--> <select multiple size="2"> <option>上海</option> <option>北京</option> <option>广州</option> <option>深圳</option> </select> <!--optgroup实现分组显示--> <select> <optgroup label="AAA"> <option>上海</option> <option>北京</option> </optgroup> <optgroup label="BBB"> <option>天津</option> <option>武汉</option> </optgroup> </select> </p> <!--input type=file实现上传文件功能--> <p>文件: <input type="file" /> </p> <!--备注:多行--> <p>备注: <textarea></textarea></p> <!--submit提交当前表单, 页面会刷新--> <input type="submit" value="submit"/> <!--button只是一个按钮,默认没什么效果--> <input type="button" value="button"/> <!--重置当前表单内容,只对当前from区域内内容起作用--> <input type="reset" value="reset"/> </div> </form> </body> </html>
四、input系列之向后台发送数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>后台提交数据</title> 6 </head> 7 <body> 8 <form> 9 <input type="text" name="u" /> 10 <input type="submit" value="提交" /> 11 <!--输入的内容会以字典的形式提交{'u':"input的内容"}--> 12 </form> 13 <hr /> 14 <!--横线--> 15 <form action="https://www.sogou.com/web" method="post"> 16 <!--action 可以定义一个地址、将数据发送到该地址、默认是已get方式提交、用method可以改成以post提交--> 17 <input type="text" name="query"/> 18 <input type="submit"/> 19 </form> 20 <hr /> 21 <form style="background-color: chartreuse" enctype="multipart/form-data"> 22 <!--如果要上传文件、form标签必须加上enctype="multipart/form-data"--> 23 <input type="text" name="user" /> 24 <p><input type="password" name="pwd" /></p> 25 男<input type="radio" name="gender" value="1" /> 26 <!--radio提交的值必须指定value, 后台收到的值为1代表男、0代表女--> 27 女<input type="radio" name="gender" value="0" /> 28 <p>爱好： 29 篮球<input type="checkbox" name="ball" value="1"> 30 足球<input type="checkbox" name="ball" value="2"> 31 排球<input type="checkbox" name="ball" value="3"> 32 <!--checkbox提交--> 33 </p> 34 <p>上传文件:<input type="file" name="fafafa"></p> 35 <!--上传文件提交--> 36 <p>城市: 37 <select name="city"> 38 <option value="bj">北京</option> 39 <option value="sh">上海</option> 40 <option value="gz">广州</option> 41 </select> 42 <!--select提交--> 43 </p> 44 <p> 45 备注:<textarea name="beizhu"></textarea> 46 </p> 47 48 <input type="submit"> 49 50 </form> 51 </body> 52 </html>
五、iframe标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>老男孩之家</h1> 9 <iframe style=" 100%; height: 2000px" src="http://autohome.com.cn"></iframe> 10 11 </body> 12 </html>
六、fieldset标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fieldset标签</title> </head> <body> <fieldset style="background: green"> <legend>登陆</legend> <p> <label> 用户名:<input type="text"> </label> </p> <p> <label> 密码:<input type="password"> </label> </p> </fieldset> </body> </html>
七、table标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table标签</title> </head> <body> <table border="2"> <!--thead表示标题 tbody表示内容 tr表示行 td表示列--> <!--head里边一般不写td、写成th表示加粗、和tbody的td区别开来--> <!--border的值表示表格的边框有多粗--> <thead> <tr> <th colspan="2">第一列</th> <!--colspan表示横向合并单元格、2表示合并2个格子--> <th>第三列</th> <th>第四列</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <!--rowspan表示竖向合并单元格、2表示合并2个格子--> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <!--<td>1</td>--> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> <hr /> <table border="3"> <!--也可以不写thead和tbody--> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </table> </body> </html>
八、小技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小技巧</title> </head> <body> <label for="name"> 姓名:<input type="text" id="name"> </label> <label for="married"> 婚否:<input type="checkbox" id="married"> </label> <!--label标签实现了区域选中--> <ul> <li>111111</li> <li>222222</li> <li>3333333</li> </ul> <ol> <li>111111</li> <li>222222</li> <li>3333333</li> </ol> <dl> <dt>dt</dt> <dd>dd</dd> <dd>dd</dd> <dd>dd</dd> <dd>dd</dd> <dt>dt</dt> <dd>dd</dd> <dd>dd</dd> <dd>dd</dd> <dd>dd</dd> </dl> </body> </html>
九、input系列默认值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列默认值</title> </head> <body> <input type="text" value="1"> <textarea>123</textarea> <select> <option>北京</option> <option selected="selected">上海</option> <option>广州</option> </select> 男:<input type="radio" name="g1" value="boy"> 女:<input type="radio" name="g1" value="girl" checked="checked"> 篮球<input type="checkbox" name="g2" value="b"> 足球<input type="checkbox" name="g2" value="f" checked="checked"> 排球<input type="checkbox" name="g2" value="p"> 羽毛球<input type="checkbox" name="g2" value="y" checked="checked"> </body> </html>