基础声明
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><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>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>效果：
3458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
