主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。带< >符号的元素被称为HTML标记，标记是放在标记符（< >）中的用户表示某个功能的编码命令，也称为HTML标签或元素。1.<!DOCTYPE>标记位于文档最前面，用于向浏览器说明当前文档使用的是哪种HTML，如7-1使用的是HTML5。通常网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型。只有这样浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。该标记和浏览器兼容性有关，删除后，会把如何展示HTML页面的权力交给浏览器，这样页面显示效果有多种，开发中不允许。2.< html >标记位于<!DOCTYPE>标记后，也称根标记，用于告知浏览器其自身是一个HTML文档。以< html >开始，以< /html >结束，两者之间的内容是文档的头部和主体。3.< head>标记该标记用于定义HTML文档的头部信息，也称为头部标记，紧跟中< html>标主要用于封装其他位于文档头部的标记，如< title>、< meta>、< link>及< style>等，其中< title>标记用于描述文档的标题，< meta>可提供有关页面的元信息，也可指定字符编码；< link>用于定义文档与外部资源的关系，其最常见的用途是链接样式表，< style>用于为HTML文档定义样式信息。注：一个HTML文档只能含有一对< head>标记，并且绝大多数文档头部包含的数据都不会真正作为内容显示中页面中。4.< body>标记== 用于定义HTML文档所要显示的内容==，也称为主体标记。里面的信息才是最终展示给用户的。注：一个HTML文档只能含有一对< body>标记，< body>标记必须在< html>标记内，且位于< head>头部标记之后，与< head>标记是并列关系。5.HTML文件的创建及运行首先创建一名为chapter07的文件夹，然后在文件夹中新建一个txt结尾的文本文件，将上述7-1内容编写到文件中，保存文件后，将文件名称改为htmlDemo01，后缀为html。双击即可通过默认浏览器打开。。如果要展示页面效果，可在两< body>标记之间添加内容
网页开发基础：
分类：网页技术可以粗略的划分为前台浏览器端技术和后台服务器端技术。早期只需使用HTML即可单独完成前台网页制作，而今天则需要学习整个Web标准体系才能完成规范的前台网页制作。在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript则负责动态行为。
动态网页：指网页的内容可以根据条件的改变而自动改变。动态网页通常情况下都是数据驱动的网页，即网页中变化的数据是通过数据库的操作来完成的。常见动态网页一般扩展名为asp、aspx、php、jsp等，其共同特点为其网页内的代码都存放的网页服务器上，完成数据库操作后，生成的HTML代码网页发送给客户端的浏览器执行。
静态网页：即纯粹的HTML网页。网页代码除了包括完整的HTML代码之外，还可以包含运行于客户端的JavaScript程序。一般的扩展名为html、htm的网页 为静太网页。其共同点就是其网页内的代码都是在客户端的浏览器中执行的。
HTML(Hypertext Markup Language)，超文本标记语言：HTML命令用于说明并组织网页上的文字、图形、动画、声音、表格、链接等。组织网页元素的HTML命令是由<和>包括的，这些HTML命令也叫HTML标签。一般的HTML标签都是成对出现的，补组织的网页元素放在首尾标签内，如你好，也有少数标签是单个出现的，如
，。
学习网页技术应循序渐进，推荐学习顺序如下：HTML—>CSS—>JavaScript---->ASP—>PHP—>AJax—>ASP.net
编写HTML注意如下4点：
1、任何标签必须用两个括号括起来，即<和>，如：
2、任何单独的标签都是闭合的（闭合就是标签的最后要有一个/来标示结束），比如
就是单独的（注意要在最后加上/，以表示其是独立的）。双标签必须有结束标签，在开始和结束标签中可以有内容。
3、单标签里可以添加部分属性，用空格分隔开，如。而双标签则可以在其开始标签添加部分属性，用空格分隔，如。
4、标签是大小写无关的，跟表示的意思是一样的，标准推荐使用小写。
创建web项目
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
</head>
<body>
这是我的第一个HTML
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>段落标记和换行标记</title>
</head>
<body>
<p>使用HTML制作网页时通过br标记<br />可以实现换行效果</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文本样式标记</title>
</head>
<body>
我是默认样式的文本<br />
<font face="微软雅黑" size="7" color="green"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图片标记</title>
</head>
<body>
显示图片：<img src="106.jpg" width="102" height="130" border="0" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表格标记</title>
</head>
<body>
<table border="0">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>itcast</td>
<td>95</td>
<td>80</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表单标记</title>
</head>
<body>
<fieldset>
<legend>注册新用户</legend>
<!-- 表单数据的提交方式为POST -->
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名:</td>
<td>
<!-- 1.文本输入框控件 -->
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">密码:</td>
<!-- 2.密码输入框控件 -->
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<!-- 3.单选输入框控件，由于无法输入value, 所以预先定义好 -->
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女
</td>
</tr>
<tr>
<td align="right">兴趣:</td>
<td>
<!-- 4.复选框控件 -->
<input type="checkbox" name="interest" value="film" /> 看电影
<input type="checkbox" name="interest" value="code" /> 敲代码
<input type="checkbox" name="interest" value="game" /> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像:</td>
<td>
<!-- 5.文件上传控件 -->
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- 6.提交按钮控件 -->
<input type="submit" value="注册" />
<!-- 7.重置按钮控件，单击后会清空当前form -->
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>textarea的使用</title>
</head>
<body>
<body>
<form action="#" method="post">
评论： <br/>
<textarea cols="60" rows="5">
评论时，请注意文明用语。
</textarea >
<br /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ul标记</title>
</head>
<body>
<font size="5">传智播客学科<font><br />
<ul>
<li>web前端</li>
<li type="disc">JAVA</li>
<!--disc为默认值-->
<li type="square">PHP</li>
<li type="circle">.NET</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ul标记</title>
</head>
<body>
在新窗口打开：
<a href="http://www.itcast.cn/" target="_blank">传智播客</a><br />
在原窗口打开：
<a href="http://www.baidu.com/" target="_self">百度</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>使用CSS内嵌式</title>
<style type="text/css">
/*定义标题标记居中对齐*/
h2{ text-align:center;}
/*定义div标记样式色*/
div{ border: 1px solid red; width: 300px; height: 80px; color:blue; }
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
title标记之后。
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>使用链入式CSS样式表</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，
title标记之后。
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>选择器</title>
<style type="text/css">
/* 1.类选择器的定义*/
.red {
color: red;
}
.green {
color: green;
}
.font18 {
font-size: 18px;
}
/* 2.id选择器的定义*/
#bold {
font-weight: bold;
}
#font24 {
font-size: 24px;
}
</style>
</head>
<body>
<!--类选择器的使用-->
<h1 class="red">标题一：class="red"，设置文字为红色。</h1>
<p class="green font18">
段落一: class="green font18",设置文字为绿色，字号为18px。
</p>
<p class="red font18">
段落二: class="red font18",设置文字为红色，字号为18px。
</p>
<!--id选择器的使用-->
<p id="bold">段落1：id="bold"，设置粗体文字。</p>
<p id="font24">段落2：id="font24"，设置字号为24px。</p>
<p id="font24">段落3：id="font24"，设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
