JAVA程序员笔记（第二阶段：前端）第1篇—

本文链接：https://blog.csdn.net/Muyun5202/article/details/120497562

作为程序员，技多不压身，当然本人在后端发展的意愿是比较强的。所以前端我们过一遍知识点，不做深入了解。

HTML

虽然也有专业的前端编程工具，但是简单学习已经足够了。依旧是使用我们的IDEA
新建一个工程，用来学习前端知识和语言：
在这里插入图片描述

初识HTML

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

html概念我们只做了解，有兴趣的可以直接百度或者csdn上查询。
HTML中最重要的就是对各个标签的书写、修改、查找以及设置样式：

图来自博主：wuyxinu
添加链接描述

整个网页是从这里开始的，然后到结束

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。

内部标签说明定义网页的标题定义网页的基本信息（供搜索引擎） </meta>

<!-- 采用 h5 规范编写网页 -->
<!DOCTYPE html>


<!-- 网页的根标签 是 html 标签

    开始标签 可以 编写 标签的 属性

    lang(语言) 是 html 标签的属性

 -->

<html>

<!-- head 设置网页的头信息 -->
<head>
    <!-- meta 设置元数据，有非常多的属性 charset 设置网页编码格式   -->
    <meta charset="UTF-8">

    <!--
        图标网站: https://www.iconfont.cn/ (iconfont-阿里巴巴图标库)
     -->

    <!-- 网页窗口中的 logo 图片的大小必须是 16 * 16 像素 -->
    <link rel="icon" href="favicon.ico" type="image/gif" >
    <!-- title 设置网页的标题、会出现在网页的 左上角  -->
    <title>测试网页</title>

</head>

<!--
    在浏览中需要显示的内容 写在 body标签中
    浏览器 默认会忽略 多个空格，只呈现一个空格的效果

 -->
<body>

    hello            world!!!

</body>
</html>

标签语义对照表
标签名中文解释
div ——分割（块元素）
span —— 区域（行内元素）
p ——段落
ol —— 有序列表
ul——无序列表
li ——列表项
dl—— 定义列表
h1~h6 header1 ~header6 标题1~标题6
a ——锚点，超链接
strong ——强调（粗体）
br ——换行
caption——（表格、图像等）标题

盒子模型

在网页中，绝大部分每一个标签都需要一个区域，我们称之为盒子模型，可以通过给盒子添加样式，来达到美观的效果。注意盒子的大小不代表里面内容的大小。给一个10*10大小的盒子，内容文字宽度为20，文字会超出

首先设置宽高：
在p标签中设置style：
然后调整宽高，让文字不超出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        段落标签
            块级元素，独占一行， 默认带有 外边距
    -->
    <p style="width:20px;height:100px;background-color: #1E90FF">hello!!!</p>
    <p>hello!!!</p>
    <p>hello!!!</p>

</body>
</html>

div

div是一个块级元素

    1. 该标签没有特殊含义
    2. 常用来进行网页布局

div会作为一个块，里面可以有其他标签，方便管理

<div>
        <p>hello</p>
        <a href="https://www.baidu.com">百度</a>
</div>

img

img 用来设置图片

<!--
       
            1. img 是一个 单标记标签, 在尾部推荐使用 / 来进行标记
            2. src 属性用来设置 图片的链接地址 可以是相对地址，也可以是 http 地址
            3. 网站中所需要的图片一般推荐放在 images 或者 img 目录下
            4. img 如果没有设置 宽和高， 则会默认使用 图片的宽和高 作为容器的宽高
            5. 如果 设置了 宽高，图片又可能会发生变形
            6. 如果 图片 只设置了一个 宽 或者 高, 会进行等比缩放
            7. alt属性， 用来设置 图片的 文字描述， 当图片加载失败的时候，才会被看到

        img 是一个 行内块元素

            特点： 不独占一行，可以设置宽高
     -->

    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01a5d7313fe344bddb9e4081df4dc998.jpg?w=2452&h=920" alt="">
    <img src="./images/01.jpg" height="500px" alt="悲催了" style="vertical-align: bottom"/>
    <a href="http://www.baidu.com">百度</a>

span

span : 行内元素

<!--
        

        没有特殊含义，没有默认自带的样式
        主要是 负责 文字的显示，
        更多的使用场景是 配合 表单 去做一些效果

    -->
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

各个文本格式化标签：

 <span>hello</span>
    <br />
    <b>hello</b>
    <br />
    <i>hello</i>

    <br />

    <em>hello</em>

    <br />

    <del>hello</del>
    <br />

    <span>Hel<sup>lo</sup></span>

    <br />
    <span>Hel<sub>lo</sub></span>

    <br/>
    <strong>hello</strong>

code

code标签内用来写代码

 <span>hello</span>
   <pre>
   <code>
public class Dog{

    public static void main(String[] args){

        System.out.println("Hello Dog!!!");
    }
}
   </code>
  </pre>

   <h3>悯农</h3>
<pre>
锄禾日当午,
汗滴禾下土。
谁知盘中餐,
粒粒皆辛苦。
</pre>

列表标签

<!--
    列表 标签分为 两种
            有序列表 ol (不常用)
            无序列表 ul (常用)

    列表 标签 主要负责 设计网站的 导航

-->

   <ul>
       <!-- 一个 li标签 代表 ul列表中的每一项 -->
       <li>
           <a>
                <img src="" />
                <i>用户管理</i>
           </a>

           <ol>
               <li>
                    <a>xxx</a>
                    <ul>
                        <li>AAA</li>
                        <li>BBB</li>
                    </ul>
               </li>
               <li>YYY</li>
               <li>ZZZ</li>

           </ol>

       <li>
           <a>
               <img src="" />
               <i>角色管理</i>
           </a>
       </li>

       <li>
           <a>
               <img src="" />
               <i>系统管理</i>
           </a>
       </li>
   </ul>

简单的表格制作

快捷键：输入想要的标签，例如 td 然后按table键，可以直接生成标签
需要输入多行标签时，例如 td*10 然后table键，就能生成10行td标签代码

<!--
        table 是一个 表格
           border 设置 表格的边框为 1像素
     -->
    <table border="1" cellspacing="0" cellpadding="0">
        <caption>课程表</caption>

        <!-- 制作表头 -->
        <thead>
            <!-- tr 代表一行 -->
            <tr>
                <!-- th ，td代表一列, td 表示表的数据， th 表示 表头 -->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>


        </thead>

        <tbody>

            <tr>
                <!-- rowspan 合并多少行-->
                <td rowspan="4"  style="text-align: center">上午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="4" style="text-align: center">下午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </tbody>

<!--        <tfoot>-->
<!--            <tr>-->
<!--                &lt;!&ndash; 合并 列 colspan &ndash;&gt;-->
<!--                <td colspan="1"></td>-->
<!--                <td colspan="5"></td>-->
<!--            </tr>-->
<!--        </tfoot>-->

    </table>