都客仿站系列教程二:html入门-CSDN博客

声明：原创作品，未经许可，禁止转载。都客仿站官方网站：http://www.mou18.com 仿站学习QQ群：110673332

什么是html，html是现在最流行的网页语言。我们可以使用记事本这样的简单文本编辑器。输入源码保存为后缀为.html的网页文件，然后通过浏览器查看，就可以看到网页的效果。

html的结构，请看下面的例子：

< html >
    < head >
       < title > 这个是标题 </ title >
    </ head >
    < body >
    </ body >
</ html >

一个完整的html页面，包含有html,head,body,title几个标签。把以上的另存为一个后缀为.html或者.htm的页面，然后在浏览器里面打开就可以看到效果了。

最常用的html标签

下面我们来看一下最常用的html标签。

1 < html >
2 < head >
3      < title >html示列 </ title >
4 </ head >
5 < body >
6      < div >我是块元素 </ div >
7      < span >我是行元素 </ span >
8      < a href ="链接地址” target=" _blank" title ="文本提示" >链接名称 </ a >
9      < img src ="http://www.xxx.com/pic1.jpg" alt ="图片提示文本" />
10      < ul >
11      < li >项目一 </ li >
12      < li >项目一 </ li >
13      </ ul >
14 </ body >
15 </ html >

<head>....</head>：用于网页的头部信息，一般包括标题、css文件引用、javascript文件引用等。不参与执行操作。

<body>....</body>:网页的身体，所有网页可见区域布局和执行的动作脚本都放在这里。

要点一：标签和自闭合标签

标签：所谓标签，就是以"<"开头，“</"结尾的标记。必须是成对出现，比如有<html> 就有</html>,或者<body></body>。大部分网站的布局都是<div>内容</div>。

所有需要显示的内容都需要放在<body></body>标记中。

自闭合标签：比如说<img src="xxx.jpg" />这个就是自闭合标签，不需要成对出现，以“/>”结尾。以下是自闭合标签

比如：

<img src="xxx.jpg" /> --显示图片

<br /> --换行标签

要点二：网站链接的几种方式

网站的链接主要是通过a标签，实现链接和跳转。链接方式有几种方式，下面介绍一下。

1. 相对路径

2. 根相对路径链接：以”/"开头的路径，如果是在服务器上直接相对根文件夹。

3.绝对路径:完整的路径链接，通常可以用来引用外部链接。

要点三：各个标签简单介绍

标记是html中最重要的元素，结合css和javscript就可以构造形形色色的网页。

1.整体构造元素

常用的有div，span，表格标签（table，tr，td）

div 通用块级元素，可以把放在其“标签内容”中的元素一并进行设置（例如对齐方式），若是加上id、class等属性设置则可进行任意范围的样式设置

span 为多功能的行内元素，可以把放在其“标签内容”中的元素一并进行设置，若是加上id、class等属性设置则可进行任意范围的样式设置

2.文字构造元素

常用的有p，br

p 段落元素，可以把放在其“标签内容”中的元素一并进行设置（例如对齐方式）

br 强行换行，元素用于在文档中强制产生新的一行，但不会加入空白行

3.样式与配置

常用的有，hr,b,i,center,font

hr为空元素，用来在文档中产生一条水平参考线，在HTML中没有终止标签

b元素用来设置粗体字

i元素用来设置斜体字

center元素主要用来设置水平居中对齐。它是块级元素，会产生空白行

font元素用来设置文档中某一段文本的字号、字体、颜色，属性应用方面基本同于basefont元素

4.链接元素。常用的有a link base.

a 链接元素，用来跳转到另外的页面 <a href="目标链接">链接</a>

link元素用来定义链接，通常用来引用css文件。

base用来指定文件中所有链接相对URI的基准URI，也用于指定文件的基本目标框架名

5.列表元素。常用的有ul，li，dl，dt，dd

ul 无序列表

ol 有序列表

li 列表项目

dl 定义列表

dt 定义列表的项目

dd 定义列表的说明

6.图像标签

img 插入一张图片，以下是示列。

7.表格元素。table，tr，td

table元素用来在页面中配置表格范围，table元素只是建立表格的基础元素，就如图在之上绘制表格，table元素只是最外面的方框而已。最基本的表格还包括行（tr元素）与列（th或td元素）

tr 行，元素用来标记表格内部的行，它标明一行的开始与结束

td 单元格，用来标记表格主体内的数据域，也就是用来定义表格的数据单元格，td为 tr的子元素

8.表单元素。form，input，select，textarea。

form元素用来在网页中配置表单的范围，它是建立表单的基本元素，它可以包含各种表单控件以及文字、图像、表格等等

input元素用来配置表单中的输入域（控件），它在表单控件中有着最广泛的应用。input元素根据不同的属性设置可以生成10种不同的控件

属性值为预定义的关键字，共10个可选，用于指定显示不同的控件类型。

text：单行文本输入框，此为默认值；
password：密码输入框；
checkbox：复选框；
radio：单选按钮；
submit：提交按钮；
image：图片提交按钮；
reset：重置按钮；
button：普通按钮；
hidden：隐藏式控件；
file：文件选择控件

select 下拉菜单，元素用来配置一个选单对象，选单中的项目是用option元素罗列的。

使用选单控件的好处是可以节省空间而又能容纳更多的选项，其默认显示外观是一个“下拉菜单”

textarea 元素用来建立多行文本框，元素标签内容中的任何文字（包括HTML元素标签）都将成为多行文本框的默认数据，所以它没有value属性。

9.框架元素

iframe用来在文档中嵌入一个行内性质的内嵌框架（浮动框架）

要点四：最新技术前沿

很多不知道如何区分静态网站和动态网站，其实静态网站的定义是页面是html页面组成的，不带交互的数据库，并不是说网页有动画就是动态的；而动态网站都是有用户和数据交互的，比如说留言板，论坛这些。

html发展到今天，已经由单一的纯静态网页到如今丰富多彩的多媒体表现形式，结合flash技术可以直接播放视频和音频。目前的html5版本非常火，相信不久就会普及，新增的html标记让网站结构更加简单和实用。

以下是html入门完整示列：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title >html示列 </ title >
     < link href ="style/base.css" rel ="stylesheet" type ="text/css" />
     < style type ="text/css" >
         /* 这里可以写样式 */ </ style >

     < script src ="js/comm.js" type ="text/javascript" ></ script >

     < script type ="text/javascript" >
         /* 这里可以写js引用 */
     </ script >

</ head >
< body >
     < div >
         < span >这个是行内的标记 </ span >
         < ul >
             < li >< a href ="地址1" >菜单1 </ a ></ li >
             < li >< a href ="地址1" >菜单1 </ a ></ li >
             < li >< a href ="地址1" >菜单1 </ a ></ li >
             < li >< a href ="地址1" >菜单1 </ a ></ li >
         </ ul >
         < br />
        换了一行
         < img src ="images/1.jpg" alt ="图片的提示文本" />
         < center >
            居中的文字 </ center >
         < p >
            一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字 < br />
            一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字
         </ p >
         < hr />
         < b >加粗的文字 </ b >
         < i >斜体文字 </ i >
         < div >
             < form id ="form1" action ="要提交的地址" >
             < input type ="text" value ="这是文本框" />
             < input type ="button" value ="这是按钮" />
             < input type ="password" value ="这是密码框" />
             < input type ="checkbox" value ="复选框" />
             < input type ="file" value ="选择文件" />
             < input name ="radio1" type ="radio" checked ="checked" value ="单选框1" />
             < input name ="radio1" type ="radio" value ="单选框1" />
             < textarea cols ="6" rows ="7" >这里是一个多行文本框 </ textarea >
             </ form >
         </ div >
         < div >
             < table width ="200" border ="1" >
                 < tr >
                     < td >
                        单元格1
                     </ td >
                     < td >
                        单元格2
                     </ td >
                 </ tr >
             </ table >
             < iframe src ="内嵌的页面.html" ></ iframe >
         </ div >
     </ div >
</ body >

</html>

转载于:https://www.cnblogs.com/dukey/archive/2012/05/25/2517340.html