由浏览器识别的,用于显示信息的文件;信息包括:新闻、购物、邮件等。
由众多网页组成的群体,网页之间可能通过相互调用实现信息的查看。
1.网站的存储空间
服务器用于网页的存放
2.网站的域名
通过域名指向需要访问的网页
3.网页的访问地址
HTML(Hyper Text Markup Language)超文本标记语言,是构成网页的基本语言。
示例:
网页的标题
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> </body> </html>页面显示效果:
1.标题标签(h1-h6)
2.段落(p)和换行(br)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <p>This is paragraph</p> <p>This is <br> paragraph</p> <p>This is paragraph <br></p> </body> </html>结果:
<img
src=”图像路径”
title=”提示信息”
alt=”图像路径不正确显示的内容”
width=”宽度”
height=”高度” />
相对于当前文件的路径(推荐使用)
./ 代表当前目录
../ 代表上一级目录
../../ 代表上一级目录的上一级目录
绝对路径(链接外部资源文件时使用)文件实际存放的位置的完整路径
超级链接以称为超链接,使用相互独立的页面互相链接。
<a href=”链接的路径” target=”目标窗口名”>链接文本</a>
1.页面链接
2.功能链接(我们游览网页时,邮箱链接)
3.锚链接(连接到指定的地方)
步骤1:添加锚记(给标签添加id属性) <标签名 id=”锚名”></标签名> 如: <body id=”top”>… </body> 步骤2:使用a标签链接到锚记 <a href=”#锚名”>链接文本</a> 如:<a href=”#top”>返回顶部</a>UL (UnOrdered List) LI(List Item) <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul>
disc
默认值。实心圆。
circle
空心圆。
square
实心方块。
<ul type="value">
OL(Ordered List)
LI(List Item)
<ol>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1</li>
</ol>
1
默认值。数字有序列表。(1、2、3、4)
a
按字母顺序排列的有序列表,小写。(a、b、c、d)
A
按字母顺序排列的有序列表,大写。(A、B、C、D)
i
罗马字母,小写。(i, ii, iii, iv)
I
罗马字母,大写。(I, II, III, IV)
start 属性规定有序列表的开始点
<ol start=”value”>
属性值:
number
数字。有序列表的开始点。
DL(Description List)
DT(Description Term)
DD(Description Definition)
<dl>
<dt>电脑</dt>
<dd>这是一台用于开发程序的电脑</dd>
<dd>这是一台用于开发游戏的电脑</dd>
</dl>
示例2:
为了页面的美观,显示数据规范
<table border=”xx像素” width=”xx像素或百分比” cellpadding=”” cellspacing=”” align=””>
</table>
1.border pixels 规定表格边框的宽度。
2.cellpadding pixels % 规定单元边沿与其内容之间的空白。
3.cellspacing pixels % 规定单元格之间的空白。
4.Width pixels % 规定表格的宽度。
<td width=”” height=”” align=”” valign=””>内容</td>
注册、登录、网上购物、问卷调查等
‘<form action=” ” method=” ” name=” ”></form>
Form的属性:
属性名值说明actionURL当提交表单时向何处发送表单数据(自取,在Java开发中serve pack包中名称一致)methodGET/POST发送HTTP的方式nameform_name表单的名字(自取)<input type=”text”
name=”名称”
value=”值”
size=”显示宽度”
maxlength=”最多输入字符数”
readonly=”只读” />
<tr> <th colspan="2">用户注册</th> </tr> <tr> <td width="80px">用户名称</td> <td> <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12"> </td> </tr>
<input type=”password”
name=”名称”
value=”值”
size=”显示宽度”
maxlength=”最多输入字符数”
readonly=”只读” />
<tr> <td width="80px">密码</td> <td> <input type="password" name="password" id="password" maxlength="6" size="10"> </td> </tr>
<input type=”radio”
name=”名称”
value=”值”
checked=”是否选中” />显示文本
<tr> <td width="80px">性别</td> <td> <!-- checked是默认选为男性 --> <input type="radio" name="sex" id="sex" value="男" checked>男 <input type="radio" name="sex" id="sex" value="女" >女 </td> </tr>
<input type=”checkbox”
name=”名称”
value=”值”
checked=”是否选中” />显示文本
<tr> <td width="80px">爱好</td> <td> <input type="checkbox" name="hobby" id="hobby" value="电影">电影 <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏 <input type="checkbox" name="hobby" id="hobby" value="玩">玩 </td> </tr>
<select name=”名称” multiple=”是否多选” size=”可见项数”>
<option
value=”选项值”
selected=”是否选中”>选项显示文本</option>
<option value=”选项值”>选项显示文本</option>
</select>
<tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade"> <option value="1">一年级</option> <option value="2">二年级</option> <option value="3">三年级</option> </select> </td> </tr>Select标签的属性使用:
<tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade" multiple="multiple"> <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr>设置默认选中项:
<tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade"> <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr><textarea name=”名称”
cols=”列数” rows=”行数”>值</textarea>
<tr> <td width="80px">内容</td> <td> <textarea name="text" id="text" cols="30" rows="10"></textarea> </td> </tr><input type=”button” value=”普通按钮” />
提交按钮<input type=”submit” value=”提交按钮” />
重置按钮<input type=”reset” value=”重置按钮” />
图片按钮<input type=”image” src=”图片路径” />
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单行文本</title> </head> <body> <form action="index.html" method="GET" name="action"> <!-- cellpadding 代表名称与单元格的距离 cellpacing代表单元框与边框的距离 --> <table border="1px" cellpadding="0" cellspacing="0"> <tr> <th colspan="2">用户注册</th> </tr> <tr> <td width="80px">用户名称</td> <td> <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12"> </td> </tr> <tr> <td width="80px">密码</td> <td> <input type="password" name="password" id="password" maxlength="6" size="10"> </td> </tr> <tr> <td width="80px">性别</td> <td> <!-- checked是默认选为男性 --> <input type="radio" name="sex" id="sex" value="男" checked>男 <input type="radio" name="sex" id="sex" value="女" >女 </td> </tr> <tr> <td width="80px">爱好</td> <td> <input type="checkbox" name="hobby" id="hobby" value="电影">电影 <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏 <input type="checkbox" name="hobby" id="hobby" value="玩">玩 </td> </tr> <tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade" > <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr> <tr> <td width="80px">内容</td> <td> <textarea name="text" id="text" cols="30" rows="10"></textarea> </td> </tr> </table> </form> </body> </html>