HTML简单入门(一)
HTML的基本标签
HTML注释
用于注释HTML源码，不在HTML效果中展示。
只能在源码中看到，页面展示效果中是没有
格式：<!--HTML注释内容 -->
标题标签<h1></h1>
标题标签，用于展示效果中划分标题
其中<h1>最大，<h6>最小
水平线标签<hr />
<hr />标签在 HTML 页面中创建一条水平线。水平分隔线
<!-- 属性: color 改变颜色 你可以使用具体的英文颜色
十六进制的颜色标号
align 更改位置
size 高度
css -- 样式 -- 属性
width -- 改变宽度
-->
字体标签<font>
字体标签，用于展示效果中修饰文字样式
<font 属性名=”属性值”>文字</font>
- size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效
- color：控制字体颜色. 使用英文设置（例如：red,blue…）也可以使用一个十六进制符号来定义（例如：#000000(黑色),#FF0000(红色),#00FF00(绿色),#0000FF(蓝色)…），我们可以通过软件从图片上获取，例如ColorPix。在实际开发中，UI设计师会告诉我们具体的颜色符号是多少。
- face：控制字体类型。只能设置系统字库中存在的字体类型
效果：
换行标签<br/>
HTML源码中换行，浏览器解析时会自动忽略。
换行标签，用于展示效果中换行
段落标签<p></p>
段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
- align:段落内容的对齐方式
默认是left， 内容居左
Right 右
Center 居中
图片标签
1. <img/>
用于在页面效果中展示一张图片。
- src：指明图片的路径。（必有属性）
图片路径的写法：
①内网路径：
绝对路径：文件在硬盘上的具体位置。【不建议使用】
例如：C:\ JavaWeb001_html\img\c_1.jpg
相对路径：从引入者所在目录出发。【建议使用相对路径】
例如：../img/c_1.jpg
../表示上一层目录
./表示当前目录
②互联网路径：
必须前面加上http://
例如：http://www.baidu.com/xxx.jpg
- width：图片宽度
- height：图片的高度
宽度和高度的设置：
默认单位是px，像素。例如：width=”400” 其实设置的是 width=”400px”。固定设置方式
百分比设置。例如：width=”50%”。 是父标签的百分比。 动态改变的。
特殊字符标签
列表标签
无序列表标签<ul></ul>
ul - li
无序列表标签，用于在效果中定义一个无序列表
<li></li>标签
列表条目项标签，用于在效果中定义一个列表的条目
我们一起来看一下如何使用
效果：
在这里我们可以发现无序列表默认是黑色圆
我们也可以通过type属性来设置它的样式：
有序列表标签<ol></ol>
l - li
有序列表标签，用于在效果中定义一个有序列表
<li></li>标签
列表条目项标签，用于在效果中定义一个列表的条目
我们一起来看一下如何使用
效果：
超链接标签
<a></a>
超链接标签，用于在效果中定义一个可以点击跳转的链接
- href：超链接跳转的路径 (必有属性)
内网本机路径：相对路径和绝对路径
互联网路径：http://地址
本页：默认跳转到本页
超链接正常工作：①a标签中必须有内容
②a标签必须有href属性
超链接标签默认跳转当前界面，我们也可以通过属性target来设置页面跳转的状态。
a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片
表格标签
<table><tr><td>
HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1）编号、姓名、性别、年龄
2）设置边框1px
3）单元格边沿与其内容之间的空白（cellpadding）为5px
4）单元格之间的空白（cellspacing）为5px
5）背景颜色（bgcolor）为绿色
6）宽度400px，高度300px。
-->
<table border="1px" cellpadding="5px" cellspacing="5px" bgcolor="yellow" width="400px" height="300px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr align="right">
<td>2</td>
<td>李四</td>
<td>女</td>
<td>24</td>
</tr>
</table>
</body>
</html>
效果：
其他标签
<span></span>
<div></div>
Div和span的应用场景：