HTML 基础教程.doc

HTML 基础教程页面的标题这是我的第一个页面。网页内容都是由HTML元素构成的。虽然当前可视化编辑工具到处都是，知名的工具包括frontpage、dreamweaver 等，但工具本身存在较多的局限性，有些功能并不能通过工具实现出来，这时就需要编辑HTML代码来实现。先来看一个简单的HTML文件内容。以上就是一个简单的HTML代码。如何看到这个页面。打开系统自带的记事本（）将上面的代码复制粘贴进去，之后保存。保存时文件名填写成 index.html。前面的 index 是文件名称，这个可以随意填写。后面的 .html 是文件后缀，让系统知道这个文件是一个网页文件。找到刚保存的文件，双击打开。系统会自动用浏览器打开这个页面。这时就可以看到刚刚保存的内容了。浏览器的 标题 显示的是 代码中中填写的内容。而浏览器显示的 内容 则是中填写的内容。1. HTML构成网页主要分3个部分构成。主要包括： 这是告诉浏览器，这是一个网页。固定在代码中的顶部和底部。 这是用于告诉浏览一些相关网页的信息，但不显示在内容里面。 这是告诉浏览器需要显示的内容。2. HTML标签HTML 由 HTML标签堆积而成。标签则是 扩起来的。以上个例子中我们看到,均是标签。每个标签都有自己的含义，标签之间也可嵌套，但必须相互对应。正确的嵌套 不正确的嵌套 下面介绍一些常用的标签。标题这个标签用于做文章标题，总共有6个，大小不同。标题演示这个是h1标题这个是h2标题这个是h3标题这个是h4标题这个是h5标题这个是h6标题以上是各个标题的演示，可以将代码保存成一个HTML文件，看看效果。换行演示换行演示段落1段落是构成文章的基本单位，具有换行另起的明显标志。通过设段使文章有行有止，在读者视觉上形成更加醒目明晰的印象，便于读者阅读、理解和回味，也有利于作者条理清楚的表达内容。段落演示段落演示段落1段落是构成文章的基本单位，具有换行另起的明显标志。通过设段使文章有行有止，在读者视觉上形成更加醒目明晰的印象，便于读者阅读、理解和回味，也有利于作者条理清楚的表达内容。段落2 段落是构成文章的基本单位，具有换行另起的明显标志。通过设段使文章有行有止，在读者视觉上形成更加醒目明晰的印象，便于读者阅读、理解和回味，也有利于作者条理清楚的表达内容。段落段落标签可以用于文章段落分段，段落之间有明显空行。上面的代码综合了标题标签，组成了一个文章。换行文章遇到需要分句换行的时候，使用这个标签。注意：这个标签是独立的它只有一个 并不需要对应 。HTML文件中存在一些标签只有独立的一个，他们没有内容，只是一个展示方式而已。依旧使用上面的例子，我们把文章进行分行。通过上面的例子可以看到，所在位置已经换行。连续使用则会出现空白行。这是没有内容的情况下换行。通过上面几个例子，目前初步也应该知道了HTML标签如何使用。下面就给大家常用的标签列表。可以逐一写进HTML看看效果。标签名称标签格式代码使用粗体加粗文字斜体斜体文字下划线带下划线的文字删除线带删除线的文字上标领克特TM下标领克特.Inc以上是一些在文章中比较常用的无属性标签。更多的标签可以通过，下面的地址查看。/wu324/blog/item/9acb9e8f53f9bfe4f01f36a9.html3. HTML标签属性字体设置演示这是7号字这是32号字这是红色字这是红色6号字这是红色字标签本身有自己的格式，也有些标签支持格式定制，就是标签的属性了。在第2部分中，看到了,等标签可以控制字体的大小，形状。那么下面这个标签可以控制字体的大小和颜色。文字设置文字设置标签可以设置文字大小和文字的颜色。将上面代码保存后运行，注意这里面的 双引号必须是英文的。由于WORD原因拷贝过去可能是中文的双引号，这里要修改一下。运行后会看到7号和32号文字大小一样。这个是标签的一个限制。size 属性的最小值是-7,最大值是7 所以超过的部分都按照最后的大小计算。而color 是设置颜色，可以用网页的设置方式 #FF0000 这个是16进制的颜色表。也可以用英文，#FF0000 就是 英文 red 都是红色。size , color，都是的属性可以一同设置。没有加粗，那么红色又加粗怎么做，代码中最后一行就是红色加粗的。带属性的标签有很多，下面我们再看看链接。链接标签连接标签，就是我们网页经常见到的，点击文字跳转页面的功能。也是必不可少的标签之一。链接演示点击这里去百度以上代码是一个连接，点击后弹出一个新窗口打开百度。代码中链接标签用了2个属性。href 指定打开的页面，如果目标页面属于其他网站则需要加入http:/不然就会开打本地的文件。target 指定打开的方式，如果不设置这个属性则默认，自身跳转，如果指定 _blank 则在新窗口打开。很多标签都自带一些属性。这些大家都可以上网找找标签大全类的资料查看相应的标签使用方式和它本身自带的属性。下面看看之前熟悉的 h1 自带的位置属性。字体设置演示这是H1自带的居中属性使用居中标签让H1居中上面的例子可以看到，h1 设置了 align 属性后，位置发生了变化。而使用 居中标签 也可以让内容进行居中。当需要多个内容居中的时候，可以使用。列表演示无序列表列表项1列表项24. HTML 列表列表标签在网页中也是常见的标签。他们可以简化许多的代码达到需要的效果。包括 无序列表 , 有序列表 , 定义列表。下面来看看区别和如何使用。上面的代码可以看到不同的列表形式，其中 有序列表 支持多种列表类型。有序列表列表项1列表项2有序列表列表项1列表项2列表1列表项列表项列表2列表项列表项其中不填写属性 type 则默认数字。可选值有：a小写字母A大写字母i小写罗马字母I大写罗马字母列表演示无序列表列表项1有序的列表项列表项列表项列表项2列表项3列表也可以进行多重嵌套。看下下面的代码：上面的代码可以看多一个多重列表。列表可用于目录等功能。表单演示用户名：密码：5. HTML 表单表单是网站互动必不可少的。有了表单，用户才可以填写提交信息进行互动。互动并不是单靠HTML就能做到的。必须配合动态的服务器语言，就是所谓的PHP,ASP等。那么如何创建一个表单，看下面代码。上面的代码就是一个简单的HTML表单。是我们常见的用户登录表单。表单的内容存在于与标签，表示这中间的填写项与这个表单关联。当用户点击登录的时候，这个表单内的所有项都会被提交。必须的属性有2个：action表单提交目标页面，如果为空则默认提交到本页method提交方式,可选get,post两个get 则是将内容通过URL传递post则将内容隐藏提交，相对比较安全。 是表单项,包含如下属性type表单项类型可选值:text 输入框password 密码输入框hidden 隐藏域radio 单选域checkbox 复选框reset 重置表单submit 提交表单name名称value默认值其中要注意的有两个，hidden,radio。hidden 添加后，在页面中并不会看到，但提交表单时候，会包含这个值。radio 单选，需要注意的，只有name相同之下才会发生单选的情况。单选演示正确的单选：单选1单选2不正确的单选：单选1单选2这个例子可以看到，如果单选radio name属性一样的时候，可以单选。如果name属性不一样，则无法单选。表格演示广告主订单号dangdang123456joyo1234566. HTML 表格HTML表格是HTML中比较重要的部分，表格可以用来布局网页，也可以用来展现内容。上面的代码就是一个简单的表格。代码中为方便看到表格的样子，在中加入了 border 属性。设置为1则表示边框大小为1。综合以前的代码在代码中可以看到表格是用和来表示的。表格中行是,单元格是。而内容必须放在单元格内，才能显示正常。否则显示在表格外。再来看一下表格的高级应用。表格演示订单列表广告主订单号dangdang123456joyo123456商品信息商品名称：XX手表商品介绍：一块表在上面的代码中，我们看到了2个相对复杂很多的表格。其实是运用了单元格合并的做法。rowspan纵向合并colspan横向合并横向合并的时候，当前行就可以减少单元格。纵向合并的时候，在当前行往下的行都要减少相应位置的单元格。代码中还可以看到，,都使用了align属性。这也是它们本身自带的属性。 中align 是本身针对网页的位置。 中 align 是针对本身内容的位置。这里面用到了，图片标签。属于独立标签并不需要结尾。代码中我们只用到了img 的一个必要属性，就是src ,它是用于设置图片地址的。除了src，还有下面几个属性：width是指定图片的宽度，如果不设置则为默认height指定图片高度，没有设置则为默认Border设置图片边框框架演示本站7. HTML 框架HTML框架，一般网页中使用的比较少。是一个比较独特的标签，可以在网页中嵌入另外一个网页。没有内容，但是确有结尾标签。以上是一个简单的框架代码。运行后可以看见页面中出现了除了本身外还有两个网站。其中 看起来和页面融合到了一块。这个就是frameborder的作用。src框架目标页面frameborder框架的边框width框架的宽度height框架的高度以上是一些基本的HTML内容。其实大致规则都一样，就是标签的作用不同。知道如何运用标签后，如果有需要的效果，但是没有可以用标签搭配使用。最后附上一个例子，用表格布局做的网站，框架 引