初学HTML,由于是看视频学习,所以遗忘较快,故通过在博客里面记录代码来使自己加注释,从而复习语法知识。
1.列表与链接标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <base target="_blank" /> </head> <body> <del>1800</del> <p>< <img src="123.png" title="这是我的手机" width="50" border="3" /> <img src="121 3.png" alt="这是我的手机" /> <hr width="666" color="red" /> <ins>下划线</ins>
<h1> ···链接标签 a即anchor[锚]的缩写</h1> <h2>友情链接</h2> <a href="http:/www.baidu.com">百度一下</a> <a href="http:/www.sina.com" target="_blank">新浪</a>
<h1>···锚点定位</h1> <a href="#live" target="_self">3 个人生活</a> h1 id="live">个人生活</h1>
<h1>···无序列表</h1>
<ul> <li>垃</li> <li>带</li> <li>12</li> <li> <h3>水果蔬菜</h3> </li> </ul> <h1>···有序列表</h1> <ol> <li>哦国</li> <li>英国</li> <li>中国</li> <li>俄罗斯</li> </ol> <dl> <dt>北京</dt> <dd>昌平</dd> <dd>通州</dd> </dl> </body> </html>
|
2.表格标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格练习</title> </head> <body> <table width="300" height="200" border="1" cellspacing="0" cellpadding="0" align="center"> <caption>我要一个表格</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td rowspan="2">18</td> </tr> <tr> <td>李四</td> <td>女</td> </tr> </tbody> </table>
</html> </body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单练习</title> </head> <body> <input type="submit" value="百度一下" /> 用户名:<input type="text" value="用户名" /><br />
密 码:<input type="password" maxlength="6" /><br />
性 别:女<input type="radio" name="sex" checked="checked" /> 男<input type="radio" name="sex" /> 未知<input type="radio" name="sex" /><br />
爱  好:足球<input type="checkbox" checked="checked" /> 篮球<input type="checkbox" />乒乓球<input type="checkbox" /><br />
搜索<input type="button" value="搜索"/><br /> <input type="submit" value="提交表单"/><br /> <input type="reset" value="重置表单"/><br /> <input type="image" src="1.png"/><br /> <input type="file" /> </body> </html>
|
4.表单-视频标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h3>label标签的使用</h3> <label>输入账号:<input type="text" /></label> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
<form action="xxx.php" method="get" name="userMessage">
留言板: <textarea cols="10" rows="10">请输入内容</textarea>
籍贯: <select> <option>北京</option> <option>上海</option> <option selected="selected">广州</option>
</select> <br /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form>
<audio src="AAAAAAA张悬-关于我爱你.mp3" autoplay controls="" loop=""></audio> <audio controls="" autoplay=""> <source src="123.mp3" type=""> <source src="123.ogg" type=""> </audio> <video src="The Smart Home of Tomorrow HD - YouTube.mp4" autoplay="" controls=""></video> </body> </html>
|