网页制作的学习流程,可以说的一个循序渐进的过程从简单逐步深入。
html
第一部分HTML
第一章 HTML 介绍
1.1 HTML 简介
Html是超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。CSS则是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,通常我们所说的样式表。对HTML概念有一定了解了现在我们正式进入html的学习,学习言语有一种合适的工具必然事倍功半,想想如果我们编辑html用记事本那是多么痛苦的一件事,所以我们要使用一款智能点的工具。 Dreamweaver无非是很好的html编辑工具,学习html想了解它的特性将html代码输入Dreamweaver预览观察效果是最有效的学习方法。
1.2 HTML 入门
先给大家看个很简单的例子,对于学过的同学来说这实在的太简单,我们初学者也能很快明白html到底是怎么一回事。
<html> <title>网页标题</title> <body> <p>第一个网页</p> </body> </html> |
从这个简单的例子我们可以看出,一个简单的网页是用<html>开头</html>结尾的
HTML标签都是由尖括号包围关键字的<p></p>
并且都是成对出现的有<>(开始标签) 就有</>(结束标签)与之配对(除了少数没有结束标签如<br/>--换行符)
•<html> 与 </html> 之间的文本描述网页 •<body> 与 </body> 之间的文本是可见的页面内容 •<p> 与 </p> 之间的文本被显示为段落 |
把上面那段代码复制到你的Dreamweaver中按下F12就可以看见你的第一个网页了。现在是否知道如何做网页了,有点小成就感了吧。下面我们继续详细介绍几种常用的html标签
2.2.1链接标签
想从自己的做的网站跳转到我们自己的QQ空间吗?
<a href="填上你的空间地址">我的空间</a>(是在当前页面打开) 加上target="_blank" 如<a href="地址" |
2.2.2图片标签
<img src="lff.jpg" width="50" height="100%" /> |
src图片地址 50 和100%大家自己研究
2.2.3 Html中一些文字的标签
定义粗体文本。 | |
定义大号字。 | |
定义着重文字。 | |
定义斜体字。 | |
定义小号字。 | |
定义加重语气。 | |
定义下标字。 | |
定义上标字。 | |
定义插入字。 | |
定义删除字 |
在 HTML 页面中创建水平线<hr /> 标签。
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> ... ... </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注释
想要强化html的学习多多的去Dreamweaver中尝试
带大家做回爱学习的贼,我们去凿壁借光,单击浏览器的“查看”菜单,选择“查看源文件”,随后你会看到一个弹出的窗口,窗口内就是实际的 HTML 代码。
Html5是下一代html,HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。将会成为未来几年的发展趋势,现在国内专门有HML5技术的只有新浪,腾讯,搜狐这样的门户网站。
HTML5中增添的一些有趣的新的特性:
有兴趣的同学可以自己先行学习。