【前言】之前在C#中就简单接触了一下HTML,当时觉得非常好玩,解开了网页的神秘面纱,通过新闻发布系统的学习了解到了一个漂亮的网页不仅仅是靠HTML标签来实现还有CSS、JavaScript等辅助实现的,这一次对于HTML中的各种常用的标签有了更近一步的了解。
HTML是超文本标记语言,标准通用标记语言的下一个应用。所谓超文本就是指页面内可以包含图片、链接,甚至是音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
1.基本结构
2.其他常用标签
<br>换行<b>…</b>使文本粗体<i>…</i>使文本斜体<font size=n color="clr">…</font>size设置字体大小,Color设置字体颜色<center>…</center>使文本居中<ol>和<li>创建带数字编号的列表
<ol>标签中使用start属性,设置起始的序号
<li>标签中使用value属性,改变列表内的编号顺序
使用效果如下:
<html> <ol start="1"> <li>《思维导图》 <li>《时间管理》 <li>《快速阅读》 <li>《六顶思维帽》 <li>《你的知识需要管理》 <li>《七年就是一辈子》 </ol> <ol type="I"> <li>《思维导图》 <li>《时间管理》 <li>《快速阅读》 <li>《六顶思维帽》 <li>《你的知识需要管理》 <li>《七年就是一辈子》 </ol> <ul type="a"> <li>《思维导图》 <li>《时间管理》 <li>《快速阅读》 <li>《六顶思维帽》 <li>《你的知识需要管理》 <li>《七年就是一辈子》 </ul> <ul type="cicle"> <li>《思维导图》 <li>《时间管理》 <li>《快速阅读》 <li>《六顶思维帽》 <li>《你的知识需要管理》 <li>《七年就是一辈子》 </ul> <dl> <dt>《思维导图》 <dt>《时间管理》 <dt>《快速阅读》 <dt>《六顶思维帽》 <dt>《你的知识需要管理》 <dt>《七年就是一辈子》 </dl> <dl> <dd>《思维导图》 <dd>《时间管理》 <dd>《快速阅读》 <dd>《六顶思维帽》 <dd>《你的知识需要管理》 <dd>《七年就是一辈子》 </dl> <dl> <dt>《思维导图》 <dd>《时间管理》 <dt>《快速阅读》 <dd>《六顶思维帽》 <dt>《你的知识需要管理》 <dd>《七年就是一辈子》 </dl> </html>
7)表格
<html> <head><title>表格的例子</title></head> <body> <table border="1" align="center" bgcolor="#ffdddd"> <caption>2004年度期末考试成绩单</caption> <tr align="center" valign="middle"> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> <tr align="center" valign="middle"> <td>张三</td> <td>00</td> <td>48</td> <td>59</td> </tr> <tr align="center" valign="middle"> <td>琪琪</td> <td>98</td> <td>67</td> <td>90</td> </tr> <tr align="center" valign="middle"> <td>尜尜</td> <td>88</td> <td>47</td> <td>79</td> </tr> </table> </body> </html> 效果:
8)表单和表格结合
<html> <head><title>表单的例子</title></head> <body> <form method="get" action="reg.jsp"> <table> <tr> <td>用户名:</td> <td><input type="text" name="user" value="游客" size="30"></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="sex" value="1" checked> 男</td> <td><input type="radio" name="sex" value="0">女</td> </tr> <tr> <td>兴趣爱好:</td> <td> <input type="checkbox" name="interest" value="football">足球 <input type="checkbox" name="interest" value="basketball">篮球 <input type="checkbox" name="interest" value="volleyball">排球 <input type="checkbox" name="interest" value="swim">游泳 </td> </tr> <tr> <td>最高学历:</td> <td> <select size="1" name="education"> <option value="" selected>...</option> <option value="高中" selected>高中</option> <option value="大学" selected>大学</option> <option value="硕士" selected>硕士</option> <option value="博士" selected>博士</option> </select> </td> </tr> <tr> <td> <input type="hidden" name="id" value="001"> <input type="reset" value="重写"> <input type="submit" value="注册"> </td> </tr> </table> </form> </table> </body> </html> 效果:
【总结】虽然用记事本来编辑这些标签有些麻烦,但是看到最后额实现效果还是非常开心的,HTML非常有意思。
