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 |