标签练习（一） 

<!--html文档开始-->
<html  >
  <head
    <!--头部-->
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>头部标题</title>
    这样都可以
  </head>
  <style type="text/css">
  body{background:ivory;}
  /*注释*/
 
  </style>
  <body>
   <!--html注释  css注释用/**/-->
    <!--主体-->
    <h2 style="color:green;font-family:楷体;">标题1 文本格式标签</h2> 
    <p id="top"><font color="#FF0000">顶部锚点</font color></p>
    <p id="top2" style="color:#8000ff;"><b>顶部2锚点(外加样式)</b></p>
    <p>段落</p>
    <pre>标识预定义文本</pre>
    <blockquote>标识引用文本</blockquote>
    
    <h2 font-family=黑体>标题2 字符格式标签 </h2> 
    <p>例如，针对下面这个一无二次方程：</p>
    <p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
    <p>我们使用<b><big>因式分解法</big></b>来演示解题思路如下：</p>
    <p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
    <p> <small>得：</small></br>    
    <i>x</i><sub>1</sub>=1</br>
    <i>x</i><sub>2</sub>=4
    </p>
    <blink>标识闪烁文字</blink></br>
    <cite>标识引用文本</cite>
    
    <h2 font-family=黑体>标题3 列表标签 </h2>
    <!--
    ul:标识无序列表        dl:标识定义列表
    ol:标识有序列表        dt:标识词条
    li:标识列表项目        dd:标识解释
    -->
    <ol><h3>测试职位</h3>
    <li>初级测试工程师</li>
    <li>中级测试工程师</li>
    <li>高级测试工程师</li>
    <li>测试经理</lil>
    </ol>
    <ul><h3>前端</h3>
    <li>网页制作</li>
    <li>前端制作工程师</li>
    <li>网站重构工程师</li>
    <li>前端开发工程师</li>
    <li>前端架构师</li>
    </ul>
    <dl><h3>词条</h3>
    <dt>梦想</dt>
    <dd>这个东西好远。。加油~</dd>
    <dt>编程语言</dt>
    <dd>包括：C\java\C#\C++\JS\HTML\Object C\swift\SQL...</dd>
    </dl>
    
    <h2 font-family=黑体>标题4 链接标签 </h2>
    <a href="http://www.baidu.com">去百度吧</a>
    <a href="#top">跳到顶部</a><!--#top是个div锚点-->
    <a href="#top2">跳到顶部2</a><!--#top2是个div锚点-->
    
    <h2 font-family=黑体>标题5 多媒体标签 </h2>
    <!--
    <embed> ...</embed> 嵌入多媒体
    <blject>...</object> 嵌入多媒体
    -->
    <img src="pic/img.png" alt="http://www.baidu.com"/>
        
    <h2 font-family=黑体>标题6 表格标签 </h2>
    <!--
    <table>定义表结构  
    <caption>表标题
    <th>表头
    <tr>
    <td>
    -->
    <table>
    <caption><h3>员工信息</h3></caption>
    <tr>
    <th>姓名<th><th>年龄</th>
    </tr>
    <tr>
    <td>心晴<td><td>26</td>
    </tr>
    <tr>
    <td>张三你好<td><td>18</td>
    </tr>
    </table>
    
    
       <h2 font-family=黑体>标题7 表单标签 </h2>
    
    <form id="form1" name="form1" method="post" action="">
    <p>用户名<input type="text" name="username" id="username"> </input></p>
    <p>密码<input type="password" name="pd" id="pd"></input></p>
    <p>多行文本框<textarea name="text1" id="text1" > </textarea></p>
    <p>单选按钮1<input type="radio" name="radio1" id="radio1" value="boy"> 男</input></p>
    <p>单选按钮2<input type="radio" name="radio2" id="radio2" value="girl1"> 女</input></p>
    <p>复选框<input type="checkbox" name="checkbox1" value="">音乐</p>
    <p>复选框<input type="checkbox" name="checkbox2" value="">美术</p>
    <p>下拉菜单
    <select name="selectlist">    
    <option value="1">百度</option>
    <option value="2">腾讯</option>
    <option value="3">淘宝</option>
    </select>
    </p>
    <p>按钮<input type="button" name="button" id="button" value="提交"/>
    </p>
    </form>
    
    <h2 font-family=黑体>标题7 基本属性 </h2>
    <blockquote cite="http://www.baidu.com">
     <p>baidu</p>
     </blockquote>
     <ins datetime="2014-0-9 15:0:0"> today </ins>
    
    </body>
  
  
</html>                          
<!--html文档结束-->

 

posted @ 2015-10-23 15:45  sunshine-habit  阅读(199)  评论(0)    收藏  举报