首页 > 代码库 > HTML基础笔记
HTML基础笔记
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="http://www.mamicode.com/url地址" target="_blank">链接的描述</a>
target="_blank"在一个新的空白的页面打开
target="_self"在当前窗口打开（默认的）
b、使用图片作为链接
<img src="http://www.mamicode.com/图片地址" width="" height="" border=""/>
c、使用热点
<img XXXX usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,1,1,1",href="http://www.mamicode.com/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="http://www.mamicode.com/#top">to Top</a>
e、发送邮件
<a href="mailto:邮箱地址?subject=hello"></a>
f、链接中的伪样式（css中再讲）
（5）列表
a、无序列表
<ul>
<li><a href="http://www.mamicode.com/test.html">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<!--#表示当前页面-->
<li>3</li>
</ul>
b、有序列表
<ol>
<li><a href="http://www.mamicode.com/test.html">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<li>3</li>
</ol>
c、列表嵌套
<ul>
<li><a href="http://www.mamicode.com/test.html">item1</a></li>
<ul>
<li><a href="http://www.mamicode.com/#">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：扩展的超文本标记语言
HTML基础笔记