HTML及简单标签介绍

什么是HTML：

HTML 语言是一种超文本的标记语言,简单来讲就是构建一套标记符号和语法规则,将所要显示出来的文字、图象、声音等要素按照一定的标准要求排放，形成一定的标题、段落、列表等单元。

HTML的基本格式

<html>

    <head>

        <title>我的代码 </title>

    </head>

    <body>

        我的代码

    </body>

</html>

解释：

<html></html > 这个标签对告诉浏览器这个文件是HTML文档

<head></head> 这个标签对中的内容是文档的头部信息，说明一些文档的基本情况，如文档的标题等

<body></body> 这个标签对中的内容是HTML文档的主体部分

<title></title>这个标签对中的内容为网页的标题，只可以编写在<head></head>标签对之间

HTML标题

<h1 align="center">1级标题</h1>

<h2 align="left">2级标题</h2>

<h3 align="right">3级标题</h3>

<h4 align="justify">4级标题</h4>

<h5>5级标题</h5>

<h6>6级标题</h6>

在HTML文档中，<hX></hX>标签可以定义不同显示效果的标题，X表示标题的级数，取值范围为1~6，X越小，标题字号越大。

<hX>可以使用属性align，用于设置标题文字的对齐方式

HTML段落

<p align="center">

        这个是段落介绍这个是段落介绍这个是段落介绍这个是

        </p>

        <p align="left">

        这个是段落介绍这个是段落介绍这个

        </p>

        <p align="right">

        这个是段落介绍这个是段落

        </p>

<p></p>标签用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。

<p>标签可以有多种属性，例如align属性控制其内容的对齐方式

HTML预定义标签

           墙角数枝梅，

           凌寒独自开。

           遥知不是雪，

           为有暗香来

          <pre>

            兰陵美酒郁金香

               玉碗盛来琥珀光

             但使主 人能醉客

            不知何处是他乡

            </pre>

显示效果图：

在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对

HTML格式排版标签

换行: 该标签强制文本换行，但不会在行与行之间留下空行。

分割线: 该标签在网页中加入一条横跨网页的水平线，具有多种属性用于设置水平线的宽度、长度及显示效果等。

<br>

<hr align="center" width ="600" size ="9" color ="blue">

size属性：设置水平线的粗细，默认单位是像素。

width属性：设置水平线的宽度，默认单位是像素，也可以使用对屏幕的百分比表示。

noshade属性：该属性不用赋值，而是直接加入标签即可使用，它用来取消水平线的阴影（不加入此属性水平线默认有阴影）。

align属性：设置水平线的对齐方式。

color属性：设置水平线的颜色。

HTML文字格式标签

<font color="red" face="Verdana" size="20">字体</font>

注释标签

在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，其语法如下：

<!--注释语句-->

HTML列表

列表是一种规定格式的文字排列方式，用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。

有序列表

<ol>

   <li>列表项1</li>

   <li>列表项2</li>

   ……

</ol>

在<ol> <li>中可以使用type、start属性。type属性用于设置编号的种类和格式，其取值如下：

l：编号为数字，默认值。例如：1，2，3，……

A：编号为大写英文字母。例如：A，B，C，……

a：编号为小写英文字母。例如：a，b，c，……

I：编号为大写罗马字符。例如：Ⅰ，Ⅱ，Ⅲ，……

i：编号为小写罗马字符。例如：ⅰ，ⅱ，ⅲ，……

    <ol type="a" start="3">

    <li type="A">Java</li>

    <li>Sevlet</li>

    <li>Php</li>

    </ol>

无序列表

<ul>

   <li>列表项1</li>

   <li>列表项2</li>

   ……

</ul>

在<ul> <li>中都可以使用type属性。

type属性取值如下：

disc：实心圆点，默认值。

circle：空心圆点。

square：实心正方形。

<h1>无序列表1</h1>

    <ul type="disc">

        <li type="circle">Java</li>

        <li>Sevlet</li>

        <li>Php</li>

    </ul>

自定义列表

<dl>

<dt>第一个列表项<dd>对第一个列表项的说明</dd>

</dt>

<dt>第二个列表项<dd>对第二个列表项的说明</dd>

</dt>

……

</dl>

自定义列表用<dl>开始，以</dl>结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示。其中，<dt> </dt>标签用来定义列表项；<dd> </dd>标签用来对列表项进行说明。

<h1>自定义列表</h1>

    <dl>

        <dt>第一个列表项<dd>对第一个列表项的说明</dd>

        </dt>

        <dt>第二个列表项<dd>对第二个列表项的说明</dd>

        </dt>

    </dl>

效果图:

HTML多媒体

HTML多媒体-图像

使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像。

<img src=“ ”  属性=“ ” ….>

主要属性如下：

src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。

width：指定图像的宽度，单位为像素。

hspace：指定图像水平方向的边沿空白，以免文字或其他图片过于贴近，单位为像素。

vspace：指定图像垂直方向的边沿空白，单位为像素。

border：指定图像边框厚度。

align：当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可取top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。

alt：这是用以描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值作为提示信息显示。

<h1>图片</h1>

    <img src ="xxx/Desktop/LaunchImage.png" alt="数钱快乐" width="100" height ="100" align ="center">

HTML超链接

<a href="资源地址">超链接文本及图像</a>

主要属性有：

href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。

target：指定显示链接目标的窗口。

可取如下值：

_self：默认值。当前窗口

_blank：新打开、未命名的窗口

_top：清除当前窗口并在整个浏览器窗口显示

_parent：当前窗口的父窗口

alt：本意是用于指定超链接的替换文本，但在IE浏览器中可以用它来定义提示信息，当鼠标停留在此热区上时，它的值会显示在鼠标指针位置处。

<h1>超链接</h1>

    <a href="https://www.baidu.com/" target="_blank">超链接</a>

HTML表格

<table>

   <tr>

       <th> 表格第一列的标题</th>

       <th> 表格第二列的标题</th>

       …

   </tr>

   <tr>

       <td> 表格第一行的第一个单元格内容</td>

       <td> 表格第一行的第二个单元格内容</td>

       …

   </tr>

   <tr>

        <td> 表格第二行的第一个单元格内容</td>

        <td> 表格第二行的第二个单元格内容</td>

        …

   </tr>

    …

</table>

`<table>`常用属性

border：设置表格边框的宽度，若为0表示边框不可见，单位为像素。

cellspacing：设置单元格边框到表格边框的距离，单位为像素。

cellpadding：设置单元格内文字到单元格边框的距离，单位为像素。

width：设置表格宽度。其值可为整数，单位为像素，如：100表示100像素；也可以是相对页面宽度的相对值，如：20%表示表格宽度为整个页面宽度的20%。

height：设置表格高度，取值方式与width一致。 bgcolor：设置表格背景色。可以是十六进制代码，也可以是英文字母，

bordercolor：设置表格边框颜色。 align：设置表格在水平方向的对齐方式，其值可为left、right、center。

valign：设置表格在垂直方向的对齐方式，其值可为top、middle、baseline。

`<tr>`常用属性

bordercolor：设置该行的外边框颜色。

bgcolor：设置该行单元格的背景颜色。

height：设置该行的高度。

align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。

valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。

`<td>`常用属性

colspan：设置单元格所占的列数，默认值为1。

rowspan：设置单元格所占的行数，默认值为1。

background：设置单元格背景图像。

width：设置单元格宽度。

示例代码:

<table border="1" width="80%" bordercolor="blue" cellpadding="2">

            <tr height ="50" valign="middle" bgcolor="yellow">

            <th width="33%" colspan="2">Java方向</th>

            <th width="33%" colspan="2">软件测试</th>

            <th width="34%" colspan="2">.NET方向</th>

           </tr>

         <tr align="center" bgcolor="red">

            <td width="16%">Java程序设计</td>

            <td width="16%">数据库技术</td>

            <td width="17%">Java程序设计</td>

            <td width="17%">数据库技术</td>

            <td width="17%">C#程序设计</td>

            <td width="17%">数据库技术</td>

           </tr>

         <tr align="center" bgcolor="blue">

            <td width="16%">JSP程序设计</td>

            <td width="16%">JavaEE技术</td>

            <td width="17%">JSP程序设计</td>

            <td width="17%">软件测试理论</td>

            <td width="17%" bgcolor="white">ASP程序设计</td>

            <td width="17%">ADO.NET</td>

           </tr>

        </table>

效果:

Java方向		软件测试		.NET方向
Java程序设计	数据库技术	Java程序设计	数据库技术	C#程序设计	数据库技术
JSP程序设计	JavaEE技术	JSP程序设计	软件测试理论	ASP程序设计	ADO.NET