JavaWeb快速入门

行山太保

已于 2023-09-04 16:37:48 修改

阅读量103

点赞数 4

文章标签：前端

于 2023-09-04 16:36:03 首次发布

本文链接：https://blog.csdn.net/qq_53373764/article/details/132672505

版权

HTML常见标签以及Css层叠样式表

HTML文本标签

<!--顶部网页名-->
<title></title>

<!--标题标签,从1~6的标题大小从大到小,标题加粗独占一行-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!--段落标签,一个标签占一行-->
<p></p>

<!--水平线标签,自闭和标签,一个标签独占一行-->
<hr/>

<!--加粗标签 倾斜标签,两者可以嵌套使用-->
<b></b>
<i></i>

<!--换行标签-->
<br/>

HTML超链接标签

<!--超链接标签 href可以定义跳转的网址,必须要加上协议 target定义跳转方式,_blank表示在新页面打开,_self表示在当前页面打开-->
<a href="#" target="_blank">//链接名字</a>

<!--可以在超链接标签中定义一个图片,当点击图片时也可以跳转到定义的网址,src定义图片的地址,height定义图片高度,宽度不设置会按照比例自动缩放-->
<a href="#" target="_blank"><img src="../img/a.jpg" height="10px"/></a>

HTML多媒体标签

<!-- 音频标签 -->
<audio src="../img/01.mp3" controls/>

<!-- 视频标签 -->
<video src="../img/01.mp4" controls/>

HTML表格标签

<!--table:用于声明表格的范围 align:表格对齐方式 border:表格边框的宽度 cellpadding:格子距离内容边距 cellspacing:单元格边距 width:表格宽度设置为百分比,表示占父标签范围的百分之几-->
<table align="center" border="1" cellpadding="5" cellspacing="0" width="80%">
    <!--tr表示表格的一行-->
    <tr>
        <!--th表示表格内容加粗且居中,一般用于表头-->
        <th></th>
    </tr>
    <tr>
        <!--td表示表格中的每一个数据,默认左对齐-->
        <td></td>
    </tr>
</table>

HTML表单标签

<!--form声明表单域 必要:action(提交路径) method(提交方式) get/post-->
<form action="#" method="get">
    <!-- 最常用收集控件:input 通过指定type不同的内容 渲染出不同的效果 (每一个input标签都必须在type的基础上给name) -->
    <!-- input:type:text 文本输入框 ★name:声明该数据提交到后台的名称 -->
    用户名 : <input type="text" name="username"/>
    <br/><br/>
    用户地址 : <input type="text" name="address"/>
    <br/><br/>
    <!-- input:type:password 密码输入框 ★name:声明该数据提交到后台的名称-->
    用户密码 : <input type="password" name="password">
    <br/><br/>
    <!-- input:type:radio 单选框 ★name:声明该数据提交到后台的名称(name相同的radio组成一组) ★value:单选框选中时实际提交的数据 -->
    用户性别 : 男 <input type="radio" name="gender" value="male"> 女 <input type="radio" name="gender" value="female">
    <br/><br/>
    <!-- input:type:checkbox 多选框 ★name:声明该数据提交到后台的名称(name相同的checkbox组成一组) ★value:多选框选中时实际提交的数据-->
    用户爱好 : 唱 <input type="checkbox" name="hobby" value="sing"> 跳 <input type="checkbox" name="hobby" value="jump">
    Rap <input type="checkbox" name="hobby" value="rap"> 篮球 <input type="checkbox" name="hobby" value="basketball">
    <br/><br/>
    <!-- input:type:file 文件上传框 ★name:声明该数据提交到后台的名称 今天没有任何上传的效果-->
    用户头像 : <input type="file" name="avator">
    <br/><br/>
    <!-- input:type:hidden 隐藏域(不在页面显示/内容跟随表单提交) ★name:声明该数据提交到后台的名称 ★value:隐藏域提交时数据 -->
    <input type="hidden" name="userId" value="dj2173878-d712-8773-jkdi-di23782">
    <!-- select:option 下拉框 select定义name(声明该数据提交到后台的名称) option定义value(声明被选中提交的值) -->
    用户学历:
    <select name="edu">
        <option value="xx">小学</option>
        <option value="cz">初中</option>
        <option value="gz">高中</option>
        <option value="dx" selected="selected">大学</option>
        <option value="yjs">研究生</option>
        <option value="bs">博士</option>
    </select>
    <br/><br/>
    <!-- textarea:文本域 可以输入大量文字 ★name:声明该数据提交到后台的名称 -->
    个人介绍:
    <textarea name="myself" rows="10" cols="50"></textarea>
    <!--input:type:submit 提交按钮 提交表单 ★value:显示按钮内容 -->
    <!--input:type:reset 清空按钮 表单所有内容清空 -->
    <input type="submit" value="注册"> <input type="reset">
</form>

HTML列表标签

<!-- ul:li 无序列表 特点:每个列表项前有一个符号 type:实心圆 /  circle:空心圆 / square:实心正方形-->
<ul type="square">
  <li>张二狗</li>
  <li>李狗蛋</li>
  <li>刘铁柱</li>
</ul>
<!-- ol:li 有序列表 特点:每个列表项前有一个序号 type:数字 / i I 小写罗马数字 大写罗马数字 / a A 小写字母 大写字母-->
<ol type="I">
  <li>张二狗 100分</li>
  <li>李狗蛋 95分</li>
  <li>刘铁柱 94分</li>
</ol>
<!-- dl:dt(说明) dd(列表项)-->
<dl>
  <dt>关于我们</dt>
  <dd>邮箱地址:123456@163.com</dd>
  <dd>办公地址:北京市昌平区建材城西路8号院</dd>
</dl>

Css层叠样式表

<!--三种引入方式-->
<!--1. 行内样式:针对于当前元素有效 在标签的里面声明style="样式名:样式值"-->
<span style="color: blue">Hello World</span>
<!--2. 内部样式:在head标签中声明一个style标签,基于选择器选择元素进行美化 -->
<head>
    <meta charset="UTF-8">
    <title>Css</title>
    <style>
        p {
            color: pink;
            font-size:30px;
        }
    </style>
</head>
<body>
    <p>
        Hello World
    </p>
</body>
<!-- 3.外部样式:在head标签中声明一个link标签,指定href为引入的Css -->
    <link rel="stylesheet" href="../css/my.css">
<body>
    <div>
        Hello Css
    </div>
</body>

<!--css文件-->
/* Css文件中直接基于选择器进行元素选择后进行美化 */
div {
    color: blueviolet;
    font-size: 20px;
}

<head>
    <meta charset="UTF-8">
    <title>17-Css-Css的选择器</title>
    <style>
        /*标签选择器的写法:标签名{} 好处:可以同时选择一个页面中的所有同类型标签 弊端:必须选择所有的同类型标签*/
        span {
            color: red;
        }

        /*类选择器的写法:.类名{} 好处:无论是什么元素只要有相同的类名即可被同时选择*/
        .clz {
            color: aqua;
        }

        /*Id选择器的写法:#Id值{} 好处:精确定位到某一个元素*/
        #aa {
            background-color: pink;
        }
    </style>
</head>
<body>
<span>Hello World</span>
<span>Hello Java</span>
<div class="clz">aaa</div>
<p class="clz">bbb</p>
<a href="#" target="_self" id="aa">跳转</a>
</body>

Css常见样式

width: 500px; /*元素的占用空间:宽度*/
height: 500px; /*元素的占用空间:高度*/
font-family: 宋体; /*元素的文本字体 要求使用者的电脑上具有指定的字体*/
font-size: 50px; /*元素的文本大小*/
color: darkslategray; /*元素的文本颜色*/
border: blue 1px solid; /*元素的边框*/
background-color: beige; /*元素的背景色*/
background-image: url("../img/1.jpg");/*元素的背景图片*/