html基础
(1)什么是html?超文本标记语言
用于开发网页的语言,由浏览器解释执行
(2)html文件的基本结构
<html>
<head>
<title></title>
<!--用于模拟http消息头-->
<!--比如以下消息头的作用,是告诉浏览器,返回的是一个html,并应该以utf-8的编码来显示该页面-->
<!--html文件保存的编码应该与meta声明的编码一致-->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--引入脚本-->
<script>
<!--定义样式-->
<style>
<!--引入外部样式-->
<link>
</head>
<body>
<!--页面显示的数据-->
</body>
</html>
(3)web开发标准
w3c建议,开发一个页面,应该这样设计:页面的结构(包括了数据),由html文档来负责;
页面的外观,由css文档来负责;
页面的行为,由javascript文档来负责。
(4)链接
a、基本使用:<a href="url地址" target="_blank">链接的描述</a>
target="_blank"在一个新的空白的页面打开
target="_self"在当前窗口打开(默认的)
b、使用图片作为链接
<img src="图片地址" width="" height="" border=""/>
c、使用热点
<img XXXX usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,1,1,1",href="url地址">
</map>
当shape=“rect”(矩形)时,coords的值为左右个顶点的值,当shape=“circle” 圆形时,一个坐标一个半径长度
d、使用锚点:再用一个页面内部跳转
<a name="top"></a>
举例:
<a name="top">some data...</a>
<div style="height:900px;"></div>
<a href="#top">to Top</a>
e、发送邮件
<a href="mailto:邮箱地址?subject=hello"></a>
f、链接中的伪样式(css中再讲)
(5)列表
a、无序列表
<ul>
<li><a href="test.html">1</a></li>
<li><a href="#">2</a></li>
<!--#表示当前页面-->
<li>3</li>
</ul>
b、有序列表
<ol>
<li><a href="test.html">1</a></li>
<li><a href="#">2</a></li>
<li>3</li>
</ol>
c、列表嵌套
<ul>
<li><a href="test.html">item1</a></li>
<ul>
<li><a href="#">item2</a></li>
<li>item3</li>
</ul>
<li>item3</li>
</ul>
(6)表格
a、基本使用:<tr>:行 <td>;列
<table border="3px" width="40%" cellpadding="3" cellspacing="10">
<tr>
<td align="center">id</td>
<td>name</td>
<td>sal</td>
</tr>
<tr>
<td>001</td>
<td>java</td>
<td>20.00</td>
</tr>
</table>
border:边框的宽度
cellpadding:单元格里面的数据与单元格边框之间的距离
cellspacing:单元格之间的距离
width:50%或者500,宽度
align:left、center、right,水平位置
valign:top、middle、bottom ,垂直位置
b、不规则的表格
cospan:跨列合并
rowspan:跨行合并
举例:
<table border="3px" width="40%" cellpadding="3" cellspacing="0">
<tr>
<td colspan="2" align="center">单元格1</td>
</tr>
<tr>
<td rowspan="2" align="center" valign="top">单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
</tr>
</table>
c、表格的另一种写法:
<table>
<caption>标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
<tbody></tbody>
</table>
thead:表头,0/1
tfoot:表脚,0/1
fbody:表体,1/n
d、表格可以嵌套
<table border="3px" width="40%" cellpadding="3" cellspacing="0">
<tr>
<td>abc</td>
<td>abc2</td>
</tr>
<tr>
<td>abc3</td>
<td>
<table border="1" width="80% cellpadding="3" cellspacing="0">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</td>
</tr>
</table>
(7)表单:用于收集用户的信息,比如登陆表单,可以让用户输入用户名、密码,这些信息会提交给服务器做验证
<form>
<input type="text"/>
</form>
input标记:
type="text":文本输入框
type="submit":提交按钮
type="reset":重置按钮
type="password":密码输入框
type="radio":单选
type="checkbox":多选
type="file":上传文件(给form添加一个属性 enctype=”multipart/form-data“)
type="hidden":隐藏域
非input标记:
<textarea>:多行文本输入框
<select>:下拉列表/多选框
(8)框架
什么是框架:用来将一个窗口划分成多个子窗口
a、<frameset>,<frame>
注意:frameset不能写在<body>里,可以嵌套使用。
b、<iframe>
可以使用在<body>里,表示嵌入一个子窗口
(9)其他标记
<h1>...<h6>:标题
行内标记:不单独占一行的标记----<span></span>、<strong></strong>
块级标记:另起一行的标记----<h1>...<h6>、<table>、<form>、<p></p>、<div>
(10)实体
在html页面中,出现了空格、>、<、"、& 应该用实体来代替
空格
> >
< <
" "
& &
(11)html/xhtml:
xhtml:扩展的超文本标记语言