一、HTML

一、HTML概述

HTML：Hyper Text Markup Language 超文本标记语言

超文本：比文本功能更加强大
标记语言：通过一组标签对内容进行描述的一门语言

HTML的语法和规范

HTML文件的扩展名是.html或者是.htm
HTML文件是由头和体组成
HTML这组标签是不区分大小写
HTML的标记通常是由开始标签和结束标签组成：<b>内容</b>

二、HTML标签

【HTML的字体标签】

<font>标签
<font 属性名=”属性值”>文字</font>
*   size:控制字体大小.最小1 最大7
*   color：控制字体颜色. 使用英文设置 ，使用16进制数设置
*   face：控制字体.

【HTML的排版标签】

<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>

【HTML的图片标记】

<img />
    src：图片的路径
    width：图片宽度
    height：图片的高度
    alt：图片提示
图片路径：
    分成相对路径和绝对路径
    相对路径:
    ./  :代表当前路径
    ../ :代表上一级路径

【HTML的列表标签】

无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>

有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>

【超链接标签】

<a>超链接</a>
    href：超链接跳转的路径
    target：打开方式
    _self：在自身页面打开
    _blank：打开一个新窗口

【HTML的表格标签】

表格标签：
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr> 
</table>

表格的属性：
    border  ：表格边框
    width   ：表格宽度
    height  ：表格高度
    align   ：水平方向对齐方式 left center right
    bgcolor ：背景色

【HTML的表单标签】

表单标签：
    需要提交的表单需要使用<form></form>括起来
    action：提交路径
    method：提交方式

    文本框:
    <input type=”text”/>
    name
    value
    size
    maxlength
    readonly

    密码框：
    <input type=”password”/>

    单选按钮：
    <input type=”radio”/>
    Checked：默认选中

    复选框
    <input type=”checkbox”/>
    Checked：默认选中

    下拉列表框
    <select><option></option></select>
    Selected：默认选中
    Multiple：全部显示

    文件上传项
    <input type=”file” name=”file”/>

    文本区
    <textarea name=”” cols=”” rows=””></textarea>

    提交按钮
    <input type=”submit” value=”注册”>

    重置按钮
    <input type=”reset” value=”重置”>

    普通按钮
    <input type=”button” value=”普通按钮”>

    隐藏字段
    <input type=”hidden” name=”id”/>

提交方式：
    GET ：默认值
    提交的数据都会在地址栏中进行显示
    提交的数据的时候是有大小的限制

    POST：
    提交的数据不会再地址栏中进行显示
    提交的数据没有大小限制

【HTML的框架标记】

<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：
* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径

示例：
步骤一：先将页面切分成上下两个部分。
步骤二：将下部分切分成左右两个部分。
步骤三：分别引入不同的页面。

框架.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <frameset rows="15%,*">
        <frame src="top.html" />
        <frameset cols="15%,*">
            <frame src="left.html" />
            <frame src="right.html" />
        </frameset>
    </frameset>
</html>

效果：

frameset.png

点击左侧的分类管理或商品管理，将数据放入到表格中显示到右侧区域中：
left.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2><a href="rygl.html" target="right">人员管理</a></h2>
        <h2><a href="xtgl.html" target="right">系统管理</a></h2>
    </body>
</html>