<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
<head></head>中主要包括网页的基本信息
网页标题
元数据标签
<body></body>中主要包括网页内容
2.网页基本信息
a.DOCTYPE声明
<!DOCTYPE html"><html>
<head>
<meta charset=“utf-8" />
<title>无标题文档</title></head>
<body>
网页主体
</body>
</html><meta charset="gb2312”>
<meta name=“搜索关键字” content=“内容描述" />
二：HTML标签
1.标题标签
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
2.段落标签
<p>…</p>
3.换行标签<br/>
4.水平线标签<hr/>
5.注释<!-- 注释内容 -->
特殊符号
特殊符号 字符实体 示例
空格 <a href="#">百度</a> | <a href="#">新浪</a>
大于号(>) > 如果时间>晚上6点，就坐车回家
小于号(<) < 如果时间<早上7点，就走路去上学
引号(") " W3C规范中，HTML的属性值必须用成对的"引起来
版权符号 © ©
6.图像标签
常见的图像格式JPG
,GIF,
PNG,
BMP
<img src="path" alt="text" width="x" height="y" />
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
7.链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
<a href="hetao.html" target="_blank">无漂白薄皮核桃</a><a href="hetao.html" target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>
超链接使用场合
1.页面间链接:从一个页面链接到另外一个页面
2.功能性链接
三：HTML列表
1.无序列表
<ul>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
ul标签的type属性取值
disc 项目符号显示为实体圆心,默认值
square 项目符号显示为实体方心
circle 项目符号显示为空心圆
2.有序列表
<ol>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
ol标签的type取值
1 使用数字作为项目符号
A/a 使用大写/小写字母作为项目符号
I/i 使用大写/小写罗马数字作为项目符号
3.定义列表
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd></dl>
4.列表小结
类型 说明 项目符号
无序列表 1.以<ul>标签来实现
通过type属性设置项目符号disc（默认）、square和circle
2.以<li>标签表示列表项
有序列表 1.以<ol>标签来实现 通过type属性设置项目顺序
1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）
2.
以<li>标签表示列表项
定义类表 1.以<dl>标签是实现
无项目符号和显示顺序
2.以<dt>标签定义列表项
3.以<dd>标签定义内容
5.表格语法
<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
6.对齐方式
表格对齐方式默认对齐、居中对齐(align=center
)、左对齐、右对齐
单元格对齐方式
水平对齐方式、垂直对齐方式
属性 值 说明
align水平对齐方式 left 左对齐
center 居中对齐
right 右对齐
valign
垂直对齐方式 top 顶端对齐
middle 居中对齐
bottom 底端对齐
baseline 基线对齐
7.表格的跨列
<table>
<tr>
<td colspan="n">单元格内容</td>//n表示所跨的列数
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
表格的跨行
<table >
<tr>
<td rowspan="n"> </td>
//n表示所跨的行数
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>四：表单标签
表单(form)是用来接收用户信息的标签
表单语法：
<form method=“post” action=“请求服务器端路径">
<p> 名字：<input name=“username" type="text" > </p>
<p> 密码：<input name=“pwd" type="password" > </p>
<p>
<input type="submit" value="提交">
<input type=“reset” value=“重置">
</p>
</form>
表单元素格式：
<input type="text" name="fname" value="text">
属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name 指定表单元素的名称。
value 元素的初始值。type 为 radio时必须指定一个值
size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text 或 password 时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中
表单元素
文本框：
<input type="text" name="userName" value="用户名" maxlength="20" >
密码框：
<input type="password " name="pass" size="20" >
单选按钮：
<input name="gen" type="radio" value=“boy" checked="checked" >男
<input name="gen" type="radio" value=“girl" >女
复选框：
<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戏
下拉列表框：
<select name="列表名称">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
按钮：<input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮"/>
图片按钮：<input type="image" src="images/login.gif" />
多行文本域：
<textarea name="showText" cols="x" rows="y">
文本内容
</textarea >
文件域：
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
表单元素高级属性：只读 readonly="true"
禁用 disabled="true"原文地址：http://blog.51cto.com/13507330/2085759
