java css一般放在哪 java新建css文件

转载

mob64ca13f446df 2024-01-02 15:40:10

文章标签 java css一般放在哪前端 java html CSS 文章分类 Java 后端开发

HTML与CSS网页开发基础

1、用idea创建一个HTML文件
2、文档结构
3、常用标记
4、表格标记
5、表单标记
6、超链接+图片标记

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

1、用idea创建一个HTML文件

第一步：file->new->project

java css一般放在哪 java新建css文件_CSS

第二步：右键src->new->html file

java css一般放在哪 java新建css文件_前端_02

2、文档结构

java css一般放在哪 java新建css文件_前端_03

其中

head：头标记

例如定义CSS样式代码就放在<head>与</head>中间

title：标题标记

在网页的标题处

body：主体部分

成对使用，页面中的内容都定义在body中

3、常用标记

3.1 换行

换行采用的是<br>【单独出现】

加粗用的是俩个配套的<b></b>【成对出现】

java css一般放在哪 java新建css文件_CSS_04

3.2 段落<p></p>

java css一般放在哪 java新建css文件_html_05

3.3 标题<h1></h1>

java css一般放在哪 java新建css文件_CSS_06

3.4 居中<center></center>

在HTML5中已经废除了center，均采用CSS进行居中

java css一般放在哪 java新建css文件_前端_07

3.5 文字列表

3.5.1、有序<ol><li>

java css一般放在哪 java新建css文件_html_08

3.5.2、无序<ul><li>

java css一般放在哪 java新建css文件_CSS_09

4、表格标记

表格标记<table>
标题标记<caption>
表头标记<th>
表格行标记<tr>
单元格标记<td>

<!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>

java css一般放在哪 java新建css文件_java css一般放在哪_10

5、表单标记

表单标记<form></form>

action：处理URL地址
method：将数据传入服务器
name：表单名称
onSubmit：用户单机提交按钮时触发的事件
target：输入数据结果显示在哪个窗口中

表单输入标记<input>

具体的细分小属性见链接：https://www.w3school.com.cn/tags/tag_input.asp

下拉列表框标记<select></select>

name：列表框名称
size：指定列表显示数量，超出数量的用拖动滚条查看
disabled：当前列表框不可用
multiple：支持多选

多行文本标记<textarea>

ps：有点小丑😅😅😅

登录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body><form action="" method="post" name="myform">
        用户名:<input name="usename" type="text" id="UserName4" maxlength="20"><br>
        密码:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>
        确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>
        性别：<input name="sex" type="radio" class="noborder" value="男"checked>
            男 
            <input name="sex" type="radio" class="noborder" value="女">
            女<br>
        爱好：<input name="like" type="checkbox" id="like1" value="体育">
            体育
            <input name="like" type="checkbox" id="like2" value="旅游">
            旅游
            <input name="like" type="checkbox" id="like3" value="听音乐">
            听音乐
            <input name="like" type="checkbox" id="like4" value="看书">
            看书<br>
        E-mail：<input name="email" type="text" id="PWD225" size="50">
        <input name="Submit" type="submit" class="btn_grey" value="确定保存">
        <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写">

    </form>
    </body>
</html>

java css一般放在哪 java新建css文件_java css一般放在哪_11

下拉框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body><form action="" method="post" name="myform">
        用户名:<input name="usename" type="text" id="UserName4" maxlength="20"><br>
        密码:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>
        确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>
        性别：<input name="sex" type="radio" class="noborder" value="男"checked>
            男 
            <input name="sex" type="radio" class="noborder" value="女">
            女<br>
        爱好(下拉框)：<select name="select">
            <option>看书</option>
            <option>听歌</option>
            <option>运动</option>
            <option>学习</option>
            </select>
        <br>
         
        爱好(多行下拉、不可多选)：<select name="select2",size="2">
        <option>看书</option>
        <option>听歌</option>
        <option>运动</option>
        <option>学习</option>
    </select>
        <br>
         
        爱好(多行下拉、可多选)：<select name="select3" size="3" multiple>
        <option>看书</option>
        <option>听歌</option>
        <option>运动</option>
        <option>学习</option>
    </select>
        <br>
        E-mail：<input name="email" type="text" id="PWD225" size="50">
        <input name="Submit" type="submit" class="btn_grey" value="确定保存">
        <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写">

    </form>
    </body>
</html>

java css一般放在哪 java新建css文件_html_12

多行文本框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body><form action="" method="post" name="myform">
        用户名:<input name="usename" type="text" id="UserName4" maxlength="20"><br>
        密码:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>
        确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>
        性别：<input name="sex" type="radio" class="noborder" value="男"checked>
            男 
            <input name="sex" type="radio" class="noborder" value="女">
            女<br>
        自我介绍：<br>
        <textarea name="content" cols="30" rows="5" wrap="hard"></textarea>

        <input name="Submit" type="submit" class="btn_grey" value="确定保存">
        <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写">

    </form>
    </body>
</html>

java css一般放在哪 java新建css文件_CSS_13

6、超链接+图片标记

6.1 超链接

<a href = ""></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
    <a href = "">博客</a>
    </body>
</html>

java css一般放在哪 java新建css文件_java_14

6.2 图片

<img src="un" width="value" height="value" border="value" alt="提示文字">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
    <table width="100" height="150" border="1" align="center">
        <tr>
            <td width="100" height="120">
                <img src="img.png">
            </td>
        </tr>
        <tr>
            <td height="100" align="center" valign="middle">
                <a href = "">博客</a>
            </td>
        </tr>

    </table>
    </body>
</html>

java css一般放在哪 java新建css文件_html_15