HTML总结

来源：互联网发布：linux echo $ 编辑：程序博客网时间：2024/06/14 12:14

【前言】之前在C#中就简单接触了一下HTML，当时觉得非常好玩，解开了网页的神秘面纱，通过新闻发布系统的学习了解到了一个漂亮的网页不仅仅是靠HTML标签来实现还有CSS、JavaScript等辅助实现的，这一次对于HTML中的各种常用的标签有了更近一步的了解。

一、HTML是什么

HTML是超文本标记语言，标准通用标记语言的下一个应用。所谓超文本就是指页面内可以包含图片、链接，甚至是音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、常用标记

1.基本结构

2.其他常用标签

换行
…使文本粗体
…使文本斜体
…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非常有意思。

阅读全文

1 0