头信息
<html >
<head >
<meta http-equiv ="content-type" content ="text/html;charset=utf-8" />
<title > 这个是我的第一个网页</title >
<meta name ="keywords" content ="java培训,php培训,C#培训,羊肉、狗肉、猪肉" />
</head >
<body >
今天天气不错...
</body >
</html >
常用标签
html常用的标签:
<h1 > ~<h6 > 表示是一个标题
<p > 段落标签
<hr /> 水平线标签
<br /> 换行标签
<sub > 下标
<sup > 上标
<pre > 原样标签: 原样标签会保留空格和换行符。
<ol > <li > 有序的列表标签、
<ul > <li > 无序的列表标签。
项目列表标签(dl dt dd)
行内标签(span)
块标签<div > div标签的内容会独立占一行。
html的标签作用:用于描述一个网页的结构的。
如果需要操作数据的样式:通过标签的属性操作的。
标签的类型:
1. 有开始标签与结束标签。 <p > </p > 需要把网页的数据内容封装到标签中。
2. 开始标签与结束标签都是在一个标签体内的。 比如: <hr /> 功能单一不需要封装数据到标签中。
实体标签
媒体标签
<!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" />
<title > 无标题文档</title >
</head >
<marquee loop ="-1" scrollamount ="30" direction ="right" > <font size ="+6" color ="red" > 我飞起来了...</font > </marquee >
<body >
</body >
</html >
超链接
<!
<a > 超链接标签
a 标签常用的属性:
href : 用于指定链接的资源
target: 设置打开新资源的目标。 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源
file : file 协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的。
格式:
file :\\\f:\美女\1. jpg
a 标签的原理:
1. a 标签的href属性值如果是以http 开头的,那么浏览器会马上启动http 解释器去解释该网址,首先
会在本地机器去找一个hosts文件, 如果在hosts文件上该域名没有对应的主机,那么浏览器就去到对应的
dns服务器去寻找该域名对应的主机号。如果找到了对应的主机,那么该请求就会发给对应的主机。
2. 如果a 标签的href属性值没有以任何协议开头,那么浏览就会启动file 协议解释器去解释该资源路径。
3. 如果a 标签的href属性值并不是以http 开始,而且其他 的一些协议,那么这时候浏览器就回去到我们本地的注册
表中去查找是否有处理这种协议 的应用程序,如果有,那么马上启动该应用程序处理该协议。
邮件 的协议: mailTo
迅雷的协议: thunder
超链接标签的作用:
1. 可以用于链接资源。
2. 锚点点位.
1. 首先编写一个锚点 锚点的格式: <a name="锚点名字" > 数据</a >
2. 使用a 标签 的herf属性连接到锚点出。 href=”
图片
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" />
<title > 无标题文档</title >
</head >
<body >
<table border ="1px" align ="center" width ="400px" height ="300px" >
<tr >
<th colspan ="3" > 学生成绩</th >
</tr >
<tr >
<td rowspan ="2" > 张三</td >
<td > 语文</td >
<td > 98</td >
</tr >
<tr >
<td > 数学</td >
<td > 95</td >
</tr >
<tr >
<td rowspan ="2" > 李四</td >
<td > 语文</td >
<td > 88</td >
</tr >
<tr >
<td > 数学</td >
<td > 91</td >
</tr >
</table >
</body >
</html >
一个表单案例:
<!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" />
<title > 无标题文档</title >
</head >
<body >
<form action ="http://www.baidu.com" method ="post" >
用户名:<input name ="userName" type ="text" /> <br />
密码:<input name ="password" type ="password" /> <br />
性别: 男<input checked ="true" value ="man" name ="sex" type ="radio" /> 女<input name ="sex" value ="woman" type ="radio" /> <br />
来自的城市:<select name ="city" >
<option value ="BJ" > 北京</option >
<option value ="SH" > 上海</option >
<option value ="GZ" > 广州</option >
<option value ="SZ" > 深圳</option >
</select > <br />
兴趣爱好:java <input value ="java" name ="hobit" checked ="checked" type ="checkbox" /> javascript <input type ="checkbox" value ="javascript" name ="hobit" /> android <input value ="android" name ="hobit" type ="checkbox" /> <br />
大头照:<input name ="image" type ="file" /> <br />
个人简介:
<textarea name ="intro" rows ="10" cols ="30" > </textarea > <br />
<input type ="submit" value ="注册" />
<input type ="reset" value ="重置" />
</form >
</body >
</html >