html基础
Html基础知识
认识Html
1.html是一种超文本标记语言，有自己的一套语法规则
2.html文档由元素组成，而元素定义了文本和图形在html文档中的结构
3.html元素使用html标记定义，标记在一对尖括号（<>）中，如举例1
4.html文档拓展名：.html .htm(这一种拓展名为了支持比较老的服务器，他们支持程序拓展名为3位)或者.xhtml（严格的html格式，有开头必有结尾，否则会报错）
html文档结构
1.所有的html文档都有三格个文档级元素：html、head、body
举例1：
<!doctype html> <!--定义文档格式为html-->
<html> <!--根标签-->
<head> <!--head元素，标记起点又称开始标记或打开标记-->
<title>这是一个标题</title>
<meta http-equiv="content-type" content="text/thml;charset=utf-8"> <!--定义编码格式-->
</head> <!--head元素，标记结尾又称结束标记或关闭标记-->
<body> <!--body元素，标记起点-->
helo word！....这是网页上显示的内容......
</body> <!--body元素，标记结束-->
</html>
2.定义正文标题：<h>标签
举例2：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/thml;charset=utf-8">
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
结果：
标题1
标题2
标题3
标题4
标题5
标题6
3.段落标签：<p>标签
举例2：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/thml;charset=utf-8">
</head>
<body>
<p>这是一个段落1</P> <!--段与段之间有缩进-->
<p>这是一个段落2</p>
</body>
</html>
结果：
这是一个段落1
这是一个段落2
4.定义列表： 1. 有序列表：ol定义
2. 无序列表：ul定义
3. 定义列表：dl定义
举例3：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/thml;charset=utf-8">
</head>
<body>
<p>这是一个无序列表</P>
<ul>
<li>我是第一</li>
<li>我是第二</li>
<li>我是第三</li>
</ul>
<p>这是一个有序列表</p>
<ol>
<li>我是第一</li>
<li>我是第二</li>
<li>我是第三</li>
</ol>
<p>这是一个定义列表</p>
<dt>cat</dt>
<dd>i can say miaomiaomiao</dd>
<dt>dog</dt>
<dd>i can say wangwang</dd>
</body>
</html>
结果：
这是一个无序列表
- 我是第一
- 我是第二
- 我是第三
这是一个有序列表
- 我是第一
- 我是第二
- 我是第三
这是一个定义列表
cati can say miaomiaomiaodogi can say wangwang
4.按钮（button定义），超链接（a定义），锚链接（a定义）
举例4：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/thml;charset=utf-8">
</head>
<body>
<button>这是一个按钮</button>
<a href="https//:www.baidu.com"> 点我链接百度</a>
<a href="#t1">点我跳转到本页的连我</a> <!--锚链接和id属性配合使用，会跳到相同id值的地方-->
<p id="#t1">连我</p>
</body>
</html>
结果： 点我链接百度 点我跳转到本页的连我
连我
5.表格：table 行--tr;列--td；合并列单元格--colspan="n";合并行单元格--rowspan="n"(n表示合并的单元格数)
举例4：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/thml;charset=utf-8">
</head>
<body>
<table border="1" cellspacing="0"> <!--border设置边框，cellspacing设置单元格边框填充-->
<th colspan="6">成绩统计表</th> <!--第一行：标签th设置标题，合并6列-->
<tr> <!--第二行：-->
<td rowspan="4">class:j121</td> <!--第1列：合并4行-->
<td>name</td> <!--第2列：name-->
<td>java score</td> <!--第3列：java score-->
<td>c++ score</td> <!--第4列：c++ score-->
<td>java average scor</td> <!--第5列：java average scor-->
<td>c++ average scor</td> <!--第6列：c++ average scor-->
</tr>
<tr> <!--第三行：-->
<td>zhangsan</td> <!--第2列：zhangsan-->
<td>60 score</td> <!--第3列：java score 60-->
<td>59 score</td> <!--第4列：c++ score 59-->
<td rowspan="2">java average scor</td> <!--第5列：合并3行-->
<td rowspan="2">c++ average scor</td> <!--第6列：合并3行-->
</tr>
<tr> <!--第四行：-->
<td>lisi</td> <!--第2列：lisi-->
<td>80 score</td> <!--第3列：java score 80-->
<td>88 score</td> <!--第4列：c++ score 88-->
</tr>
</table>
</body>
</html>
结果：
| 成绩统计表 | |||||
|---|---|---|---|---|---|
| class:j121 | name | java score | c++ score | java average scor | c++ average scor |
| zhangsan | 60 | 59 | |||
| lisi | 80 | 88 | |||
