HTML
HTML(Hyper Text Markup Language),即超文本标记语言。
超文本(文字+图片+音频+视频+……)
标记语言(浏览器看到什么样的标记就会做出什么样的反应)
HTML直接用浏览器来执行。
HTML经常用于编写web动态页面
这里介绍一个HTML的网站,这里的HTML还是比较全面的,对于入门学习很不错:HTML教程
HTML标记语言的特点
标记(标签或元素)的形式
双标签
<元素名>内容</元素名>
如:<font>文字</font>
单标签
<元素名/>
如:<img src=“a.jpg”/>
<元素名>
如:<br/>
HTML页面的基本结构
<html> //HTML起始标签
<head> //页面头部起始标签
<title>网页标题</title> //页面标题
</head> //页面头部结尾标签
<body> //页面正文起始标签
网页正文
</body> //页面正文结束标签
</html>
回车键和空格键在HTML中显示时不起作用,为使代码清晰,建议不同的标记之间回车编写,以便于代码的阅读
HTML编辑时不是所见即所得
HTML不区分大小写
缩进用tab,不要使用空格
HTML中注释格式为
<!--需要注释的内容-->
空格标签
标题标签
<hn></hn>
n从1到6, 标题从大到小,超过6的按照6级标题显示
水平线标签,即出现一根横划整个页面的横线
<hr/>
段落标签,开启一个段落
<p></p>
字体标签
<font></font>
例如:<font size="7" color="#00FFFF" face="楷体">HTML</font>
- 属性size表示字体的大小,有1至7逐渐递增
- 属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000
- 属性face表示字体
图片标签
<img />
例如:<img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!">
- src:指的是显示的图片的路径
- width:指定图片的宽度,取值可以是像素值,也可以是占页面的百分比
- height:指定图片的高度,取值可以是像素值,也可以是占页面的百分比
- alt:当图片无法正常显示的时候给出的提示信息
表格标签
<table>
<tr>
<td>
</td>
</tr>
</table>
tr标签标示行
td标示单元格
table属性border表示边框
table属性bordercolor表示边框颜色,除了能使用颜色的英文表示,还通常使用RGB三原色表示法,例#FF0000
table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%)
table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%)
table属性cellpadding表示表格边与内容的距离
table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离
td属性colspan表示单元格跨列数目
td属性rowspan表示单元格跨行数目
td属性align定义内容在水平方向的排布:left center right
td属性valign定义内容在竖直方向的排布:bottom middle top
form表单
form表单是用户可以填写信息提交服务器的控件。form表单包含如下控件:
<input type=“text”/> <!– 可编辑文本域 -->
<input type=“password”/> <!– 密码框 -->
<input type=“checkbox”/> <!– 多选框 -->
<input type=“radio”/> <!– 单选框 -->
<input type=“button”/> <!– 按钮 -->
<input type=“file”/> <!– 文件浏览 -->
<textarea cols=“50” rows=“4”> </textarea> <!– 文本域-->
<select> <option></option></select> <!– 下拉控件-->

Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<BODY>
<!--此部分为注释,并不会出现
1、html编辑时不是所见即所得;
2、HTML不区分大小写
3、段落标签<p />开启下一段,或者使用<p></p>
4、换行标签<br />
5、标题标签 H1——H6 依次递减
6、缩进用TAB,不要使用空格
6、字体标签 <font></font>
属性size表示字体的大小,由1至7逐渐递增,
属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000
属性face表示字体
eg:<font color="red" size="5" face="楷体">HTML</font>
7、水平线标签<hr/>
-->
<h1>HTML语言经常用于编写Web静态页面</h1>
<h2>HTML语言经常用于编写Web静态页面</h2>
<h3>HTML语言经常用于编写Web静态页面</h3>
<h4>HTML语言经常用于编写Web静态页面</h4>
<h5>HTML语言经常用于编写Web静态页面</h5>
<h6>HTML语言经常用于编写Web静态页面</h6>
<hr/>
<font size="7" color="#00FFFF" face="楷体">HTML</font>
<br/>
Java程序设计教程
<!--段落标签-->
<p>
Textbook for Programming in Java
</p>
<br/>
<!--表格标签<table><tr><td></td> </tr></table>
<tr>标签标示行
<td>标签标示单元格
table属性border表示边框
table属性bordercolor表示边框颜色
table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%)
table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%)
table属性cellpadding表示表格边与内容的距离
table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离
td属性colspan表示单元格跨列数目
td属性rowspan表示单元格跨行数目
td属性align定义内容在水平方向的排布:left center right
td属性valign定义内容在竖直方向的排布:bottom middle top
表示空格
-->
<table border="1" bordercolor="#00FFFF" cellspacing="1px" cellpadding="0px" height="250" width="100%">
<tr>
<td>时间\星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
</tr>
<tr>
<td rowspan="2" align="center">上午</td><td>数据结构</td><td>编译原理</td><td>java</td><td>数据库原理</td><td>编译原理</td>
</tr>
<tr>
<td>休息</td><td>休息</td><td>操作系统</td><td>计算方法</td><td>休息</td>
</tr>
<tr>
<td colspan="6"> </td> <!--空格跨6列-->
</tr>
<tr>
<td rowspan="2" align="center">下午</td><td>休息</td><td>汇编语言</td><td>数据结构</td><td>休息</td><td>休息</td>
</tr>
<tr>
<td>数据库原理</td><td>休息</td><td>计算方法</td><td>休息</td><td>操作系统</td>
</tr>
</table>
<br/>
<br/>
<!--表单标签
Form表单是用户可以填写信息提交服务器的控件。Form表单包含如下控件:
<input type="text"/> 可编辑文本域
<input type="password"/> 密码框
<input type="checkbox"/> 多选框
<input type="radio"/> 单选框
<input type="button"/> 按钮
<input type="file"/> 文件浏览
<textarea cols="50" rows="4"></textarea>
<select> <option></option></select>
-->
<table border="1" bordercolor="blue" cellspacing="0px" cellpadding="0px" width="100%">
<tr>
<td align="right">用户名:</td>
<td><input type="text" name="userName" /> </td>
</tr>
<tr>
<td align="right">密 码:</td>
<td><input type="password" name="passwd"/> </td>
</tr>
<tr>
<td align="right">专 业:</td>
<td>
<select>
<option>--请选择--</option>
<option>软件工程</option>
<option>计算机科学与技术</option>
<option>通信工程</option>
<option>电子信息</option>
</select>
</td>
</tr>
<tr>
<td align="right">性 别:</td>
<td><input type="radio" name="gender" />男 <input type="radio" name="gender" />女</td>
</tr>
<tr>
<td align="right">兴 趣</td>
<td><input type="checkbox" name="favorate" />羽毛球 <input type="checkbox" name="favorate" />篮球<input type="checkbox" name="favorate" />乒乓球</td>
</tr>
<tr>
<td align="right">
介 绍:
</td>
<td>
<textarea rows="3" cols="30"></textarea>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="提交" />
</td>
<td align="center">
<input type="reset" value="重置"/>
</td>
</tr>
</table>
<br/>
<br/>
<!--图片标签
<img />
src:指的是图片显示的路径
width:指定图片的宽度,取值可以是像素值,也可以是百分比
height:指定图片的高度,取值可以是像素值(px),也可以是百分比
alt:当图片无法正常显示的时候给出的提示信息
-->
<img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!">
<br/>
</BODY>
</html>


