JavaWeb-前端（HTML、CSS、JavaScript）简介

最新推荐文章于 2023-04-26 19:45:10 发布
最新推荐文章于 2023-04-26 19:45:10 发布
阅读量508 收藏 3
点赞数 3
分类专栏： javaweb 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyy_sss/article/details/124389937
版权

HTML:超文本标记语言----决定页面上显示什么内容
CSS：页面上内容显示的风格
JavaScript:页面特效

1.HTML

<html>
    <head>
        <title>Hello</title>
        <meta charset="UTF-8">
    </head>
    <body>
        hello world!<br/>你好,HTML!
        <p>段落1<p>
        <p>段落2<p>
        <img src="imgs/001_1_1.bmp" alt="这是一张图片"/>
        <h1>标题1</h1>
<!--        <h2>标题2</h2>-->
<!--        <h3>标题2</h3>-->
<!--        <h4>标题2</h4>-->
<!--        <h5>标题2</h5>-->
<!--        <h6>标题2</h6>-->

        武林高手排行榜：
<!--        有序列表-->
        <ol type="A" start="2">
            <li>扫地僧</li>
            <li>萧远山</li>
            <li>虚竹</li>
        </ol>
<!--        无序列表-->
        <ul>
            <li>扫地僧</li>
            <li>萧远山</li>
            <li>虚竹</li>
        </ul>
<!--        u下划线 b粗体 i斜体-->
        你是<b><i><u>喜欢</u></i></b>舔月饼还是咸月饼?<br/>
        水分子化学式：H<sub>2</sub>O<br/>

        <span>赵又廷</span>

<!--    超链接标签,a表示超链接 href表示连接地址-->
<!--        target:
               _blank:在新窗口打开
               _self:在本窗口打开（没有声明则默认为此）
               _parent：在父窗口打开
               _top：在顶层窗口打开
-->
        <a href="https://www.baidu.com" target="_blank">百度一下</a><br/>
    
    

    </body>
</html>
  • 一个网页代码由< html>开始，在<\html>结束。< html>为开始标签，<\html>为结束标签
  • title表示网页的标题
  • < meta charset=“UTF-8”>表示该网页使用UTF-8进行编码
  • body中包含的是网页的内容
  • < br/> 表示换行，br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
  • p表示段落标签
  • img表示图片标签
    src 属性表示图片文件的路径
    width 和 hight表示图片的大小
    alt表示图片提示
  • < h> <\h>，h1~h6 :表示标题标签
  • 列表标签
    ol:有序列表
    ul:无序列表

<html>
<head>
    <meta charset="UTF-8">
    <title>表格学习标签</title>
</head>
<body>
<!--表格标签 table
        行  tr
        列  td
        table中如下属性已淘汰：border表格边框
                            width 表格宽度
                            cellspacing 单元格间距
                            cellpadding 单元格填充
                            align 表格内容格式
-->
    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
        </tr>
        <tr align="center">
            <td>lyy</td>
            <td>001</td>
            <td>23</td>
        </tr>
        <tr align="center">
            <td>sss</td>
            <td>002</td>
            <td>34</td>
        </tr>
    </table>
<!--分割线-->
    <hr/>
    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
            <th>删除 </th>
        </tr>
        <tr align="center">
            <td>lyy</td>
            <td>001</td>
            <td>23</td>
            <td><img src="imgs/001_1_1.bmp" width="24" height="24"/></td>
        </tr>
        <tr align="center">
            <td>sss</td>
            <td>002</td>
            <td>34</td>
            <td><img src="imgs/001_1_1.bmp" width="24" height="24"/></td>
        </tr>
    </table>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单标签的学习</title>
    </head>
<!--    表单是一个容器，承载发送给服务器的数据-->
    <body>
<!--        <form style="border:1px solid red;">
            &nbsp;
            </form>
-->
<!--action="demo04.html" 表示提交的地址；method="post"表示表单的发送方式为post(一般使用post)，还有一种get方式-->
        <form action="demo04.html" method="post">
            <!--
            input type="text"表示文本框，其中name属性必须要指定，否则文本框数据将来是不会发送给服务器的
            input type="password"表示密码框输入不显示，也必须指定name属性
            input type="radio"表示单选按钮，name属性值需要保持一致才会有互斥的效果
            input type="checkbox"表示复选框，name属性值建议保持一致

            select name="star"表示下拉列表 option表示一个选项，其中value是发送给服务器的值，selected表示默认选中的项
            textarea name="remark"表示多行文本框，它的value值就是开始结束标签之间的内容
            input type="submit"表示提交按钮
            input type="reset"表示重置按钮
            input type="button表示普通按钮
            -->
            昵称：<input type="text" name="nickName"/><br/>
            密码：<input type="password" name="pwd"/><br/>
            性别：<input type="radio" name="gender" value="male"/>男
                 <input type="radio" name="gender" value="female"/>女<br/>
            爱好：<input type="checkbox" name="hobby" value="basketbal">篮球
                 <input type="checkbox" name="hobby" value="football">足球
                 <input type="checkbox" name="hobby" value="pinpang">乒乓球<br/>
            星座：<select name="star">
                 <option value="1">白羊座</option>
                 <option value="2">处女座</option>
                 <option value="3" selected>天蝎座</option>
                 <option value="4">天秤座</option>
                 <option value="5">摩羯座</option>
                 </select><br/>
            备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>

            <input type="submit" value="注册"/>
            <input type="reset" value="重置"/>
            <input type="button" value="这是一个普通按钮"/>

        </form>

    </body>
</html>

提交地址的代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1><font color="red">注册成功</font> </h1>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    这里是demo05的内容<br/>
<!--   iframe 在一个页面嵌入嵌入一个子页面-->
    <iframe src="demo3.html"/>
    </body>
</html>

总结：

  1. HTML是解释型的文本标记语言，不区分大小写
  2. 学到的标签：html,head,title,meta,body,br,p,hr,div,table,from,u,i,b,sup,sub,&nbsp,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img

2.CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
<!--        Style标签包裹的成为内部样式表-->
        <style type="text/css">
        /* 被style包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }/* .表示类样式  后面使用class="f20"可以调用*/
        .f20{
            font-size: 20px;
        }
        /*  #表示ID样式 使用id="p4"调用*/

        </style>
<!--        引用外部的样式表-->
        <link rel="stylesheet" href="css/demo01.css">
    </head>
    <body>
<!--    <p><font color="red">这里是段落1</font></p>-->
<!--    <p><font color="red">这里是段落2</font></p>-->
    <p>这里是段落1</p>
    <p>这里是段落2</p>
    <p class="f20">这里是段落3</p>
    <p id="p4">这里是段落4</p> <!--id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->

    <div>
<!--嵌入样式表，卸载标签的内部，以一个属性存在-->
        <p><span style="font-size: 60px;font-weight: bolder;color: yellow">HELLO</span></p>
        <span class="f32">World</span>
        <p class="f32">!!!!</p>
    </div>
    </body>
</html>

外部样式表CSS

#p4{
    background-color: pink;
    font-size: 24px;
    font-weight: bolder;
    font-style: italic;
    font-family: "华文彩云";
}

/*组合样式 div内部的p标签内容为蓝颜色；div中的f32类标签定义32像素字体为宋体*/
div p{
    color: blue;
}
div .f32{
    font-size: 32px;
    font-family: 宋体;
}
  • CSS的基本语法分类：标签样式表、类样式表、ID样式表
  • CSS从位置上的分类：嵌入式样式表（嵌入样式表，卸载标签的内部，以一个属性存在）、内部样式表（Style标签包裹的成为内部样式表）、外部样式表
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            #div1{
                width: 400px;
                height: 400px;
                background-color: greenyellow;
                /*border边框样式*/
                /*border-width: 1px; */
                /*border-style: solid;*/
                /*border-color: blue;*/
            /*    合并*/
                border: 1px solid blue;
            }
            #div2{
                width: 150px;
                height: 150px;
                background-color: green;

                margin-left: 100px;
                margin-top: 100px;

            /*    填充 padding*/
                padding-top: 50px;
                padding-left: 50px;
            }
            #div3{
                width: 100px;
                height: 100px;
                background-color: pink;


            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">&nbsp;</div>
            </div>
        </div>
    </body>
</html>

CSS盒子模型：1、border边框 2、margin间距 3、padding填充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 50px;
            background-color: green;

            /*绝对定位，左上角为0,0*/
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #div2{
            width: 200px;
            height: 50px;
            background-color: pink;

            /*相对定位*/
            position: relative;
            float: left;
            margin-left: 20px;

        }
        #div3{
            height: 50px;
            background-color: yellow;

        }
        body{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <div id="div1">&nbsp;</div>
    <div id="div2">&nbsp;</div>
    <div id="div3">&nbsp;</div>
</body>
</html>

position：

  • absoulte：绝对定位，需要配合left，top
  • relative：相对定位。一般会和float,margin,padding 等一起使用

float：

3.Javascript

Javascript：是客户端的一个脚本语言
JS是一门弱类型的语言，变量的数据类型由后面赋的值的类型绝对

lyy_sss
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML、CSS、JS(JAVA Sprict)
li_shouzi的博客
01-04 942
HTML是一种标记语言，是网页的规范编程语言，就主要而言： 主要适用于面向Web编程 【例如】Wechat公众号的部分HTML5小游戏，Web端的网页包括百度/谷歌都是使用HTML的； 可读性高 【原因】HTML是最容易理解的语言，因为它是标记语言，不是编程语言，因此其就只有标记和属性组成，不会像其他语言例如C++或Java等变形等分支，同时HTML不需要记住复杂的语法，基本上也就只有标签的名字需要记下来。
java-前端登录页面
09-03
Java项目练习的前端页面，希望给大家一些帮助！
[JavaWeb]—前端篇
Sentiment的博客
10-02 1608
标签作用测试 效果标签作用测试 效果测试 效果标签样式表 类样式表 ID样式表ID样式 尽量保持唯一不要重复使用 位置分类 嵌入式样式表优先级下边两种样式 内部样式表 外部样式表从外部调用样式 测试 也可以用外部样式，将style标签以及包含的内容换成外部链接即可border 边框通过border属性可以对边框各属性进行设置 可以通过一个border属性设置各属性值 若只想对其中一遍设置可以用border-top/left/right//bottom margin 间距通过margin属性可以对各边进行间距
JavaWeb-前端基础
cmdos的专栏
03-05 1271
前端基础前端：我们网站的页面，包括网站的样式、图片、视频等一切用户可见的内容都是前端的内容。后端：处理网站的所有数据来源，比如我们之前从数据库中查询数据，而我们查询的数据经过处理最终会被展示到前端，而用于处理前端数据的工作就是由后端来完成的。相当于，前端仅仅是一层皮，它直接决定了整个网站的美观程度，我们可以自由地编排页面的布局，甚至可以编写好看的特效；而灵魂则是后端，如何处理用户的交互、如何处理数据查询是后端的职责所在，我们前面学习的都是后端内容，而Java也是一门专注于后端开发的语言。对于前端开发我们需要
java web前端_JavaWeb前端: JavaScript 简介
weixin_28931507的博客
02-24 161
JavaScript基本概念什么是JavaScriptJS是运行在浏览器里的解释性语言，能实现浏览器端和用户的直接交互(HTML输出/响应事件/改变HTML内容图像样式)；除了变量不区分类型以外，语法和Java类似，有几乎相同的流程控制语法，变量操作符，异常处理。JavaScript有什么作用JavaScript主要用于实现前端的动态交互：JS操作DOM元素：浏览器根据HTML规范把HTML文档渲...
Java Web 前端知识了解
张议的博客
01-26 984
文章目录HTMLCSS（层叠样式表）当多于一种的样式指定一HTML元素时使用怎样的样式CSS语法The class Selevtor（选择器类）The id Selevtor（id选择器）CSS注释怎么样使用CSS外部样式表内嵌样式表行内样式Http协议Http协议介绍浏览器与服务器通信的过程（Http 1.0）持续链接（Persistent Connections）HTTP URLURL 与UR...
Java前端
weixin_44140009的博客
03-09 914
发
JavaWeb前端技术
lem14的博客
09-01 1095
JavaWeb前端技术（一） 一、三种脚本语言 1、html超文本标记语言：实现网站页面实现，展现文字、表格、超链接等。 2、css样式：实现了页面的美化。 3、JavaScript：实现网站的交互（请求和响应）。jQuery只是对JavaScript进行封装，操作更加简洁、高效。 二、动态网页之B/S架构，ajax交互过程 1、用户访问页面，页面触发事件——>（创建）XHR对象 2、JavaScript（jQuery）发起ajax请求——>（请求）访问服务器端（注：ajax实
java-前端页面模板
03-04
本模板未使用任何前端框架，简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。
java框架练习前端页面
03-05
公众号前端页面。练习java框架，ssh或者ssm都可以练习，数据库自己建立
【Java EE】-博客系统(前端页面)
最新发布
m0_63979882的博客
04-26 2129
博客系统 登陆页面，列表页面，详情页面，编辑页面。使用css修饰登录页面，列表页面，详情页面，使用弹性布局进行水平排列。在编辑页面中引入markdown编辑器。引入editor.md需要注意的事项，以及方法。
Java 前端简易页面总结
wxiaomingtongxue的博客
09-11 668
初始化获取数据 js代码 $(function () { $("#jqGrid").jqGrid({ url: baseURL + 'system/artificer/list', datatype: "json", colModel: [ {label: 'seq', name: 'seq', hidden: true, hidedlg: true, ...
java web前端开发技术_JavaWeb前端开发知识总结(javaScript)
weixin_42361175的博客
02-24 512
JavaWeb前端开发知识总结(JavaScript)1. JavaScript技术1.1 JavaScript概述1.一个轻量级的脚本语言;2.嵌入到HTML去执行;3.执行顺序由上往下;一定注意:在使用DOM操作HTML标签,要保证HTML标签已经加载到内存中.window.onload = function(){ } // 入口函数,当页面加载完成后会调用该函数JavaScript组成:Ja...
JAVA前端HTML页面设计
weixin_68138130的博客
07-10 1410
JAVA前端HTML页面设计
Javascript-从hello开始
我就吃一口的BLOG
12-09 348
Javascript-从hello开始 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // alert是JavaScript语言提供的一个警告框函数。 // 它可以接收任意类型的参数
1.1 Java HTML前端网页
m0_53879048的博客
02-22 815
1. 网页基本信息 Hyper Text Markup Language (超文本标记语言) W3C 的标准包括 ： 结构化标准语言（HTML、XML) 表现标准语言（CSS） 行为标准（DOM、ECMAScript） （1、1.1 ） <!-- DOCTYPE : 告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> ​ <html lang="en"> <!-- head 代表网页的头部--&g...
Java前端：HTML——页面结构分析
fancy_male的博客
09-16 181
页面结构分析 元素名 描述 header 标题头部的内容（用于页面或页面中的一块区域） footer 标记脚部区域的内容（用于整个页面或页面的一块区域） section Web页面中的一块独立区域 article 独立文章内容 aside 相关内容或应用（常用于侧边栏） nav 导航类辅助内容 一般都放在body里面 ...
java web前端开发技术_浅谈Web前端开发主要掌握的三门技术
weixin_35615591的博客
02-24 915
这几年，随着互联网的飞速发展，大量怀有梦想的朋友涌入了IT行业，但是非常有经验的人却很少，出于大部分人对web前端技术的不了解，web前端开发工程师也是近几年的新兴职业，在大家都不是有很清晰的概念的时候，那么今天我就给大家简单介绍一下web前端开发。Web前端开发主要需掌握如下三门技术：HTML：HTML是一种用来制作网页的超文本标记语言，比如我们查看网页源代码看到的各个等。值得注意的是，HTML...
Java WEB 篇十 前端技术
xinyi_java的博客
08-27 669
谈谈你对 ajax 的认识？ Ajax 是一种创建交互式网页应用的的网页开发技术 Ajax 的最大特点： 可以实现局部刷新，在不更新整个页面的前提下维护数据，提升用户体验度 jsonp 原理 原理 jsonp 的最基本的原理是：动态添加一个<script>标签，使用 script 标签的 src 属性没有跨域的 限制的特点实现跨域。首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。此 时，服务器先生成 json 数据。 然后以 jav..
JavaWeb复习：HTML, CSS, DOM与JavaScript基础
"Java Web复习题，包括填空题、判断题和选择题，涉及HTML、CSS、DOM、JavaScript以及JavaWeb概述的相关知识点。" 详细内容: 1. HTML全称为HyperText Markup Language，是一种用于创建网页的标准标记语言，用于定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值