目录
实验名称
HTML制作网页
实验目的
了解HTML作用
掌握HTML文本处理、图像和超链接
了解HTML表格搭建
掌握HTML表单处理
能够独立完成前端页面的搭建
实验背景
概念:HTML(HyperText Markup Language)超文本标记语言, “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 它通过标记符号(标签)来标记要显示的网页中的各个部分,这些语义化的标签可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等),浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,我们只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果
后缀:一个网页对应多个HTML文件,超文本标记语言文件以.htm或.html为扩展名,常用.html作为扩展名
结构:整个页面由html标记包含,包括head和body两部分
-
<html>,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而</html>,则表示该文件的结尾。
-
<head></head>,这2个标记符分别表示头部信息的开始和结尾。它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是<title>和<meta>标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,meta定义了HTML文档中的元数据。
-
<body></body>,网页中显示的实际内容均包含在这2个正文标记符之间。
<!DOCTYPE html>:声明此页面为html5,简称h5,h5是html的第5个版本
<html></html>:包裹着整个页面的所有标签,标志着这是一个html页面
<head></head>:头部,包含标题和页面元信息
<body></body>:身体部分,显示页面内容的标签
一、常用标签
-
<h1> - <h6>:定义html标题,由h1~h6组成,<h1> 定义最大的标题。<h6> 定义最小的标题。
-
<p></p>:定义段落。
-
<a href=' ' target=' '></a>:定义html超链接,在href属性中指定链接的地址,超链接可以是一个字,一个词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手;使用 Target 属性,可以定义被链接的文档在何处显示。
-
<img src=' ' alt=' '/>定义html页面中的图像,src(source) 指存储图像的位置,alt 属性用来为图像定义一串预备的可替换的文本。
-
<br /> 表示换行。
-
<!-- --> 可以将注释插入 HTML 代码中,这样可以提高其可读性。
-
<hr /> 标签在 HTML 页面中创建水平线,hr 元素可用于分隔内容。
<!DOCTYPE html> <!-- !DOCTYP表名此文件为h5版本-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 网页的编码-->
<title>thisis my first html</title> <!--网页的标题头-->
</head>
<body>
<!--1、html标题-->
<h1>This is ruiyi BigData</h1>
<h2>This is ruiyi BigData</h2>
<h3>This is ruiyi BigData</h3>
<h4>This is ruiyi BigData</h4>
<h5>This is ruiyi BigData</h5>
<h6>This is ruiyi BigData</h6>
<!--2、段落-->
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<!--3、超链接
target="_blank"表示在新的窗口打开超链接
target="_self"表示在当前窗口打开超链接
-->
<a href="http://www.baidu.com/"target="_self">VisitBaidu</a>
<!-- 4、换行-->
<br>
<!-- 5、图片-->
<img src="logo.png"alt="ruiyi">
<!-- 也可以将图片当做超链接点击-->
<a href="http://www.sugon.com/"><img src="logo.png"alt="ruiyi"></a>
</body>
</html>
点击first.html页面右上角的谷歌浏览器,浏览器会解析该html页面。
点击超链接 VisitBaidu,可以跳转到百度页面,点击第二个logo图片,可以跳转到网易云音乐首页。
二、列表
HTML 支持有序、无序和自定义列表:
-
无序列表是一个项目的列表,列表项目使用粗体圆点(典型的小黑圆圈)进行标记,无序列表使用 <ul> 标签,列表中的内容由<li>标签进行标记 。
-
有序列表也是一列项目,列表项目使用数字进行标记,有序列表始于 <ol> 标签,每个列表项始于 <li> 标签。
-
自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的内容定义以 <dd> 开始。
新建一个list.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>thisis list</title>
</head>
<body>
<!-- 1、无序列表-->
<h1>computer language</h1>
<ul> <!-- 标志着无序列表-->
<li>Python</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>BootStrap</li>
</ul>
<!-- 2、有序列表-->
<h1>Sales grade</h1>
<ol> <!-- 标志着有序列表-->
<li>CHANEL</li>
<li>Givenchy</li>
<li>Valentino</li>
<li>Kenzo</li>
<li>Dior</li>
</ol>
<!-- 3、自定义列表-->
<h1>Drink </h1>
<dl> <!-- 标志着自定义列表-->
<dt>Coffee</dt>
<dd>black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>
运行界面
三、表格
表格由 <table> 标签来定义,每个表格均有若干行,由标签<tr></tr>定义,每行被分割为若干单元格,由<td></td>定义。常见的表格属性有:
-
border表示表格的边框
-
colspan="2"表格跨两列
-
rowspan="2"表格跨两行
-
cellpadding="10"设置单元格边距
-
cellspacing="0"设置单元格间距
新建一个table.html文件。首先编写一个table标签,在table标签里面输入 tr*11,然后按Tab键快速生成
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
接着在每一行tr标签中,输入td*9 ,按Tab键快速生成多个单元格
然后给table设置边框border="1px",单元格间距设置为1,单元格边距设置为4,设置背景色为灰色
<table width="100%"border="1px"cellspacing="1" cellpadding="4" bgcolor="#d3d3d3">
设置第一行格式,让每个td格横跨两行,并设置宽度
<tr>
<td width="8%"rowspan="2">讲师</td>
<td width="10%"rowspan="2">讲课内容</td>
<td colspan="2">课时安排</td>
<td colspan="2">作业情况</td>
<td colspan="3">讲师职位</td>
</tr>
填充第二行内容,设置宽度
<tr>
<td width="8%">时长</td>
<td width="8%">完成时间</td>
<td width="8%">作业数量</td>
<td width="8%">检查助教</td>
<td width="8%">级别</td>
<td width="8%">薪资</td>
<td width="8%">职位</td>
</tr>
第三行内容如下:让“张三”横跨3行
<tr>
<td rowspan="3">张三</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小学</title>
</head>
<body>
<h1 align="center">课程安排表</h1>
<table width="100%"border="1px"cellspacing="1" cellpadding="4" bgcolor="#d3d3d3">
<tr>
<td width="8%"rowspan="2">讲师</td>
<td width="10%"rowspan="2">讲课内容</td>
<td colspan="2">课时安排</td>
<td colspan="2">作业情况</td>
<td colspan="3">讲师职位</td>
</tr>
<tr>
<td width="8%">时长</td>
<td width="8%">完成时间</td>
<td width="8%">作业数量</td>
<td width="8%">检查助教</td>
<td width="8%">级别</td>
<td width="8%">薪资</td>
<td width="8%">职位</td>
</tr>
<tr>
<td rowspan="3">张三</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">李四</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">王五</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
运行截图:
四、表单
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
input 元素
</form>
常用表单描述:
新建form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset style="width: 400px">
<legend>个人注册</legend>
<p><label>手机号码:</label><input type="text"value="使用手机号码登录微博" /></p>
<p><label>设置密码:</label><input type="text"/></p>
<p><label>昵称:</label><input type="text"/></p>
<p><label>姓名:</label><input type="text"/></p>
<p><label>身份证:</label><input type="text"/></p>
<p><label>性别:</label>
<input type="radio"value="man" name="sex"/>男
<input type="radio"value="women" name="sex" />女
</p>
<p><label>爱好:</label>
<input type="checkbox"name="hobby"/>篮球
<input type="checkbox"name="hobby" />乒乓球
<input type="checkbox"name="hobby" />足球
</p>
<p><label>激活码:</label><input type="button"value="免费获取短信激活码" />
<input type="text"/>
</p>
<p><input type="button"value="立即注册" /></p>
<p><a href="#"><input type="checkbox"name="checkbox" id="checkbox" />微博服务使用协议</a></p>
</fieldset>
</body>
</html>
展示:
实验总结
了解了HTML作用,学习了HTML文本处理、图像、超链接表格搭建以及表单处理。
写在最后:本专题所有博客均记录本人实训期间的学习笔记,方便复习查看,内容并非本人原创,均为老师上课内容。