JAVA-WEB（一）：HTML、CSS

最新推荐文章于 2022-08-10 10:22:06 发布

戴假发的凡士林

最新推荐文章于 2022-08-10 10:22:06 发布

阅读量458

点赞数

文章标签： java 开发语言前端 html css

本文链接：https://blog.csdn.net/qq526017350/article/details/126042751

版权

一、HTML

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

超文本：指不仅仅是纯文本还包括字体相关和多媒体相关(图片，音频，视频)

作用：负责搭建页面结构和准备页面内容

学习HTML主要学习的就是有哪些标签，以及标签的使用方式

1. 文本相关标签

1. 内容标题：<h1-h6>

特点：独占一行，字体加粗，自带上下间距

2. 段落标签：

特点：独占一行，自带上下间距

3. 水平分割线：<hr>

4. 换行： 

5. 加粗：

6. 斜体：

7. 下划线：

8. 删除线：<s>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--align对其方式-->
<h1 align="right">内容标题1</h1>
<h2 align="center">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落
    标签2</p>
<p>段落<br>标签3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
</body>
</html>

2. 列表标签

无序列表：ul 和 li

有序列表：ol 和 li

列表嵌套：有序列表和无序列表可以任意无限嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>列表标签</h1>
<h2>无序列表</h2>
<ul><!--unordered list无序列表-->
    <li>刘备</li><!--list item列表项-->
    <li>孙尚香</li>
    <li>诸葛亮</li>
    <li>夏侯惇</li>
    <li>刘禅</li>
</ul>
<h2>有序列表</h2>
<ol><!--ordered list有序列表-->
    <li>Java基础
        <ul>
            <li>变量</li>
            <li>数据类型</li>
            <li>运算符</li>
        </ul>
    </li>
    <li>JavaAPI</li>
    <li>Web前端</li>
</ol>
</body>
</html>

3. 图片标签img

src：资源路径

相对路径：访问站内资源

资源和页面同级目录：直接写文件名

资源在页面的上级目录：../文件名

资源在页面的下级目录：文件夹名/文件名

绝对路径：访问站外资源时使用，称为图片盗链，有找不到图片的风险

alt：当图片不能显示时显示的文本

title：图片标题

width/height：设置宽高，两种赋值方式：像素和百分比, 只设置宽度时高度会自动等比例缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src资源路径
    相对路径:
        资源和页面在同级目录: 直接写文件名
        资源在页面的上级目录: ../文件名
        资源在页面的下级目录: 文件夹名/文件名
    绝对路径: 访问站外资源时使用,又称为图片盗链,存在找不到图片的风险
    alt:当图片不能显示时显示的文本
    title:图片标题,鼠标悬停时显示的文本
-->
<img src="aa.jpg" alt="图片不能显示时显示的文本">
<img src="a.jpg" title="一眼丁真" width="30%">
<!--设置图片的宽高:  像素和百分百两种方式赋值
width宽度
height高度
-->
<img src="../b.jpg" width="300" height="300">
<img src="abc/c.jpg" width="300">
<img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/70021/17/6510/315740/5d4a9411E4e55adc9/888ff9d7fc9e85e6.jpg">
</body>
</html>

4. 超链接a

href：设置资源路径和图片标签的src属性类似

a标签包裹文本为文本超链接，包裹图片为图片超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">超链接1</a>
<a href="a.jpg">超链接2</a>

<a href="http://www.jd.com">
    <img src="a.jpg" width="100" alt="">
</a>
</body>
</html>

5. 表格标签table

相关标签：table，caption表格标题，tr表示行，td表示列，th表示表头

相关属性：border边框， rowspan跨行，colspan跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr><!--table row-->
        <td colspan="2" align="center">1-1</td>
        <td rowspan="2">1-3</td>
        <td rowspan="3">1-4</td>
    </tr>
    <tr>
        <td>2-1</td><td>2-2</td>
    </tr>
    <tr>
        <td align="center" colspan="3">3-1</td>
    </tr>
</table>
<table border="1">
    <!--caption表格标题-->
    <caption>购物车</caption>
    <tr><!--table head表头 加粗并居中-->
        <th>编号</th><th>商品名</th><th>价格</th>
    </tr>
    <tr>
        <td>1</td><td>华为手机</td><td>5600</td>
    </tr>
    <tr>
        <td>2</td><td>小米手环</td><td>600</td>
    </tr>
</table>
</body>
</html>