• 【Java Web】HTML与CSS网页开发基础 ①

    HTML与CSS网页开发基础

    写在前面，这篇博客适合的是0基础的学习前端的友友们，因为我就是0基础的鸭，我尽量捣鼓捣鼓，然后里面有写图片没捣鼓出来，查了说是要用到CSS，还没看到那里，所以说登录的那个界面极其的丑，大家别介🥺🥺

    1、用idea创建一个HTML文件

    第一步：file->new->project
    在这里插入图片描述
    第二步：右键src->new->html file
    在这里插入图片描述

    2、文档结构

    在这里插入图片描述
    其中

    • head：头标记
      • 例如定义CSS样式代码就放在与中间
    • title：标题标记
      • 在网页的标题处
    • body：主体部分
      • 成对使用，页面中的内容都定义在body中

    3、常用标记

    3.1 换行
    换行采用的是
    【单独出现】
    加粗用的是俩个配套的【成对出现】
    在这里插入图片描述
    3.2 段落


    在这里插入图片描述
    3.3 标题


    在这里插入图片描述
    3.4 居中

    在HTML5中已经废除了center，均采用CSS进行居中
    在这里插入图片描述
    3.5 文字列表
    3.5.1、有序

    1. 在这里插入图片描述

      3.5.2、无序


      • 在这里插入图片描述

        4、表格标记

        • 表格标记
        • 标题标记
        • 单元格标记
        • 表头标记
        • 表格行标记
          • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
    <table width="318" height="167" border="1" align="center">
        <caption><b>学生考试成绩单</b></caption>
        <tr>
            <td align="center" valign="middle">姓名</td>
            <td align="center" valign="middle">学号</td>
            <td align="center" valign="middle">班级</td>
        </tr>
        <tr>
            <td align="center" valign="middle">张三</td>
            <td align="center" valign="middle">0518</td>
            <td align="center" valign="middle">2005班</td>
        </tr>
        <tr>
            <td align="center" valign="middle">李四</td>
            <td align="center" valign="middle">0619</td>
            <td align="center" valign="middle">2006班</td>
        </tr>
        <tr>
            <td align="center" valign="middle">王五</td>
            <td align="center" valign="middle">0914</td>
            <td align="center" valign="middle">2009班</td>
        </tr>
    </table>
    </body>
</html>


          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33

          在这里插入图片描述

          5、表单标记

          • 表单标记
            • action：处理URL地址
            • method：将数据传入服务器
            • name：表单名称
            • onSubmit：用户单机提交按钮时触发的事件
            • target：输入数据结果显示在哪个窗口中
          • 表单输入标记
          • 下拉列表框标记
            • name：列表框名称
            • size：指定列表显示数量，超出数量的用拖动滚条查看
            • disabled：当前列表框不可用
            • multiple：支持多选
          • 多行文本标记