前言:
在专业课上学过一点Dreamweaver和JSP的东西,平时也总是用网页,前段时间刚敲完牛腩里面也有一些关于html的东西,总是感觉对这个东西很模糊,所以总结一下!
Html基础:
HTML 是用来描述网页的一种语言。全称超文本标记语言 (Hyper Text Markup Language)
它不是一种编程语言,而是一种标记语言 (markup language),具有一套标记标签 (markup tag),html语言通过使用标记标签来描述网页!
html文本之所以称为超文本是因为它具有普通文本不具有的超链接功能,在浏览html文档时,可通过关键字来跳转界面
要让超链接可以正常工作,需要通过URL统一资源定位符来定位internet上的资源
URL由三部分组成:协议,主机名称,文件目录或文件名
例如:http://www.sunxin.org/vidio/vidio.asp
1. http:表示超文本传输协议
2. 访问主机名或域名www.sunxin.org
3. 文件位置:video目录下的video的asp文件
建立超链接 href=“URL” href用于指定链接的目标,目标的地址由URL定位
<a href="form.html">表单的例子</a> 当前目录下
<a href="../form.html">表单的例子</a> 上一级目录下
<a href="E:/JSPLesson/form.html">表单的例子</a> 本地的绝对路径
<a href="http://www.sunxin.org">孙鑫的个人网站</a>
html中嵌入图形:
GIF:不需要大量颜色的图片
JPEG:图片质量较高
<img src="URL" width=n height=n>
不指定高度会使用加载时的宽高
html中基本元素
HTML元素的四种形式(属性+内容+起止标记的组合)
1.空元素 <br>
2.带有属性的元素 <hr color="blur">
3.带有内容的元素 <tittle>http://www.sunxin.org</title>
4.带有内容和属性的元素 <font color="red">http://www.sunxin.org</font>
<html> //开始html文档
<head> //开始文档头部
<title> //开始文档标题
this is first page. //标题内容
</title> //结束文档标题
</head> //结束文档头部
<body> //开始文档体
hello world! //文档体内容
</body> //结束文档体
</html> //结束html文档
其他元素
<p> paragrahp段 align:段落的对齐方式 left center right justify
<br> link bread 换行
<hr> horizontal rule水平线 color属性:预定义颜色;16进制颜色值,颜色加#00(Red)00(Green)00(Blue)(十进制0~255)
<center></center> 文本居中显示
<hn align="#"> <hn>文档标题1~6依次减小
<font size=n color="clr"> </font> size字体大小 n(1~7)
<b></b> 文本加粗
<i></i> 文本斜体
特殊字符
特殊字符的引用方式有两种:字符引用和实体引用(&开始,;结束)
字符引用:&#十进制/十六进制;
实体引用:&助记符;(区分大小写)
列表 —建立数字编号的列表
<ol> start属性设置起始的序号
<li> value属性改变列表内编号顺序
type:编号系统的类型
表单
网页中重要的一个东西是表单,用来向服务提交请求,服务器将处理后的数据返回,通过浏览器将内容转为html文档来查看
表单元素+嵌入其中的控件
发送表单是所使用的http方法
<input type="type" name="name" size="size" value="value">
type:创建控件的类型
name:控件名称
size:表单中控件的初始宽度
value:指定控件的初始值
单行文本输入控件 | <type=“text”> |
提交按钮 | <type=“submit”> |
重置按钮 | <type=“reset”> |
口令输入控件 | <type=“password”> |
单选按钮 | <type=“radio”> |
复选框 | <type=“checkbox”> |
隐藏控件 | <type=“hidden”> |
列表框<select>元素 创建,列表框中的各个元素用<option> 提供 | |
多行文本输入控件 | <textarea name="name" rows="number of rows" cols="number of columns"></textarea> |
表单的例子
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form method="get" action="reg.jsp">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="user" value="游客" size="30"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0" checked>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="basketball">篮球
<input type="checkbox" name="interest" value="volleyball">排球
<input type="checkbox" name="interest" value="swim">游泳<br>
</td>
</tr>
<tr>
<td>最高学历:</td>
<td>
<select size="1" name="education">
<option value="" selected> <option>
<option value="高中">高中</option>
<option value="大学">大学</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</td>
</tr>
<tr>
<td align="center"> 个人简介:</td>
<td>
<textarea name="personal" rows="5" cols="30">个人简介</textarea><br>
<!--//可以删除<input type="hidden" name="id" value="001">-->
</td>
</tr>
<tr>
<input type="reset" value="重写">
<input type="submit" value="注册">
</tr>
</table>
</form></body>
</html>
表格–定义表格
<html>
<head><title>表格的例子</title></head>
<body>
<table border="1" align="center" bgcolor="#ffdddd">
<caption>2018年度期末考试成绩单</caption>
<tr align="center" valign="middle">
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr align="center" valign="middle">
<td>李四</td>
<td>99</td>
<td>55</td>
<td>88</td>
</tr>
<tr align="center" valign="middle">
<td>王五</td>
<td>98</td>
<td>78</td>
<td>67</td>
</tr>
</table>
</body>
</html>