JavaWeb入门学习笔记（二：HTML基本标签）_javaweb块标签文字标签列表标签-优快云博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
    </head>
    <body>
        Hello <font color="red" size="7" face="楷体">世界</font>
    </body>
</html>

结果展示：

二、格式化标签

1.换行标签

换行标签<br/>：用于展示效果中换行

（HTML源码中换行，浏览器解析时会自动忽略）

2.段落标签

段落标签<p></p>：在展示效果中起划分段落的作用，并且自动在段前和段后自动加空行

align：定义段落内容的对齐方式——默认内容居左（left）；且右（right），居中（center）

3.标题标签

标题标签<h1></h1>：划分标题，其中<h1>最大，<h6>最小。

4.空格符号

空格符号&nbsp：在展示效果中显示一个空白的位置

（HTML源码中的多个空格，效果中会合并成一个）

5.HTML注释

格式：

6.格式化标签示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Page Title</title>
    </head>
    <body>
        <h1>静夜思</h1>
        <h4>静夜思</h4>
        静夜思<br/>
        李白<br/><br/>
        李   白<br/>
        李 &nbsp;&nbsp;白<br/>
        床前明月光，<br/>
        <p>疑是地上霜。</p>
        <p align="center">举头望明月，</p>
        <p>低头思故乡。</p>
        <!--这是一个注释-->
    </body>
</html>

三、图片标签

<img/>：用于在页面效果中展示一张图片。

src:指明图片的路径。（必有属性）

图片路径的写法：

互联网路径：前面必须加上http://，例如http://www.baidu.com/xxx.jpg
内网路径：①绝对路径：文件在硬盘上的具体位置

②相对路径：从引入者所在目录出发。其中 ../表示上一层目录，./表示当前目录

width:图片宽度；height:图片的高度。

图片长宽设置默认单位：px像素。例：width=“500”，实质上是将图片宽度设置为500px，像素设置是固定设置方式

百分比设置（动态改变），例：width=“50%”，百分比是父标签（包裹其的标签）的百分比。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
</head>
<body>
    <img src="../img/海贼王1.jpg" width="500" height="250"/>
    <img src="../img/居鲁士和蕾贝卡.jpeg" width="40%" height="30%"/>
    <img src="http://www.baidu.com/xxx.jpg" />
</body>
</html>

四、列表标签

1.无序列表标签

无序列表标签<ul></ul>：用于在效果中定义一个无序列表。

2.列表条目标签

列表条目标签<li></li>：用于在效果中定义一个列表的条目。

3.有序列表标签

有序列表标签<ol></ol>：用于在效果中定义一个有序列表。

4.列表标签示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>列表标签</title>
    </head>
    <body>
        <ul>
            <li>动漫综合</li>
            <li>人气壁纸</li>
            <li>动漫下载</li>
        </ul>
        <ol>
            <li>动漫综合</li>
            <li>人气壁纸</li>
            <li>动漫下载</li>
        </ol>
    </body>
</html>

五、超链接标签

超链接标签<a></a>：用于在效果中定义一个可以点击跳转的链接。（超链接的内容除了文字还可以是其他内容，例如图片）

超链接正常工作：①.<a>标签里必须有内容体；②<a>标签必须有href属性

href：超链接跳转的路径（默认跳转本页）

href不仅可以链接html文件，也可以链接其他内容，例如图片

内网本机路径：相对路径和绝对路径
互联网路径：http：//地址
本页：#

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>超链接标签</title>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <a href="图片标签.html">图片</a>
        <a href="https://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5&fr=ala0&tpl=5">
            <img src="../img/海贼王1.jpg">
        </a>
        <a href="../img/居鲁士和蕾贝卡.jpeg">蕾贝卡</a>
    </body>
</html>

六、表格标签

定义一个完整表格：

①定义一个表格

②定义表格中的一行

③在表格的一行中定义单元格

1.表格标签

表格标签<table></table>：在效果中定义一个表格

border：设置表格的边框粗细，默认零像素

width：设置表格的宽度

2.表格行标签

表格行标签<tr></tr>：用于在效果中定义一个表格行

3.表格的单元格标签

表格的单元格标签<td></td>:用于在效果中定义一行中的单元格

4.表格的表头单元格标签

表格的表头单元格标签<th></th>：用于在效果中定义一个表格行中的表头单元格

<td>和<th>的区别：<th>的内容居中加粗

5.单元格合并

<td>或者<th>都有两个单元格合并属性：

colspan:跨列合并单元格（将单元格横向扩大

rowspan:跨行合并单元

合并步骤:

确定合并哪几个单元格，确定是跨列还是跨行合并
在第一个出现的单元个上书写合并单元格属性
合并几个单元格，属性值就写几
被合并的单元格必须删掉

七、块标签

1.行级的块标签

行级的块标签<span></span>：用于在效果中一行上定义一个块，进行内容显示，不会进行自动换行，有多少内容就占用多少空间。（适用于少量数据展示）

2.块级的快标签

块级的快标签<div></div>：用于在效果中定义一块，默认沾满一行（会自动换行），进行内容的显示。（适用于大量数据展示）