基础声明
1. 声明:<!DOCTYPE html>:代表当前是HTML5版本
2. 基础标签:<head>:定义编码格式,标题,文字显示格式
<body>:页面的内容
3. HTML标题:<h1>..</h1> (由h1到h6)
4. HTML段落:<p>...</p>
5. HTML链接:<a href=’http://www.baidu.com’>百度</a>
6. HTML图像:<img src=”imges/html.png”>
HTML元素
<br/>换行:单独一个标签
HTML属性
常用标签属性
1. <h1>:align对齐方式 例子:
<h1 align="center">标题</h1> 居中
Right 居右 left 居左 (默认是居左)
2. <body>:bgcolor背景颜色
<body bgcolor="aqua"> .... </body>
3. <a>:target规定在何处打开链接,是否在另一个页面打开
<a href="local.html" target="_blank">打开当前地址</a>
_blank:在一个另一个新页面打开
_parent:在本页面跳转
_self:在本页面跳转
_top:在本页面跳转
通用属性:
Class:规定元素的类名
Id:规定元素唯一ID
Style:规定元素的样式,放在头文件
Title:规定元素的额外信息
HTML格式化
<b></b>:加粗效果
<big></big>:定义大号字体
<em>:定义着重文字
<i>:定义斜体字
<small>:定义小号字
<strong>:定义加重语气
<sub>:定义下标字
<sup>:定义上标字
<ins>:定义插入字:文字下面有下划线
<del>:定义删除字
HTML样式:
标签:<style>:样式定义
<link>:资源引用
属性:
rel=”stylesheet”:外部样式表
type=”text/css”:引入文档的类型
margin-left:边距
三种样式表插入方法:
1.外部样式表:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
2.内部样式表:
<style type=”text/css”>
body {background-color:red}
p {margin-left:20px}
</style>
3.内联样式表:
<p style=”color:red”>
关于样式的操作放在头文件中
例子:
(1)外部样式表:引入css样式
Index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>标题h1</h1>
</body>
</html>
Style.css文件
h1{
color: red;
}
(2)内部样式表:
写在头文件中
<style type="text/css">
p{
color:darkgreen;
}
</style>
(3)内联样式表:在标签内部改变其style
<a style="color: chocolate">点击我跳转到百度</a>
HTML链接:
1. 链接数据:(1)文本链接
(2)图片链接
例子:
<a href="http://www.baidu.com">点击我</a> <!--文字链接-->
<a href="http://www.baidu.com"> <!--图片链接-->
<img src="/img/pic.png">
</a>
2. 属性
(1)href属性:指向另一个文档的链接
(2)Name属性:创建文档内的链接(常用于回到顶部)
例子:
<br/>
<a name="tips">hello</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#tips">跳转到hello</a>
3.
img标签属性
alt:替换文本属性
Width:宽
height:高
例子:<img src=”html.png” width=”100px” height=”100px” alt=”html5logo”>
写在头文件中
HTML表格:
标签:
<table>:定义表格:属性border=”(边框的宽度)”定义边框
<capiton>:定义表格标题
<th>:定义表格的表头
<tr>:定义表格的行
<td>:定义表格的单元
<thead>:定义表格的页眉
<tbody>:定义表格的主体
<tfoot>:定义表格的页脚
<col>:定义表格的列属性
1. 没有边框的表格
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
2. 表格中的表头
<body>
<table border="1">
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
3.
空的单元格:不去书写td
标签中的内容
4. 带有标题的表格
<body>
<table border="1">
<caption>重要表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
5.表格内的标签
<table border="1">
<tr>
<td>
表格1
</td>
<td>
表格2
</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
</ul>
</td>
<td>
我想吃了
</td>
</tr>
6.单元格的边距
<table border="1" cellpadding="10">
在table标签中定义属性cellpadding
7.单元格间距
<table border="1" cellspacing="10">
在table标签中定义属性cellspacing
8. 表格内的颜色和背景图片
颜色:<table border="1" cellspacing="10" bgcolor="#d2691e">
在table标签中定义属性bgcolor
图片:<table border="1" cellspacing="10" background="img/pic.png">
在table标签中定义属性background
HTML列表
标签
<ol>:有序列表
<ul>:无序列表
<li>:列表项
<dl>:列表
<dt>:列表项
<dd>:描述
例子:无序列表与有序列表进行对比
<body>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
</body>
结果:
1. 无序列表
使用标签:<ul>、<li>
属性:disc(实体圆)、circle(空心圆)、square(方块)
<ul type="square">
2. 有序列表
使用标签:<ol>、<li>
属性:A(以大写的ABCD来排序)、a(以小写的abcd来排序)、I、i、start(定义从几开始)
3. 嵌套列表
使用标签:<ul>、<ol>、<li>
例子:
<ul>
<li>宠物</li>
<ul>
<li>猫</li>
<li>狗</li>
</ul>
<li>人类</li>
<ul>
<li>英国人</li>
<li>中国人</li>
</ul>
<li>植物</li>
</ul>
效果:
4. 自定义列表:
使用标签:<dl>、<dt>、<dd>
例子:<dl>
<dt>HelloWorld</dt>
<dd>每一门新的语言都会打印一个HelloWorld</dd>
<dt>HelloWorld</dt>
<dd>每一门新的语言都会打印一个HelloWorld</dd>
<dt>HelloWorld</dt>
<dd>每一门新的语言都会打印一个HelloWorld</dd>
</dl>
效果: