JavaEE_day01_html初识

一、什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、HTML结构：

由标签构成，并且是成对出现的，后缀名是.html，用浏览器打开

<html>
    <head
        <title>标题</title>
    </head>
    <body>
             内容
        </body>
</html>

三、HTML标签分类

标题标签：
HTML 标题是通过 <h1>到<h6>等标签进行定义的，大小依次变小

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落标签:
HTML 段落是通过<p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

链接标签：
HTML 链接是通过<a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

属性：在href 属性中指定链接的地址
target 你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

图片标签：
HTML 图像是通过<img> 标签进行定义的。

![](url)

属性：src表示图片所在的地址，分为绝对路径和相对路径；
width表示宽度，height表示长度。

水平线标签：
<hr /> 标签在 HTML 页面中创建水平线。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

注释：
快捷键：ctrl+/

<!-- This is a comment -->

换行标签：
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br /> 标签：

<p>This is<br />a para<br />graph with line breaks</p>

文本格式化标签：

字体格式化.png

9.表格标签：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

属性：border:边框的大小
cellspacing：内容与边框的距离
cellpadding:边框与边框的距离
bgcolor:单元格背景色
align:单元格中内容显示方式，如center居中
rowspan:合并行单元格
colspan:合并列单元格

10.列表标签：
有序列表：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

无序列表:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

11.框架集标签：
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

案例：点击会员管理，在右侧显示用户信息

网站后台显示页面.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="5">欢迎XXX进入后台管理系统</font>
    </body>
</html>

left.html

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

right.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        这里显示的是所有用户信息。。。
    </body>
</html>