在博客园中有许多大神对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. 定时Job在IIS中潜在危险-IIS 定期回收

    引言 有时我们会在IIS中启用一些定时服务,但是你必须清楚IIS会定期回收Asp.net的应用程序的.首先来看IIS啥时候回收APPDomain.   APPDomain 回收时机 There are ...

  2. .NET跨平台之旅：在生产环境中上线第一个运行于Linux上的ASP.NET Core站点

    2016年7月10日,我们在生产环境中上线了第一个运行于Linux上的ASP.NET Core站点,这是一个简单的提供后端服务的ASP.NET Core Web API站点. 项目是在Windows上 ...

  3. 再见Windows C++

    我3年多以前写过一个小工具,是用来检测Windows操作系统的版本及其所安装的.NET Framework版本的,我用它来排查由于缺乏运行环境支持所导致的程序无法运行的问题.这个工具是用Visual ...

  4. 这些年一直记不住的 Java I/O

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...

  5. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:    收藏 +322 Node.js 是一个基于Chrome JavaScri ...

  6. mysql向表中某字段后追加一段字符串:

    mysql向表中某字段后追加一段字符串:update table_name set field=CONCAT(field,'',str) mysql 向表中某字段前加字符串update table_n ...

  7. Atitit 编程语言编程方法的进化演进 sp  COP ,AOP ,SOP

    Atitit 编程语言编程方法的进化演进 sp  COP ,AOP ,SOP 1.1.  Sp  oop>>COP ,AOP ,SOP1 1.2. Sp  oop 结构化方法SP(Stru ...

  8. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  9. Linux基礎知識 —— open&close

    下面說一下在用戶空間調用open/close/dup跟驅動中的open和release的對應. 下面是測試驅動: #include <linux/module.h> #include &l ...

  10. linux定时备份mysql并同步到其它服务器

    数据在任何一家公司里面都是最核心的资产,定期备份则是为了保证数据库出现问题的时候能够及时回滚到最近的备份点,将损失缩小到最小 这篇文章将会两部分来说明:1.mysql的定期备份:2.同步到其它服务器 ...