网页制作入门

网页制作的学习流程,可以说的一个循序渐进的过程从简单逐步深入。

html    css(div css布局   javascript(vbscript)    php;asp;asp.net(C#)    SEO

  刚刚步入网页制作应先从html入手结合css同时学习

第一部分HTML

第一章 HTML 介绍

1.1 HTML 简介

Html是超文本标记语言,即HTMLHypertext Markup Language),是用于描述网页文档的一种标记语言。CSS则是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,通常我们所说的样式表。对HTML概念有一定了解了现在我们正式进入html的学习,学习言语有一种合适的工具必然事倍功半,想想如果我们编辑html用记事本那是多么痛苦的一件事,所以我们要使用一款智能点的工具。 Dreamweaver无非是很好的html编辑工具,学习html想了解它的特性将html代码输入Dreamweaver预览观察效果是最有效的学习方法。

1.2 HTML 入门

先给大家看个很简单的例子,对于学过的同学来说这实在的太简单,我们初学者也能很快明白html到底是怎么一回事。

<html>

<title>网页标题</title>

<body>

<p>第一个网页</p>

</body>

</html>

  第二章 HTML 标签

    2.1 简单格式

从这个简单的例子我们可以看出,一个简单的网页是用<html>开头</html>结尾的

HTML标签都是由尖括号包围关键字的<p></p>

并且都是成对出现的有<>(开始标签) 就有</>(结束标签)与之配对(除了少数没有结束标签如<br/>--换行符)

<html>  </html> 之间的文本描述网页

<body>  </body> 之间的文本是可见的页面内容

<p>  </p> 之间的文本被显示为段落

 

把上面那段代码复制到你的Dreamweaver中按下F12就可以看见你的第一个网页了。现在是否知道如何做网页了,有点小成就感了吧。下面我们继续详细介绍几种常用的html标签

    2.2 HTML 标签

2.2.1链接标签

想从自己的做的网站跳转到我们自己的QQ空间吗?

<a href="填上你的空间地址">我的空间</a>(是在当前页面打开)

加上target="_blank"

<a href="地址"  target="_blank"></a>(将会在浏览器中在打开一个窗口)

2.2.2图片标签

<img src="lff.jpg" width="50" height="100%" />

src图片地址 50 100%大家自己研究

 

 

 

2.2.3 Html中一些文字的标签

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字

      2.2.4 水平线标签

 HTML 页面中创建水平线<hr /> 标签。

      2.2.5 table 标签

table就是表格是意思,在使用div css布局前我们常使用的是表格布局

表格<table></table>

<tr></tr>单元格<td></td>

表格的表头使用 <th> 标签进行定义

border="1"样式 边框为1 css里会详细讲

<table border="1"><tr>

<th>表头1</th>

<th>表头2</th>

</tr><td>row 0, cell 0</td>

<td>row 0, cell 1</td>

</tr>

<tr>

<td>row 1, cell 0</td>

<td>row 1, cell 1</td>

</tr>

</table>

在浏览器显示如下:

表头1

表头2

row 0, cell 0

row 0, cell 1

row 1, cell 0

row 1, cell 1

2.2.6无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

2.2.7有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

 

2.3表单(重点)

表单是一个包含表单元素的区域。表单虽然也是html标签但是它很重要需要重点掌握。

表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

表单使用表单标签(<form>)定义。

<form>

...

  input 元素

...

</form>

以下标签必须嵌套在<form></form>

2.3.1输入

多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields

当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>

First name:

<input type="text" name="name" />

<br />

Last name:

<input type="text" name="pwd" />

</form>

 

浏览器显示如下:

name: 
pwd:  

一个简单的登入就好了

注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

2.3.2单选按钮(Radio Buttons

当用户从若干给定的的选择中选取其一时,就会用到单选框。

<form>

<input type="radio" name="sex" value="male" /> 

<input type="radio" name="sex" value="female" /> 

</form>

浏览器显示如下:

窗体底端

窗体顶端

注意,只能从中选取其一。

2.3.3复选框(Checkboxes

当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。

<form>

<input type="checkbox" name="isa1" />

我是信息科学协会的一员

<br />

<input type="checkbox" name="isa2" />

我是南昌理工的学生

</form>

浏览器显示如下:

我是信息科学协会的一员
我是南昌理工的学生

2.3.4

表单的动作属性(Action)和确认按钮

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action=" action.asp" method="get">

Username:

<input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

浏览器显示如下:

Username:  

 按钮

一些常用的html标签就讲解完了

2.4 html注释

当我们写完一段代码后,时间隔久了容易忘记代码的意思这时候我们就需要注释,

注释不是每句都写,对于关键的容易忘记容易混淆就要添加注释

<!-- This is a comment -->html注释

   下一章我们将结合css 讲解div标签 style属性

想要强化html的学习多多的去Dreamweaver中尝试

带大家做回爱学习的贼,我们去凿壁借光,单击浏览器的“查看”菜单,选择“查看源文件”,随后你会看到一个弹出的窗口,窗口内就是实际的 HTML 代码。

Html5是下一代htmlHTML5 将成为 HTMLXHTML 以及 HTML DOM 的新标准。将会成为未来几年的发展趋势,现在国内专门有HML5技术的只有新浪,腾讯,搜狐这样的门户网站。

HTML5中增添的一些有趣的新的特性:

 •用于绘画的 canvas 元素

 •用于媒介回放的 video  audio 元素

 •对本地离线存储的更好的支持

 •新的特殊内容元素,比如 articlefooterheadernavsection

 •新的表单控件,比如 calendardatetimeemailurlsearch

有兴趣的同学可以自己先行学习。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值