HTML超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
第一个例子:文字标签
需求:在页面上需要显示“Welcome to join us!”这一句话而且字体颜色为蓝色的?
<font style=font:58pt face="Arial, Helvetica, sans-serif" color=blue>
Welcome to join us!
</font>
显示结果如下:
代码详解如下:
<font style=font:58pt face="Arial, Helvetica, sans-serif" color=blue>
Welcome to join us!
</font>
<>代码的第一行标签名 属性内容依次是:字号大小 什么字体以及颜色
<> 代码第二行 文字内容
<> 代码第三行 尾标签
第二个例子:img标签
需求:在页面中显示一张名为高圆圆的图片
<img src="../../Desktop/1.jpg" alt="欢迎大家到来" width="400" height="800" border="0" usemap="#Map" title="高圆圆" />
结果显示如下:
代码详解如下:
<>代码第一行标签名 src 图片连接的位置
width 图片的宽度
height 图片的高度
alt 提示文本,当src属性是小的时候,alt才会生效
title 当鼠标放在上卖弄会有一个文字提示
第三个例子:表格标签
需求:创建一个学生的成绩登记表单
<table border="2" align="center" width="400" height="300">
<caption><h1>学科成绩统计表<h1></caption>
<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr align="center">
<td rowspan="2">狗娃</td>
<td>音乐</td>
<td>90</td>
</tr>
<tr align="center">
<td>java</td>
<td>60</td>
</tr>
<tr align="center">
<td>狗剩</td>
<td>java</td>
<td>70</td>
</tr>
<tr align="center">
<td>狗蛋</td>
<td>java</td>
<td>80</td>
</tr>
<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>
</table>
结果如下图所示:
代码详解如下:
table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头,一般用于加粗显示字段名称
border:table标签的一个属性,用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置
行合并和列合并:
行合并:rowspan
列合并:colspan
第四个例子:下拉列表选择标签
需求:设置一个简单的家庭住址的下拉列表标签,实现选择?
代码如下:
<select name="place">
<option value="beijing">北京</option>
<option value="sahngahi">上海</option>
<option value="guangdong">广东</option>
</select><br />
结果显示如下:
代码详解如下:
下拉选项
option就是一个选项
value表示当前选项的值
第五个例子:转义字符标签
需求:使用转义字符
<h1>标题1</h1><br/>
& <br />
<hr />
NBA篮球 赛事火热进行中!<br/>
</hr>
加多宝<sup>®</sup>
<hr />
加多宝<sup>©</sup>
<hr/>
<hr/>
结果如下
代码详解如下:
第六个例子:超链接的标签
代码如下:
<a name="top" ></a>
<a href="http://www.baidu.com" target="_blank">超链接</a><br/>
<a href="thunder://www.movie.com/shujiaobababa.avi">摔跤吧爸爸_爱奇艺专享用户通道</a><br />
<a href="mailto:156789090@qq.com">发送邮件</a>
</p>
<hr />
<p><a href="#content1">第一章节</a>
结果显示如下:
代码详解如下:
两个属性: href:设置这个超链接需要链接的资源
target:设置打开资源的方式
超链接:默认的协议为 file://
协议:
file:// 本地文件协议
http:// 网络上我们一般请求都使用的是htpp://,这个协议是基于请求和相应的】
thunder:// 迅雷下载的协议
mailto: 发送邮件的协议
协议的执行流程:
thunder://www.movie.com/shujiaoba.avi: 会将这个超链接分为两个部分
一个是资源地址,一个是协议名称,因为我们在安装每一个软件的时候,每一个软件都会在我们注册表中注册相应的协议,找你的注册表中有哪些软件注册了该协议那个软件注册了,就会打开来那个软件。
第七个例子:应用实战
form与table的混用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table align="center" width="600" height="400" border="2">
<caption> <h1> 今日之星选手报名表<h1></caption>
<form action="" method="get"/>
<tr align="center">
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名"/></td>
</tr>
<tr align="center">
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td>性别</td>
<td><input type="radio" value="男" name="gender"/>男<input type="radio" value="女" name="gender"/>女</td>
</tr>
<tr align="center">
<td>出生日期</td>
<td>
<head>
<script type="text/javascript">
function createSelect(ActionFlag) {
var selYear = document.getElementById("tYEAR");
var selMonth = document.getElementById("tMON");
var selDay = document.getElementById("tDAY");
var dt = new Date();
if(ActionFlag == 1) {
MinYear = dt.getFullYear()-20;
MaxYear = dt.getFullYear();
for(var i = MinYear; i <= MaxYear; i++) {
var op = document.createElement("OPTION");
op.value = i;
op.innerHTML = i;
selYear.appendChild(op);
}
selYear.selectedIndex = 0;
for(var i = 1; i < 13; i++) {
var op = document.createElement("OPTION");
op.value = i;
op.innerHTML = i;
selMonth.appendChild(op);
}
selMonth.selectedIndex = dt.getMonth();
}
var date = new Date(selYear.value, selMonth.value, 0);
var daysInMonth = date.getDate();
selDay.options.length = 0;
for(var i = 1; i <= daysInMonth ; i++) {
var op = document.createElement("OPTION");
op.value = i;
op.innerHTML = i;
selDay.appendChild(op);
}
selDay.selectedIndex = dt.getDate() - 1;
}
</script>
</head>
<body>
<select id="tYEAR" size="1" onChange="createSelect()"></select>
<select id="tMON" size="1" onChange="createSelect();"></select>
<select id="tDAY" size="1" ></select>
<script type="text/javascript">createSelect(1);</script>
</body>
</td>
</tr>
<tr align="center">
<td>兴趣</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby"
value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球<input type="checkbox"
name="hobby" value="排球"/>排球 </td>
</tr>
<tr align="center">
<td>联系电话</td>
<td><input type="text" name="phoneNumber" value="请输入联系电话"/></td>
</tr>
<tr align="center">
<td>家庭住址</td>
<td>
<select name="place">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option value="guangdong">广东省</option>
<option value="tianjinshi">天津市</option>
<option value="shanxisheng">山西省</option>
<option value="guizhousheng">贵州省</option>
<option value="hunan">湖南省</option>
<option value="hainansheng">海南省</option>
<option value="hubeisheng">湖北省</option>
<option value="jiangsusheng">江苏省</option>
<option value="jiangxisheng">江西省</option>
<option value="zhejiangsheng">浙江省</option>
<option value="henansheng">河南省</option>
<option value="hebeisheng">河北省</option>
<option value="xizang">西藏</option>
<option value="xinjiang">新疆</option>
<option value="xainggang">香港</option>
<option value="aomen">澳门</option>
<option value="shandongsheng">山东省</option>
<option value="anhuisheng">安徽省</option>
<option value="sichaunsheng">四川省</option>
<option value="yunnansheng">云南省</option>
<option value="ningxia">宁夏</option>
<option value="qinghaisheng">青海省</option>
<option value="fujainsheng">福建省</option>
<option value="heilongjiangsheng">黑龙江省</option>
<option value="jilinsheng">吉林省</option>
<option value="qita">其他</option>
</select><br />
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"/><input type="reset" value="重置"/></td>
</tr>
</form>
</table>
</body>
</html>
显示结果如下: