在博客园中有许多大神对HTML超文本标记语言写了很多内容，总结了很多知识，这里对我看到的博客文章，

所学到的知识，做一个总结。

 一）列表和表格

dl→definition list(定义列表)，见备注1。

一般可用于名词解释之类。

ul→unordered list(无序列表)，注意多个ul嵌套时的写法。见备注2

找个有二级菜单的网站,用ul和li来实现的.通过CSS来控制。

图1 二级菜单

ol→ordered list(有序列表)，见备注3。

用嵌套ul或ol来模拟二级菜单。见备注4。

<ol>与<ul>都有一个type属性，用来设置序列的显示样式。type的取值可以是：A、a、1、i、I、disc、circle、square。(可用CSS控制ul、ol的type样式)

插入备注位置：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9  </head>
10
11  <body>
12 <!--  备注1：-->
13 <!--dl用来定义一个普通列表：-->
14 <dl>
15 <dt>河北</dt>
16 <dd>石家庄</dd>
17 <dd>秦皇岛</dd>
18 <dt>山西</dt>
19 <dd>太原</dd>
20 <dd>大同</dd>
21 </dl>
22
23
24 <!--备注2-->
25 <ul>
26     <li>北京</li>
27     <li>上海</li>
28     <li>广州</li>
29 </ul>
30
31
32 <!--备注3-->
33 <ol>
34     <li>北京</li>
35     <li>上海</li>
36     <li>广州</li>
37 </ol>
38
39
40 <!--备注4-->
41  <ul>
42         <li>aaaaaa</li>
43         <li>bbbbbbb
44             <ol>
45                 <li>ol test</li>
46                 <li>ol test</li>
47                 <li>ol test</li>
48                 <li>ol test</li>
49                 <li>ol test</li>
50                 <li>ol test</li>
51             </ol>
52         </li>
53         <li>aaaaaa1</li>
54         <li>bbbbbbb1
55             <ol>
56                 <li>ol test</li>
57                 <li>ol test</li>
58                 <li>ol test</li>
59                 <li>ol test</li>
60                 <li>ol test</li>
61                 <li>ol test</li>
62             </ol>
63         </li>
64     </ul>
65
66
67  </body>
68 </html>

      图2 tr与td

表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。可以将table的border属性设为0来隐藏表格线。演示常规表格。

填充、间距cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距。

<tr>的属性：align，水平对齐，可选值left、right、center；valign，垂直对齐，可选值top、middle、bottom。

<td>也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>：子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。

还可以使用rowspan(合并行)、colspan（和并列）进行单元格的合并。rowspan、colspan是td的属性。

一个完整的表格。table、caption、thead、tbody、tfoot、tr、th、td。

看下下面的练习：

                                             图3 练习1,2

插入练习1,2代码位置：

1 <html>
 2     <head>
 3         <title>表格练习1，2</title>
 4     </head>
 5     <body>
 6         <ol type="a">
 7             <li>爱</li>
 8             <li>水煮鱼</li>
 9         </ol>
10
11         <ul type="disc">
12             <li>爱</li>
13             <li>水煮鱼</li>
14         </ul>
15
16         <table border="1" width="300">
17             <tr align="center">
18                 <td><b>姓名</b></td>
19                 <td><b>性别</b></td>
20                 <td><b>工资</b></td>
21             </tr>
22             <tr>
23                 <td>张三</td>
24                 <td>男</td>
25                 <td>9000</td>
26             </tr>
27             <tr>
28                 <td>张三</td>
29                 <td>男</td>
30                 <td>9000</td>
31             </tr>
32             <tr>
33                 <td>张三</td>
34                 <td>男</td>
35                 <td>9000</td>
36             </tr>
37             <tr>
38                 <td>张三</td>
39                 <td>男</td>
40                 <td>9000</td>
41             </tr>
42
43         </table>
44
45     </body>
46 </html>

page

 图4 练习3
练习3插入代码位置：

1 <html>
 2     <head>
 3         <title>表格练习3,4</title>
 4     </head>
 5     <body>
 6         <table border="1">
 7             <tr>
 8                 <td colspan="3" align="center"><strong>学生成绩表</strong></td>
 9             </tr>
10             <tr>
11                 <td>英语</td>
12                 <td>数学</td>
13                 <td>语文</td>
14             </tr>
15             <tr>
16                 <td>100</td>
17                 <td>100</td>
18                 <td>100</td>
19             </tr>
20         </table>
21
22         <table border="1" width="400">
23             <tr>
24                 <td colspan="3" align="center"><b>学生基本情况</b></td>
25             </tr>
26             <tr align="center">
27                 <td><b>姓名</b></td>
28                 <td><b>性别</b></td>
29                 <td><b>专业</b></td>
30             </tr>
31             <tr>
32                 <td>刘备</td>
33                 <td>男</td>
34                 <td rowspan="3">计算机</td>
35             </tr>
36             <tr>
37                 <td>孙尚香</td>
38                 <td>女</td>
39             </tr>
40             <tr>
41                 <td>诸葛亮</td>
42                 <td>男</td>
43             </tr>
44         </table>
45
46
47     </body>
48 </html>

page

图5 表格当中的其它元素
                                                                                                                                           图6 控制显示哪儿部分

                                                                                                                                                                   图7 tfoot标签

二）表单

网站表单与填表。

<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。

<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。<input type="file" />

下面我们写个小的表单

图8 自己写个小的表单

                                                图9 只读

                                               图10 让按钮变灰

                                               图11 单选按钮

                                             图12 下拉菜单当中的属性

那么，我们后面在JS中讲解在客户端写省市联动，原理就是选择前一个内容，后面的内容也随之发生改变。                                     

                                            图13 给下拉菜单分组

分组的大标题，只能看，不能选。

现在很多的网站都自己模拟做下拉菜单，原因就是select应用CSS的时候特别的不友好。但是，在后台系统并不要求美观的地方用它还是非常的方便的。

                                           图14 兴趣爱好

                                           图15 头像，协议功能

         

                                     图16 常用的提交功能

                                    图17 把常用的兴趣爱好圈起来

在选择性别的时候，点击男或女周围的地方也可以选中。

图18 点击其它的位置也能选中

                                    图19 marquee

<!--

direction:left、right、up、down

behavior:scroll、slide、alternate

scrolldelay:滚动的速度。单位为毫秒数，默认为85。

-->

                                                                图20 播放音乐，播放视频功能               

具体能不能播放，以及播放器的效果如何，需要看浏览器安装的是什么插件。

三)练习

                                                        练习1

练习1代码演示：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <title>登录</title>
 5     </head>
 6     <body>
 7         <form action="" method="get">
 8         <table border="1">
 9             <tr>
10                 <td><label for="userName">用户名：</label></td>
11                 <td><input type="text" id="userName"/></td>
12             </tr>
13             <tr>
14                 <td>密码：</td>
15                 <td><input type="password"/></td>
16             </tr>
17             <tr>
18                 <td>验证码：</td>
19                 <td><input type="text" size="4" maxlength="4"/><img src="code.jpg"/></td>
20             </tr>
21             <tr>
22                 <td>&nbsp;</td>
23                 <td><input type="checkbox" id="rp"/><label for="rp">记住密码</label></td>
24             </tr>
25             <tr>
26                 <td>&nbsp;</td>
27                 <td><input type="submit" value="登录"/><input type="reset"/></td>
28             </tr>
29         </table>
30         </form>
31     </body>
32 </html>

page

四）比较正规的写法

1.比如下拉框这样的

                                                           图21 默认属性

2.表格

                                            图22 登录的html代码

meta标签包括在head标签中。主要用来描述页面自身信息,元信息。

                                                       图23 在哪儿能见到meta

在我们做网站或者说是写网页的时候还是非常有必要在自己的网页里面加上meta的，如果是做网络推广的朋友，简直是如获至宝。这样的话，就会给自己的网站得到非常好的用户浏览。

解决乱码问题，加上这句话

<meta http-equiv=”content-type” content=”text/html;charset=gb2312”/>

注意自己用的什么编码就写什么编码。

HTML学习（二）进阶篇的更多相关文章

  1. PHP学习笔记 - 进阶篇（11）

    PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...

  2. PHP学习笔记 - 进阶篇（10）

    PHP学习笔记 - 进阶篇(10) 异常处理 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...

  3. PHP学习笔记 - 进阶篇（9）

    PHP学习笔记 - 进阶篇(9) 图形图像操作 GD库简介 GD指的是Graphic Device,PHP的GD库是用来处理图形的扩展库,通过GD库提供的一系列API,可以对图像进行处理或者直接生成新 ...

  4. PHP学习笔记 - 进阶篇（8）

    PHP学习笔记 - 进阶篇(8) 日期与时间 取得当前的Unix时间戳 UNIX 时间戳(英文叫做:timestamp)是 PHP 中关于时间与日期的一个很重要的概念,它表示从 1970年1月1日 0 ...

  5. PHP学习笔记 - 进阶篇（7）

    PHP学习笔记 - 进阶篇(7) 文件操作 读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $conte ...

  6. PHP学习笔记 - 进阶篇（6）

    PHP学习笔记- 进阶篇(6) 会话控制(session与cookie) 当前的Cookie为: cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据. ...

  7. PHP学习笔记 - 进阶篇（4）

    PHP学习笔记 - 进阶篇(4) 字符串操作 字符串介绍 PHP开发中,我们遇到最多的可能就是字符串. 字符串变量用于包含字符串的值. 一个字符串 通过下面的3种方法来定义: 1.单引号 2.双引号 ...

  8. PHP学习笔记 - 进阶篇（5）

    PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...

  9. PHP学习笔记 - 进阶篇（3）

    PHP学习笔记 - 进阶篇(3) 类与面向对象 1.类和对象 类是面向对象程序设计的基本概念,通俗的理解类就是对现实中某一个种类的东西的抽象, 比如汽车可以抽象为一个类,汽车拥有名字.轮胎.速度.重量 ...

  10. PHP学习笔记 - 进阶篇（2）

    PHP学习笔记 - 进阶篇(2) 函数 1.自定义函数 PHP内置了超过1000个函数,因此函数使得PHP成为一门非常强大的语言.大多数时候我们使用系统的内置函数就可以满足需求,但是自定义函数通过将一 ...

随机推荐

  1. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  2. 写给.NET开发者的数据库Migration方案

    微软给我们提供了一种非常好用的数据库迁移方案,但是我发现周围的同学用的并不多,所以我还是想把这个方案整理一下..NET选手看过来,特别是还在通过手工执行脚本来迁移数据库的同学们,当然你也可以选择EF的 ...

  3. 关于我 — About Me

    个人简介 姓名:周旭龙 关注:.NET开发技术.Web前端技术 邮箱:edisonchou@hotmail.com GitHub: https://github.com/edisonchou 主要经历 ...

  4. 浅谈C#网络编程(二)

    阅读目录: 异步IO 非阻塞式同步IO 基于回调的异步IO并发 异步IO 上篇提到用多线程处理多个阻塞同步IO而实现并发服务端,这种模式在连接数量比较小的时候非常适合,一旦连接过多,性能会急速下降. ...

  5. 跟我一起数据挖掘（23）——C4.5

    C4.5简介 C4.5是一系列用在机器学习和数据挖掘的分类问题中的算法.它的目标是监督学习:给定一个数据集,其中的每一个元组都能用一组属性值来描述,每一个元组属于一个互斥的类别中的某一类.C4.5的目 ...

  6. Maven（一）环境搭建

    网上已经有很多Maven学习的笔记和文章了,但是不自己亲自玩一玩,踩踩坑,证明不了自己到底能不能搞定它! 今天自己亲自搭建了一下环境,感觉基本的使用应该是可以满足了. 使用背景: 安装环境:Windo ...

  7. 计算照片的面积（UWP篇）

    今天先说UWP应用程序上计算照片面积的方法,改天有空,再说说WPF篇. 其实计算照片面积的原理真TMD简单,只要你有本事读到照片的像素高度和宽度,以及水平/垂直方向上的分辨率(DPI)就可以了.计算方 ...

  8. windows下mysql 主从同步

    半路出家到Java,刚开始听说到说程序支持读写分离感觉特别高大上,也一直没接触 偶然的机会接触到了,就一定得记下来. 今天先讲讲数据库的主从同步,两个好处: 一是读写分离可以用上.比如 写操作就写到主 ...

  9. MUI跨域请求数据的例子：

                <,                     ,                 success: function(data) {                    ...

  10. web开发调试神器——fiddler的使用

    好累 以后再写 http://docs.telerik.com/fiddler/knowledgebase/autoresponder