一、HTML 介绍

1. 什么是 HTML？

超文本标记语言（Hyper Text Markup Language）：
  超文本：比普通文本功能更加强大,页面内可以包含图片、链接等非文字内容。
  标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！例如：<a>www.baidu.com</a>


2. HTML 怎么使用？

语法和规范：
· HTML文件不需要编译，直接使用浏览器阅读即可
· HTML文件的扩展名是*.html或*.htm（推荐使用html）
· HTML结果都是由标签组成
  · 标签名预先定义好的，我们只需要了解其功能即可。
  · 标签名不区分大小写
  · 通常情况下标签由开始标签和结束标签组成。例如：<a></a>
  · 如果没有结束标签，建议以/结尾。例如：<img />
· HTML结构包括两部分：头head和体body


3. HTML相关标签的学习

3.1标题标签

标题标签使用<hn></hn>,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示
特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>标题标签</title>
  </head>
  <body>
    <h1>公司简介</h1><br />
    <h2>公司简介</h2><br />
    <h3>公司简介</h3><br />
    <h4>公司简介</h4><br />
    <h5>公司简介</h5><br />
    <h6>公司简介</h6><br />
    <h100>公司简介</h100>
  </body>
</html>


注释和换行：
<!--注释内容-->
快捷键：ctrl+/
<br /> 插入单个换行


3.2水平线标签

水平线标签：<hr />
size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色


HTML_h5

3.3 段落标签

段落标签：<p></p>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>段落标签</title>
  </head>
  <body>
    <p>
      加油，程序员。
    </p>
    <p>
      这是段落标签！
    </p>
  </body>
</html>


3.4 字体标签

字体标签使用<font></font>
必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>字体标签</title>
  </head>
  <body>
    <font color="#0000FF" size="1" >大小为1的蓝色字体</font><br />
    <font color="#0000FF" size="3">大小为3的蓝色字体</font><br />
    <font color="#0000FF" size="4">大小为4的蓝色字体</font><br />
  </body>
</html>


HTML_超链接_02

3.5格式化标签

<b> 粗体
<i> 斜体


HTML_百度_03

实例：网站信息显示页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网站信息显示页面</title>
  </head>

  <body>
    <!--1.创建一个标题标签-->
    <h2>个人简介</h2>
    <!--2.创建一条水平线标签-->
    <hr />
    <!--3.分别创建4个段落标签-->
    <p><font color="red">“oneboy”</font>你好，<b>我是onesun</b>，很高兴认识你。<i>Hello</i>,I am onesun,nice to meet you.</p>
  </body>
</html>


3.6图片标签

<img> 在html页面中引用一张图片
· src ：指定需要显示图片的URL（路径）。
· alt ：图片无法显示时的替代文本。
· width ：设置图像的宽度。
· height ：设置图像的高度。


HTML_html_04

3.7列表标签

· <ol> 定义有序列表
  type 列表类型，取值:A、a、I、i、1 等
· <ul> 定义无序列表
  type 符号的类型，取值：disc实心圆、square方块、circle空心圆
· <li> 定义列表项，是<ol>或<ul>的子标签
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>列表</title>
  </head>
  <body>
    <!-- 有序列表 -->
    <ol start="1" reversed="reversed" type="a">
      <li>CSDN</li>
      <li>百度</li>
      <li>京东</li>
    </ol>
    <!-- 无序列表 -->
    <ul type="square">
      <li>CSDN</li>
      <li>百度</li>
      <li>京东</li>
    </ul>
  </body>
</html>


3.8超链接标签

<a> 是超链接标签，是在html页面提供一种可以访问其他位置的实现方式，
属性：
  · href ：用于确定需要显示页面的路径(URL)
  · target ：确定以何种方式打开href所设置的页面，常用取值：_blank、_self等
    _blank 在新窗口中打开href确定的页面
    _self 默认。使用href确定的页面替换当前页面
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
  </head>
  <body>
    <a href="www.baidu.com" target="_blank">百度一下！</a>
  </body>
</html>


3.9表格标签

HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
· <table> 是父标签，相当于整个表格的容器
  border 表格边框的宽度
  width 表格的宽度
  cellpadding 单元边沿与其内容之间的空白
  cellspacing 单元格之间的空白
  bgcolor 表格的背景颜色
· <tr> 标签用于定义行
· <td> 标签用于定义表格的单元格（一个列）
  colspan 单元格可横跨的列数
  rowspan 单元格可横跨的行数
  align 单元格内容的水平对齐方式，取值：left左、right右、center居中
  nowrap 单元格中的内容是否折行
· <th> 标签用于定义表头。单元格内的内容默认居中、加粗。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表格的操作</title>
  </head>
  <body>
    <!--cellspacing:设置边框与边框的间距，cellpadding:设置的是边框与内容的间距-->
    <table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
      <tr>
        <td colspan="2" align="center" width="250px" height="50px">
          <img src="../../img/1.jpg" height="100%" width="100%"/>
        </td>
        
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>
        <td>21</td>
        <td colspan="2" rowspan="2" align="center">
          <table border="1px" align="center" width="100%" height="100%">
            <tr>
              <td>11</td>
              <td>12</td>
              <td>13</td>
            </tr>
            <tr>
              <td>21</td>
              <td>22</td>
              <td>23</td>
            </tr>
            <tr>
              <td>31</td>
              <td>32</td>
              <td>33</td>
            </tr>
          </table>
        </td>
        
        <td>24</td>
      </tr>
      <tr>
        <td>31</td>
        
        
        <td rowspan="2" align="center">34</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        
      </tr>
      
    </table>
  </body>
</html>


HTML_h5_05

3.10框架标签

<frameset> 标签，是多个窗口页面整合在一起在一个集合（框架集）。每一个页面（框架）都是单独文档，
需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，
使用 cols 确定列数，使用 rows 确定行数。多个<frameset>可以嵌套使用。
  · <frameset>和<body>两个不能共存
  · rows 属性和 cols 属性的取值：值1,值2,值3,...  一个值表示一行（列），多值使用逗号隔开，
    值可以是10px、10% 等，最后一个值如果不想计算可以使用 * 匹配剩余量。
<frame>标签，用于设置<frameset>框架集中的一个页面（框架）
  · src 属性：确定页面的路径
  · noresize 属性：框架分隔先不能移动
  · target 属性：确定需要显示的页面在何处显示


实例：网站后台系统显示页面.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网站后台系统显示页面</title>
  </head>
  <frameset rows="20%,*">
    <frame src="top.html" />
    <frameset cols="20%,*">
      <frame src="left.html" />
      <frame name="right" />
    </frameset>
  </frameset>
</html>


top.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <font size="7">欢迎XXXX进入后台管理系统</font>
  </body>
</html>


left.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <a href="right.html" target="right">会员管理</a><br /><br />
    <a href="#">品牌管理</a><br /><br />
    <a href="#">商品管理</a><br /><br />
    <a href="#">分类管理</a>
  </body>
</html>


right.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    所有用户信息、
  </body>
</html>