本文详细介绍了HTML创建页面、CSS字体与换行、JavaScript链接与列表的基本应用，以及表单元素的实战演示。从超链接到表格，一步步构建网页基础框架。
一、基础知识
1.创建一个html页面
<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en"> <!-- html标签表示html的开始，lang="zh_CN表示中文" -->
<head> <!-- 头部标签，包含title、css样式、js代码 -->
<meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
<title>标题</title> <!-- 表示标题 -->
</head>
<body> <!-- 整个html页面显示的主题内容 -->
hello
</body>
</html>
2.font字体标签演示
<!--
需求： 在网页上显示 我是字体标签，并修改字体为宋体，颜色为红色。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>
3.换行标签显示
<!-- 特殊字符
需求：把<br>换行标签 变成文本 转换成字符显示在页面上
常用特殊字符:
< ----- <
> ----- >
空格----  
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
我是<br>标签<br/>国哥好 帅啊！
</body>
</html>
4.标题标签演示
<!--
需求：演示 标题1~标题6
h1-h6都是标题标签，h1最大，h6最小
align是对齐属性，值为left(默认)、center、right
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
5.超链接标签演示(重点)
<!-- 超链接
需求：演示普通的超链接
基础知识
1.a标签是超链接；
2.href属性设置链接的地址；
3.target属性设置跳转的目标，包含_self(当前页面)、_blank(打开新窗口)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接.html</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度_self</a><br/>
<a href="http://www.baidu.com" target="_blank">百度_blank</a>
</body>
</html>
6.列表标签演示
<!-- 列表标签
需求：使用无序列表演示东北F4，赵四、刘能、小沈阳、宋小宝
基础知识
1.列表包括无序列表、有序列表、定义列表(几乎不用)；
2.ul:unordered list，表示无序列表，有序列表是ol,type属性可修改列表项前的符号；
3.li:list item，表示列表项；
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
</body>
</html>
7.img标签演示
<!-- img标签
需求：使用img标签显示一张图片，并修改宽、高、边框属性
基础知识
1.img标签是图片标签
1.src属性可以设置图片的路径；
2.width\height属性设置宽、高；
3.border设置图片边框大小；
4.alt设置当指定路径找不到图片时，用来替代显示的文本内容；
2.在web中路径分为相对路径和绝对路径；
3.相对路径：
1.'.' 表示当前文件所在的目录
2.'..' 表示当前文件所在的上一集目录
3.文件名 表示当前文件所在目录的文件，相当于./
绝对路径：
1.http://ip:port/工程名/资源路径
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<img src="imgs/spider.jpg" width="300" height="228" border="1"/>
</body>
</html>
8.表格标签演示
<!-- 表格标签
需求1：做一个带表头的，3*3的表格，并显示边框；
需求2：修改表格的宽度、高度，表格的对齐方式、单元格间距；
基础知识
1.table标签是表格标签
1.border设置表格边界
2.width设置表格宽度
3.height设置表格高度
4.设置表格相对于页面的对齐方式
2.tr是行标签；
3.th是表头标签；
4.td是单元格标签，align设置单元格文本对齐方式；
5.<b>/</b>标签是加粗；
6.cellspacing设置单元格间距；
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="300" height="300" align="center" cellspacing="0">
<tr>
<td align="center"><b>1.1</b></td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
9.设置表格跨行跨列
<!-- 表格标签
需求1：新建一个5*5的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
基础知识：
1.colspan属性设置跨列；
2.rowspan属性设置跨行；
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行跨列表格</title>
</head>
<body>
<table border="1" width="300" height="300" align="center" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>
10.在页面上显示新窗口
<!-- 表格标签
需求1：
基础知识：
1.iframe标签可以在页面上开辟一个小区域显示一个单独的页面；
2.iframe和a标签组合使用的步骤
1.在iframe标签上使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name的属性值
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe标签</title>
</head>
<body>
我是iframe标签
<iframe src="hello.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="hello.html" target="abc">hello.html</a></li>
</ul>
</body>
</html>
11.表单标签(重点)
<!-- 表格标签
需求：创建一个个人信息注册的表单界面，包含用户名、密码、确认密码、
性别(单选)、兴趣爱好(多选)、国籍(下拉列表)、隐藏域、自我评价(多行文本域)
、重置、提交。
基础知识：
1.form标签是表单
2.input type="text"是文本输入框，value设置显示默认值
3.input type="password是密码，value设置显示默认值
4.input type="radio"是单选框，name可以对齐分组，即同一个组内只能单选一个，checked="checked"表示设置默认选项
5.input type=checkbox是复选框，利用checked="checked"设置默认选项
6.select标签是下拉列表框，option是下拉列表中的选项，可通过select="selected"设置默认选中
7.textarea表示多行文本输入框，rows属性设置行数，cols属性设置列数，起始标签和结束标签中的内容是默认值
8.input type="reset"是重置按钮，value属性修改按钮上的文本
9.input type="submit"是提交按钮，value属性修改按钮上的文本
10.input type="button"是按钮，value属性修改按钮上的文本
11.input type="file"是文件上传域
12.input type="hidden"是隐藏域，当我们要发送某些信息不需要用户看见或参与，它是给程序用的
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<form>
用户名称：<input type="text" value="默认值"/>
<br/>
用户密码：<input type="password" value="abc"/>
<br/>
确认密码：<input type="password" value="abc"/>
<br/>
性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
兴趣爱好：<input type="checkbox"/>Java
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++<br/>
国籍：<select>
<option>请选择国籍</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
<br/>
自我评价：<textarea rows="10" cols="20">
我才是默认值
</textarea>
<br/>
<input type="reset"/>
<input type="submit"/>
<input type="button" value="abc"/>
<input type="file"/>
</form>
</body>
</html>
12.表单格式化
<!-- 表单格式化
需求：
基础知识：
1.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td>
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td>
<input type="password" value="abc"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" value="abc"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox"/>Java
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>请选择国籍</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea rows="10" cols="20">
我才是默认值
</textarea>
</td>
</tr>
<tr>
<td> <input type="reset"/></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
13.表单提交中的细节
<!-- 表单提交中的细节
需求：
基础知识：
1.form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认)或POST
2.表单提交时，数据没有发送给服务器的三种情况
1.表单项没有name属性值
2.单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中
3.GET请求
1.浏览器地址栏中的地址:action属性+[?+请求参数(格式为name1=value1&name2=value2...)]
2.不安全
3.有数据长度限制(非ASCII码字符或100个字符)
4.POST请求
1.浏览器地址栏中只有action属性值，即服务器地址
2.相对于GET更安全
3.理论上没有数据长度的限制
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的显示</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<input type="hidden" name="action" value="login"/>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td>
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td>
<input type="password" value="abc"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" value="abc"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox"/>Java
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>请选择国籍</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td>
<textarea rows="10" cols="20">
我才是默认值
</textarea>
</td>
</tr>
<tr>
<td> <input type="reset"/></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
14.其他标签
<!-- 其他标签
需求：div、span、p标签的演示
基础知识：
1.div标签默认独占一行
2.span标签，它的长度是封装数据的长度
3.p段落标签，默认会在段落的上方或下方个各空出一行来(如果已有就不再空)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落标签1</p>
<p>段落标签2</p>
</body>
</html>
扫一扫
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
