HTML常用标签练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html常用标签</title> <base href="https://www.cnblogs.com/" target="_blank"> <style type="text/css"> h1{color:red;} h2{background-color:#ccc;} </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> <meta name="description" content="练习"> <meta name="keywords" content="html"> </head> <body> <h1>标题h1</h1> <h2>标题h2</h2> <h3>标题h3</h3> <h4>标题h4</h4> <h5>标题h5</h5> <h6>标题h6</h6> <p>段落<br> <a href="dinghanhua">链接</a> 图片：<img src="https://pic.cnblogs.com/face/987451/20160705115211.png" alt="pic" border='3',width="50" height="50" style="float:right;"/></p> <hr> <p><br>br换行。多个回车或空格都仅算作一个空格。 空格         换行<br><br><br><br> 小于<，大于>，其他特殊符号：©，®，",&.<br> <b>b加粗文本</b> <strong>strong加粗</strong> <i>i斜体</i> <em>em斜体</em> <sub>下标sub</sub><sup>上标sup</sup> <big>大字体</big><small>小字体</small> <pre> 预格式输出文本。回车和空格不会被处理成一个： 鹅，鹅，鹅，曲项向天歌。 白毛浮绿水，红掌拨清波。 </pre> <address>地址：银河系太阳系地球亚洲中国上海XX区XX路XX号<br> maitto:<a href="mailto:xxx@xx.com">点击发送邮件</a><br> </address> <abbr title="world wide web">WWW缩写</abbr> 一般文字从左往右.<bdo dir='rtl'>从右往左</bdo> <del>删除</del><strike>原价：99999999</strike> <u>下划线</u><ins>插入字</ins> </p> <a href="dinghanhua" style="text-decoration:none;">去掉链接的下划线</a> <p>内联样式、内部样式、外部引用三种样式定义<br> <h3 style="background-color:yellow;text-align:center;">标题3</h3> <p style="font-family:arial;color:red;font-size:20px;text-align:center;">段落段落段落。</p> 图片热区 <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.html"> <area shape="circle" coords="90,58,3" href="mercur.html"> <area shape="circle" coords="124,58,8" href="venus.html" </map> 表格 <table width="100%" border="1" cellpadding="10" cellspacing="10" align="center"> <caption>表格标题</caption> <tr><th colspan="2">name</th><th>points</th></tr> <tr style="background-color:#333;color:#fff;"> <td>first name</td><td>last name</td><td>points</td></tr> <tr ><td>jill</td><td>smith</td><td>50</td></tr> <tr ><td>eve</td><td>jackson</td><td>94</td></tr> </table> 列表 <ol type="I" start=2>有序列表 <li>项1</li> <li>项2</li> <li>项3</li> </ol> <ol type="A" >有序列表 <li>项1</li> <li>项2</li> <li>项3</li> </ol> <ul style="list-style-type:circle" >无序列表 <li>项1</li> <li>项2</li> <li>项3</li> </ul> <dl>自定义列表 <dt>水果</dt><dd><ul> <li>苹果</li> <li>橘子</li> </ul></dd> <dt>鲜花</dt><dd>郁金香 蔷薇</dd> </dl> div和span <div style="200px;height:100px;background:#ccc;"> 文本文本文本<span style="color:red">span里的文本</span>文本文本。 </div> 用div进行网页布局。 <div id="container" sytle="100%;"> <div style="background-color:yellow"><h1 style="margin-bottom:0;">标题</h1></div> <div style="30%;height:300px;float:left;background-color:green;">left menu</div> <div style="70%;float:left;height:300px;background-color:#333;">content</div> <div style="100%;background-color:red;clear:both;">footer</div> </div> 表单——用户交互 <form action=""> <fieldset> <legend>留言区</legend> username: <input type="text" name="username" value="input your name"><br> password: <input type="password" name="password" ><br> <input type="radio" name="usertype" value="teacher" checked="checked">teacher <input type="radio" name="usertype" value="student">student<br> <input type="checkbox" name="logstate" value="keeplog" checked="checked">keep login<br> <select name="sex"> <option value="male">男</option> <option value="female" selected>女</option> </select><br> <textarea rows="3" cols="30">输入你的建议</textarea><br> <input type="submit" value="提交"> <input type="reset" value="取消"> <button type="botton" onclick="alert('hello')">点我</button> </fieldset> </form> iframe <iframe src="http://www.baidu.com" width="100%" height="200" frameborder="0" ></iframe> <iframe src="https://www.cnblogs.com" width="100%" height="200" name=iframe1></iframe> <a href="https://www.baidu.com" target="iframe1">click me </a> <br> 颜色:rgb(red-green-blue)16进制符号定义。每种颜色区间00-ff <p style="background-color:#ff0000">aaaaaaaaaa</p> <p style="background-color:#0f0">aaaaaaaaaa</p> <p style="background-color:#0000ff">aaaaaaaaaa</p> <p style="background-color:#ffff00">aaaaaaaaaa</p> <p style="background-color:#ff00ff">aaaaaaaaaa</p> <p style="background-color:#00ffff">aaaaaaaaaa</p> <p style="background-color:#ffffff">aaaaaaaaaa</p> <p style="background-color:#000000">aaaaaaaaaa</p> <p style="background-color:#ff4400">aaaaaaaaaa</p> <p style="background-color:#ccc">aaaaaaaaaa</p> <p style="background-color:rgb(120,120,120)">aaaaaaaaaa</p> <p style="background-color:brown">aaaaaaaaaa</p> 脚本script<p><script>document.write("hello world")</script></p> <p id="demo">wfjoewfjoewjf</p> <script>function fun(){ele=document.getElementById("demo");ele.style.color="#f00"}</script> <button type="button" onclick="fun()">点击改变文字字体</button> </body> </html>